CSS3
フレキシブルボックスレイアウト（flexible Box Layout Module） flexboxはWebページを柔軟にレイアウトするために作られたもので、 親要素（Flexboxコンテナ）の中に子要素（Flexboxアイテム）を並べていくという考え方でレイアウトします。 flexboxの特徴 …
実行すると1秒後にAXELAという文字の描画が始まり2秒かけて描画し、最後の状態を保持して終了します。 実行してすぐの画面 AXELAという文字を破線にして、その間隔を表示されない間隔(下記のソース内stroke-dasharray: 2000;/*破線の間隔*/)まで広げているた…
CSS3によるアニメーションは大きく分けて、トランジションとアニメーションの2つに分けられます。 transitionとanimationとの比較 transition 動かすために:hoverなどのきっかけが必要 トランジションでは実行後に元のプロパティ値に戻る 比較的簡単な記述で…
CSS3のメディアクエリについてまとめておきます。 メディアクエリとは、ウィンドウサイズ、画面密度など閲覧環境の特性(メディア特性)に応じてCSSを分岐させることができる機能です。 メディアクエリの記述方法 記述方法には次のような3つの方法があります。…
Webフォントは、Webサーバー上に置かれたフォントファイルをダウンロードして表示するCSS3の機能です。 アイコンフォントのメリット フォントなのでテキストとのベースラインが合わせやすい。 大きさや色はCSSでコントロールできる ベクターデータなので拡大…
ナビボタンと画像をレスポンシブにする <html lang="ja"><head><meta charset="utf-8"><title>レスポンシブデザイン基礎</title><meta name="viewport" content="width=device-width"><style>/*Reset CSS*/html,body,ul,li { margin: 0; padding: 0;}ul { list-style: none;}a { …</meta></meta></head></html>
レスポンシブWebデザインとは レスポンシブWebデザイン（Responsive Web Design）とは、PC、タブレット、スマートフォンなどに適応た表示を、ひとつのHTMLファイルでおこなうデザイン手法のことです。 デバイスごとに専用サイトを用意することなく、マルチデ…
transition transitionは「hover:」などの動作をきっかけにして、アニメーションでプロパティの値を変化させることができるプロパティです。 transition: 変化にかかる時間 プロパティ 変化の仕方 ディレイ; 変化にかかる時間 s 秒ms ミリ秒 プロパティall/n…
線形グラデーション 上から下へのグラデーション HTML<div id="box1"></div> CSS#box1 {width: 300px;height: 100px;margin: 50px auto 0;background-color: #F36;/*グラデーションが効かないIE8のため*/background:-webkit-linear-gradient(top, #F36, #FCC);/*Android標準ブラウ…
テキストの装飾 text-shadow テキストに影をつける text-shadow:x方向の距離 Ｙ方向の距離 ぼかし幅 影色; 1 ドロップシャドウ text-shadow: 2px 2px 3px #999; 2 グロー（光彩） color: #FFF;text-shadow: 2px 2px 3px #999; 3 べベル（浮き出し） color: #…
CSS3でできるようになること classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が格段に広がる 簡単に柔軟な多段組を実現できる CSSだけでウェブに「動き」をつけられる Webフォントをサポート ウィンドウやデバイス画面サイズ…
