[CSS]擬似クラス、ワイヤーフレーム制作、リセットCSS

はじめに

今回は擬似クラスの使い方を学び、HTML＋CSSによるwebページの制作(マークアップ〜ワイヤーフレーム設計〜スタイルシートの適用)を行いました。
また、CSSリセットの方法についても学習しました。

擬似クラスとは

擬似クラスとは、文書の持つ木構造からは取得できない性質に対してスタイルを適用するための仕組みのことです。ミツエーリンクス

今回は基本的な使い方として、リンク要素に適用します。
順番を間違えないことが重要。
以下をCSSに記述します。

a link {color: blue;} 未訪問
a visted {color: purple;}　訪問済み
a hover{color: green;}　カーソルがリンクに乗った時
a active{color: red;}　リンクに対してアクティブな時

以上の指定で、条件によりそれぞれのCSSが適用されます。

なお、activeは現在の一般的なマシンパワーではほぼ瞬間表示になるため、指定することは減っています。

擬似クラスの幅広い使い方

CSS３(W3C,2011年６月~)からは用途が相当拡張されたとのこと。
→CSS3の可能性と実践【擬似クラス編】 | 株式会社シンメトリック公式ブログ |

HTMLを変更したくないときに便利。
インライン要素でエレメントを生成できたりする。
リストの一部に修飾を指定したりもできる。

和訳された仕様書。
→http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/

いろいろな用例など。
→CSS脱初心者への道！疑似クラスと疑似要素を理解すると表現が広がるよ！*prasm
→まだまだある！疑似要素と疑似クラスでできること | 株式会社LIG

ワイヤーフレームとは

デザインカンプとは違い、ウェブページの何をどこに配置するのかを決めた「レイアウト」のこと。いわばサイトの骨組み。

いつどのように使うか？

組織の中でワイヤーフレームが果たす役割

これから作るサイトを理解しやすくなる

プロジェクトのワークフローがスムーズになる

チームと関係者の議論を助ける

デザイナーと開発者を助ける

知ってるようで知らなかった！Web制作でワイヤーフレームが担う役割と重要性

授業の過程では、１ページをcontainer、header、conent、footerにグループ化した、シンプルなワイヤーフレームをスケッチしました。

リセットCSSとは

ブラウザの持つデフォルトのCSSはそれぞれ異なるため、同じ内容を記述しても、ブラウザの解釈により、違った表示がされてしまいます。
それを解決する手段がリセットCSSです。

Normalize.cssなどが配布されていますが、とくに初学者は意味を把握して記述することが重要です。

参考→HTML初心者が知っておくべきリセットCSS と3つのポイント | 3streamer blog

CSSリセットの設定すべき内容

ただしこの内容は、ブラウザの状況やWebの流れにより変わり、絶対的なルールは存在しません。

@charset "UTF-8";

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Lucida Grande",
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

→レスポンシブWebの時代だからこそ見直すべき、3つの「ウェブの哲学」 – Rriver

CSSリセットのフォント指定

より美しい表示を目指すために、フォントの指定は有効です。

font-familyで指定すべきもの(2015/03時点)

MacとiOSにヒラギノ、Winにメイリオを指定

font-family:
    "Hiragino Kaku Gothic ProN", 
    Meiryo,
    sans-serif;

英数字にWinはVerdana、MacはLucida Grandeを指定

font-family:
    "Lucida Grande",
    "Hiragino Kaku Gothic ProN",
    Verdana,
    Meiryo, 
    sans-serif;

（VerdanaとLucia Grandeの優位点)
→Georgia ProとVerdana Proの深い話 - フォントブログ
→» 身近な書体：Lucida Toshi Omagari

Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。