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

ノーマライズ・スタイルシート - normalize.css

CSS

ノーマライズCSSとは、リセットCSSとは異なり、ブラウザに初期設定されているCSSをすべてリセットするのではなく、リセットの必要のないものはそのまま利用しようという考え方です。 ブラウザごとに異なる初期設定の差を無くす働きもあるようですが、結局基…

ポジションレイアウト fixed

positionを使って表示位置を指定 表示位置の指定方法の種類 static ポジションレイアウトを行わない relative 通常の表示位置を基点にした位置指定 absolute 親要素を基点にした位置指定 fixed ブラウザ画面を基点にした位置指定 page ページボックスやリー…

ポジションレイアウト absolute

positionを使って表示位置を指定 表示位置の指定方法の種類 static ポジションレイアウトを行わない relative 通常の表示位置を基点にした位置指定 absolute 親要素を基点にした位置指定 fixed ブラウザ画面を基点にした位置指定 page ページボックスやリー…

レスポンシブでcalc関数を利用する

レスポンシブWebデザインでマージンは可変させないで一定にし、コンテンツのみ可変にしたい場合があります。そんな時に便利な calc 関数の使い方についてまとめます。 参考Webページ developer.mozilla.org calc関数の書式 width:calc( boxSize% - fixedVal…

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

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

CSS3のアニメーション

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

アイコンフォント

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フォントをサポート ウィンドウやデバイス画面サイズ…

複数ページの作り方

複数ページでサイトを作る際のフォルダー構成 ページ毎にフォルダーを作り、各フォルダの中のHTMLファイルは必ず index.html という名前にする。 CSSフォルダにはすべてのCSSファイルをまとめる。 imgフォルダにはすべての画像をまとめる。 上記のフォルダ構…