WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

HTML5+CSS3

画像をレスポンシブに対応させる(可変にする)

画像をレスポンシブに対応させる為にはたった2種類のやり方しかありません。img画像であればフルードイメージ化させる。background画像であれば、background-sizeの指定をする。 この2種類の使い方と特徴を覚えれば、画像に関しては問題なくレスポンシブに…

CSS3アニメーション・transition

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…

transformプロパティ

CSS3のtransformプロパティを使うことで要素に2D変形、または3D変形を適用する事が出来ます。 transformプロパティでは 移動(translate) 縮尺(scale) 回転(rotate) 傾斜(skew) 遠近効果(perspective) の5つの動きがありますが、このうち移動、縮尺…

ヒーローヘッダーを使ったサイト制作

最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 「ヒーローヘッダー」と呼ばれています。 ヒーローヘッダー(Hero Header)とは、ウェブサイトのファーストビューに全画面の画像を使用するなど、巨大なイメージ…

SVGを使ったアニメーション

carlphilippebrenner.comtympanus.netgardenstudio.com.br SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、線や面などの図形…

background-size: の値

background-sizeプロパティは、背景画像のサイズを指定する際に使用します。これまで使ってきたようなピクセルやパーセンテージの他に「contain」「cover」といった値でも設定出来ます。 「contain」 縦横比は保持して、背景領域に収まる最大サイズになるよ…

ドロワーメニュー

/* ハンバーガーメニュー ---------------------------------------------------------- */ #globalHeader nav { float: right; } #globalHeader nav p#menuToggle { background: -webkit-linear-gradient(top, #eeedf2 1%, #717171 4%, #2b2b2b 84%);/*古い…

覚えると便利なnth-child()

これまでの授業でもCSS3の疑似クラス「:nth-child(odd)」「:nth-child(even)」や「:nth-child(3)」は使って来ましたが、()の内に数式を入れる事で非常に便利になります。「:nth-child(2n+1)」= 「:nth-child(odd)」(奇数のみ指定)計算式 n=0: 2*0+1= 1 =…

cssセレクタの指定方法 復習

jQueryの勉強を進めていく上で、cssでのセレクタの取り方の重要性を改めて感じたと思います。 jQueryやCSS3が上手く動かない理由の多くは実はcssでセレクタが正しく指定出来ていない、だったりします。この機会にもう1度cssでのセレクタの指定方法を確認しま…

動画を背景に使う

最近は動画を背景に使ったWebサイトもよく見かけます。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。 実例 www.joe-san.com optimo.com www.kalexiko.com poolhouse.co 作る際…

フルスクリーンレイアウト その1

最近、よく見かける「1枚画像」を画面全体に表示させているようなフルスクリーンレイアウト。 こういったレイアウトを作る際の1番のポイントは、用意する画像の大きさです。 自分のPCでは綺麗にフルスクリーンで表示されるけど、別のPCでは写真が見切れて…

モバイルファーストを意識したレスポンシブデザインサイトの制作 2

授業で制作を進めているモバイルファーストを意識したRWDサイト(netsmart)のモバイルサイト部分を完成させましょう。完成例 http://yachin29.webcrow.jp/sp/ 今回組み込むjQuery キービジュアルのスライド(bxslider) タブパネル アコーディオンパネル ウィ…

「 display: table」を使ったタブパネル

これまでHTML上でスタティック(縦)に並んでしまう要素を横並びにする方法として、 float inline、inline-block などを用いてきましたが、今回は「 display: table」を使い横並びに。さらにjQueryを使ってタブパネルにしてみます。 「 display: table」とは…

ホバーにCSS3アニメーション

transitonによるアニメーション <html> <head> <meta charset="utf-8"> <title>transitonによるアニメーション</title> <style> /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0;</meta></head></html>…

CSSで計算式を可能にするcalc()ファンクション

CSSで演算というと、SaccやLessといったメタ言語を使うというイメージですが、単純な四則演算であれば、CSS3の「calc()」機能で代用出来ます。 IEはIE9からサポートしていましたが、他のブラウザーのサポートが中々進まなかったことから、余り使われてきませ…

SVGを使ったアニメーション

http://carlphilippebrenner.com/portfolio/beatricecreationscarlphilippebrenner.comtympanus.netgardenstudio.com.br SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベク…

ハンバーガーメニューにアニメーションを追加する

今回は前回のハンバーガーメニューに、CSS3のアニメーション機能を使って、クリックした際に3本線が✕印に変わるエフェクトを追加します。 CSS3の「 transform: rotate」を使って線を動かします。 3本線の1番上の線と1番下の線を反時計周りに回転させ、✕…

css3を使って文字を動かす(横方向)

以前、CSS3のanimation機能を使って文字を縦方向に動かしました。 今回はモデルとしているキリンのサイトにあるような、テキストが横に動いていくバージョンに変更します。 横方向に動かす時にはX方向の座標とY方向の座標をどう取れば良いかしっかりと理解し…

HTML5でのアウトライン構造を理解する

アウトラインとは階層構造のことで、HTML5のマークアップでは、このアウトラインを意識することが非常に重要になってきます。また、正しいアウトライン構造を作るためにはsectionタグを使用したセクショニングをしっかりと理解する事が大事です。webサイトを…

HTML5でのアウトライン構造を理解する

アウトラインとは階層構造のことで、HTML5のマークアップでは、このアウトラインを意識することが非常に重要になってきます。また、正しいアウトライン構造を作るためにはsectionタグを使用したセクショニングをしっかりと理解する事が大事です。webサイトを…

css3アニメーションで桜が舞う

<html> <head> <meta charset="utf-8"> <title>桜が舞う</title> <style> html, body { margin: 0; padding: 0; } #container { width: 100%; height: 700px; background: #000; } .inner { position: relative; width: 300px; margin: 0 auto; } .inner div { opacity: 0; animation-name: Drop; animation-du…</meta></head></html>

css3アニメーションで桜が舞う

<html> <head> <meta charset="utf-8"> <title>桜が舞う</title> <style> html, body { margin: 0; padding: 0; } #container { width: 100%; height: 700px; background: #000; } .inner { position: relative; width: 300px; margin: 0 auto; } .inner div { opacity: 0; animation-name: Drop; animation-du…</meta></head></html>

「 display: table」を使ったタブパネル

これまでHTML上でスタティック(縦)に並んでしまう要素を横並びにする方法として、 float inline、inline-block などを用いてきましたが、今回は「 display: table」を使い横並びに。さらにjQueryを使ってタブパネルにしてみます。 「 display: table」とは…

before要素とafter要素

before要素とafter要素は指定した要素に擬似要素を生成します。content プロパティを使って、装飾的なコンテンツを要素に追加するのによく使われます。 コンテンツをスタイルシートの方で before要素は指定した要素に擬似要素を生成します。 after要素は指定…

ボタンにアニメーションを追加する

前回やった「jQueryのclickイベントを使ってtransformを適用させる」を応用し、ボタン自体にアニメーションを追加させてみましょう。 <html lang="ja"> <head> <meta charset="utf-8"> <title>線を動かす</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function() { $('.btn').on('click', function…</meta></head></html>

Webフォントの使い方

Webフォントとは? 元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手…

Webフォントの使い方

Webフォントとは? 元来、ブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないフォントが表示されてしまい、デザインに制約が生じてしまう。フォントを画像にして表示するという手…

transformプロパティ

CSS3のtransformプロパティを使うことで要素に2D変形、または3D変形を適用する事が出来ます。 transformプロパティでは 移動(translate) 縮尺(scale) 回転(rotate) 傾斜(skew) 遠近効果(perspective) の5つの動きがありますが、このうち移動、縮尺…

提出課題 atella

指定の通り、HTML5で記述し、アウトライン構造を意識して制作してみましょう。 アウトライン構造1 アウトライン構造2 <html lang="ja"> <head> <meta charset="utf-8"> <title>パスタとワインの店</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="container"> <header> <h1>パスタとワインの店|atella</h1> <p class="mainImg"></p></header></div></body></html>

CSS3によるアニメーション

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。CSS3におけるトランジション(transition)とアニメーション(animation)の違い 「transition」 動かすために:hoverなど…