WEBサイト制作の勉強

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

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

HTML5+CSS3

既存サイトのトレース

<html lang="ja"> <head> <meta charset="utf-8"> <title>フルスクリーンレイアウト</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>ロゴ</h1> <div class="top top-L"> <a href="#"> <div class="cap"> <h2>タイトル</h2> <p class="txt">モードのハイライトをプレイバック!<br>VOGUE JAPAN撮りおろしのアーカイブビジュアル集。</p></div></a></div></body></html>

css3を使ったドロップダウンメニュー

css3のアニメーションでフェードインなどを表現する場合、「display:none」から「display:block」ではアニメーションを効かせる事が出来ないので、代わりに「visibility:hidden;」と「visibility: visible;」を使用します。 ただ、visibilityの指定のみだと…

ハンバーガーメニュー

<html lang="ja"> <head> <meta charset="utf-8"> <title>RWD-ハンバーガーメニュー</title> <meta name="viewport" content="width=device-width"> <style> html,body,p,ul,li,a{ margin: 0; padding: 0; line-height: 1.0; } ul{ list-style: none; } a{ text-decoration: none; } /*PCレイアウト*/ P{ display: none; } nav { width: 10…</meta></meta></head></html>

縦書きとrubyタグの使い方

「webは横書きが当たり前」そんな常識は変化しつつあります。 実はwebにおける縦書きの取り組みは、Internet Explorer5.5(2000年)が独自に実装していましたが、他のブラウザーでは実装されていませんでした。CSS3の策定を機会に最新の主要なウェブブラウザは…

Flexboxの使い方

Flexbox(Flexible Box Layout Module)はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わった…

clickイベントとtransform

最近のWebアニメーションはスマホで表示する事も考慮し、動きの軽いアニメーションが求められています。その為には単一のスクリプトではなく複数のスクリプトを合わせる必要があります。 jQueryの特徴の1つであるアニメーション機能を使うと、手軽にアニメー…

動画を背景にする

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

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

画像をレスポンシブに対応させる為にはたった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サイトを…

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要素は指定…