CSS
ノーマライズCSSとは、リセットCSSとは異なり、ブラウザに初期設定されているCSSをすべてリセットするのではなく、リセットの必要のないものはそのまま利用しようという考え方です。 ブラウザごとに異なる初期設定の差を無くす働きもあるようですが、結局基…
positionを使って表示位置を指定 表示位置の指定方法の種類 static ポジションレイアウトを行わない relative 通常の表示位置を基点にした位置指定 absolute 親要素を基点にした位置指定 fixed ブラウザ画面を基点にした位置指定 page ページボックスやリー…
positionを使って表示位置を指定 表示位置の指定方法の種類 static ポジションレイアウトを行わない relative 通常の表示位置を基点にした位置指定 absolute 親要素を基点にした位置指定 fixed ブラウザ画面を基点にした位置指定 page ページボックスやリー…
レスポンシブWebデザインでマージンは可変させないで一定にし、コンテンツのみ可変にしたい場合があります。そんな時に便利な calc 関数の使い方についてまとめます。 参考Webページ developer.mozilla.org calc関数の書式 width:calc( boxSize% － fixedVal…
実行すると1秒後にAXELAという文字の描画が始まり2秒かけて描画し、最後の状態を保持して終了します。 実行してすぐの画面 AXELAという文字を破線にして、その間隔を表示されない間隔(下記のソース内stroke-dasharray: 2000;/*破線の間隔*/)まで広げているた…
CSS3によるアニメーションは大きく分けて、トランジションとアニメーションの2つに分けられます。 transitionとanimationとの比較 transition 動かすために:hoverなどのきっかけが必要 トランジションでは実行後に元のプロパティ値に戻る 比較的簡単な記述で…
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フォントをサポート ウィンドウやデバイス画面サイズ…
複数ページでサイトを作る際のフォルダー構成 ページ毎にフォルダーを作り、各フォルダの中のHTMLファイルは必ず index.html という名前にする。 CSSフォルダにはすべてのCSSファイルをまとめる。 imgフォルダにはすべての画像をまとめる。 上記のフォルダ構…
