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

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

CSS3

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

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

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

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

変形 - transform(変形)

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

CSS3を使ったページ構成

CSS3を使ったページ構成 HTML5新要素を使ったページ作成 a要素の使い方を工夫する。 The Café のおすすめ カフェドリンク カフェドリンク 濃いめのコーヒーで香りを楽しむ冷たいドリンク。 コーヒードリンク 濃いめのコーヒーと凍らせた牛乳で作るフラペチー…

グラデーション

linear-gradient 線形グラデーションを作成するための background-image の新しい値です 旧ブラウザ対応 上から下への2色グラデーション <ul class="grad"> <li class="grad01">2Colors (top → bottom)</li> <li class="grad02">3Colors (left → right)</li> <li class="grad03">3Colors (left top → right bottom)</li> </ul> グラデーションを表示できない…

背景画像

multiple-background CSS3からは、1つの要素に複数の背景画像を指定できるようになりました 従来通り1枚背景画像を指定した後、カンマで区切って2枚目の背景画像を指定します 後から指定した画像は、一番下に配置されます <div class="multi-bg"></div> .multi-bg { width: 400px; hei…

Web Fonts

Web Fonts CSS3.0 fonts module Webフォントはコンテンツ側がフォントデータを持ち、コンテンツ側から提供されるフォントデータに従って、Webブラウザなどの可視化(レンダリング)をともなう文字表示を行うシステムおよびそのフォント Google Fonts + Japan…

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セレクタ

属性セレクタ 新たに追加された属性セレクタ 属性値が「〜で始まる」要素を選択する E[foo^="bar"] <ul class="sample"> <li class="STARTxx">class="STARTxx"</li> <li class="xxSTART">class="xxSTART"</li> <li class="xxSTARTxx">class="xxSTARTxx"</li> </ul> /*〜で始まる*/ li[class^="START"]{ border-color:#F00; } 属性値が「〜で終わる」要素を選択する E…

CSS3の基本

CSS3の概要 CSS3は、これまで使ってきたCSSの延長 CSS3を使うメリット テキスト P.258 classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が広がる 簡単に柔軟な他段組を実現できるようになる CSSだけで「動き」をつけられるよ…

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属性の拡張として定義されてい…

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

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を含み…