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

flexboxを使う 1

フレキシブルボックスレイアウト(flexible Box Layout Module) flexboxはWebページを柔軟にレイアウトするために作られたもので、 親要素(Flexboxコンテナ)の中に子要素(Flexboxアイテム)を並べていくという考え方でレイアウトします。 flexboxの特徴 …

CSS3によるSVGアニメーション

実行すると1秒後にAXELAという文字の描画が始まり2秒かけて描画し、最後の状態を保持して終了します。 実行してすぐの画面 AXELAという文字を破線にして、その間隔を表示されない間隔(下記のソース内stroke-dasharray: 2000;/*破線の間隔*/)まで広げているた…

CSS3のアニメーション

CSS3によるアニメーションは大きく分けて、トランジションとアニメーションの2つに分けられます。 transitionとanimationとの比較 transition 動かすために:hoverなどのきっかけが必要 トランジションでは実行後に元のプロパティ値に戻る 比較的簡単な記述で…

CSS3のメディアクエリ

CSS3のメディアクエリについてまとめておきます。 メディアクエリとは、ウィンドウサイズ、画面密度など閲覧環境の特性(メディア特性)に応じてCSSを分岐させることができる機能です。 メディアクエリの記述方法 記述方法には次のような3つの方法があります。…

アイコンフォント

Webフォントは、Webサーバー上に置かれたフォントファイルをダウンロードして表示するCSS3の機能です。 アイコンフォントのメリット フォントなのでテキストとのベースラインが合わせやすい。 大きさや色はCSSでコントロールできる ベクターデータなので拡大…

レスポンシブデザイン2

ナビボタンと画像をレスポンシブにする <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>

レスポンシブデザイン1

レスポンシブWebデザインとは レスポンシブWebデザイン(Responsive Web Design)とは、PC、タブレット、スマートフォンなどに適応た表示を、ひとつのHTMLファイルでおこなうデザイン手法のことです。 デバイスごとに専用サイトを用意することなく、マルチデ…

CSS3の変形・アニメーション

transition transitionは「hover:」などの動作をきっかけにして、アニメーションでプロパティの値を変化させることができるプロパティです。 transition: 変化にかかる時間 プロパティ 変化の仕方 ディレイ; 変化にかかる時間 s 秒ms ミリ秒 プロパティall/n…

CSS3のグラデーション

線形グラデーション 上から下へのグラデーション 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標準ブラウ…

CSS3プロパティ

テキストの装飾 text-shadow テキストに影をつける text-shadow:x方向の距離 Y方向の距離 ぼかし幅 影色; 1 ドロップシャドウ text-shadow: 2px 2px 3px #999; 2 グロー(光彩) color: #FFF;text-shadow: 2px 2px 3px #999; 3 べベル(浮き出し) color: #…

CSS3の概要

CSS3でできるようになること classやidに頼らないセレクタ作りが可能になる CSS3だけで表現できるデザインの幅が格段に広がる 簡単に柔軟な多段組を実現できる CSSだけでウェブに「動き」をつけられる Webフォントをサポート ウィンドウやデバイス画面サイズ…