読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

Web Fonts - Font Awesomeでアイコンを表示

Font Awesome fontawesome.io BootstrapCDN <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> アイコンを表示する <div class="snsmenu"> <ul> <li><a href="#"><i class="fa fa-twitter"></i><span>Twitter</span></a></li> <li><a href="#"></a></li></ul></div></link>

CSS3で作るホバーアニメーション(2)

キャプションを表示 <html lang="ja"> <head> <meta charset="UTF-8"> <title>transitonによるアニメーション</title> <style> /* reset ------------------------------------*/ html, body, h1, h3, p, ul, li { margin: 0; padding: 0; line-height: 1.0; } ul { list-style: none; } a { text-decoration: none; } img { b…</meta></head></html>

CSS3で作るホバーアニメーション(1)

CSS3で作るマウスオーバーアニメーション 背景色が変化するアニメーション <html lang="ja"> <head> <meta charset="UTF-8"> <title>背景色が変化するアニメーション</title> <style> html,body, h1, ul, li { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } ul {</meta></head></html>…

CSS3メディアクエリ

メディアクエリ メディアクエリは、ウィンドウのサイズやモニターの物理サイズ、画面密度やデバイス向きなど、閲覧環境の特性(メディア特性)に応じてCSSを分岐させることができる機能で、CSS2.1の時代から使われている media属性の拡張として定義されてい…

アニメーション - transition(トランジションアニメーション)

transition(トランジションアニメーション) transition は、「:hover」などの動作をきっかけとして、アニメーションでプロパティの値を変化させることができるプロパティです

変形 - transform-origin(変形の原点)

transform-origin(変形の原点) ローカル座標の原点は、transform-origin の値を変更することでいつでも変更できます 変形の原点を変更する

変形 - transform(変形)

transform(変形) transformプロパティは、二次元座標での変形を行うプロパティです 値に translate( ) / scale( ) / rotate( ) / skew( ) の4種類のトランスフォーム関数を取り、それぞれ移動・拡大縮小・回転・傾斜させることができます 移動の書式 tran…

背景画像とグラデーション

CSS3セレクタ

CSS3のプロパティ

CSS3のプロパティ テキストP.276 まず、CSS3で表現してみる CSS3で角丸を設定する <section> <h3>border-radius</h3> <ul class="sample bdr"> <li class="bdr01">全て同じ</li> <li class="bdr02">左上 | 右上 | 右下 | 左下</li> <li class="bdr03">左上 | 右上と左下 | 右下</li> <li class="bdr04">左上と右下 | 右上と左下</li> <li class="bdr05">正円</li> </ul> </section> /* bor…

CSS3の基本

CSS3を使うメリット(テキスト P.258) classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が広がる 簡単に柔軟な他段組を実現できるようになる CSSだけで「動き」をつけられるようになる CSS3は下位互換 CSS3は、CSS2.1を含み…

CSS3のプロパティ

CSS3のプロパティ テキストP.276 まず、CSS3で表現してみる CSS3で角丸を設定する <section> <h3>border-radius</h3> <ul class="sample bdr"> <li class="bdr01">全て同じ</li> <li class="bdr02">左上 | 右上 | 右下 | 左下</li> <li class="bdr03">左上 | 右上と左下 | 右下</li> <li class="bdr04">左上と右下 | 右上と左下</li> <li class="bdr05">正円</li> </ul> </section> /* bor…

CSS3の基本

CSS3を使うメリット(テキスト P.258) classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が広がる 簡単に柔軟な他段組を実現できるようになる CSSだけで「動き」をつけられるようになる CSS3は下位互換 CSS3は、CSS2.1を含み…