はじめに
私たちが初めてのWebページ開発を行うにあたり、
前提として、CSSについてどのように考え、開発を行ったのノウハウを共有します
CSS
CSS（Cascading Style Sheets）とは、ウェブページのスタイルを指定するための言語
ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートという
CSSはHTMLファイル内やCSSファイル内になど、開発者が記載したい任意の箇所に記載することができる
※記載方法はそれぞれによって異なる
ケースによって使い分けは必要だが、
基本方針は以下のメリットから、別ファイル(CSSファイル)に記載で行くべき
メリット
- ページ間のデザインの統一
- ファイル単位の作業分担
- 変更時の変更箇所の局所化
CSSの構成
以下の要素で構成されている
セレクタ:どのHTMLタグに対して適応するか
プロパティ:どういった内容のデザインを施すか
値:プロパティの値
CSSのサイズ指定について
現在、PC・タブレット・スマホなどさまざまな画面サイズを持つデバイスが存在する
Web開発の際、各デバイス画面の特徴を元に切り替え基準(ブレイクポイント)を設定し、
メディアクエリーを用いた、CSSの切り替えを行う。
各デバイスの特徴を踏まえ、CSSは以下の3種類を用意すると無難
・スマートフォン用CSS:横幅480px以下に対して、縦長の画面を想定したCSS
・タブレット：横幅481px以上1023px以下に対して、正方形の画面を想定したCSS
・PC：横幅1024px以下に対して、横長の画面を想定したCSS
※横長・縦長画面の考慮は、基本画像に対してのみ行えば良い
ボックスモデルについて
CSSはWebページのデザインを担当するため、目的のデザインを実現するために様々な考え方が存在する
その一例がボックスモデル
http://zero.css-happylife.com/img/basic/box_model.gif
文書の要素を一つのボックスと捉えて、全体にどのように配置していくかという考え方
設計手順
成果物は基本以下のようになる
・どの画面でも共通的に使用するCSS
・各デバイス種類ごとのCSS(計3つ)
・HTMLファイル
・画像(各デバイスごとにリサイズして用意する)
【手順】
1.全体のコンテンツ内容をデザインする(紙でも良い)
※好みにもよるが、確認のしやすいPC画面のレイアウトで考えるのがオススメ！
2.1の手順で考えたレイアウトに対して、スマホ・タブレットではどのように配置したいかデザインする
※ここで出た差分が切り替える必要のあるCSSの内容になる
3.メインCSSの内容を記載して行く
※基本、文字の大きさや、要素の幅は可変のプロパティを使用する(%,em,remなど)
※文字の大きさはデバイスの横幅に対していくつ、という指定をする
※%指定は親要素の幅を元に計算される点に注意
まとめ
基本的なCSSのプロパティについてはdisplay×positionの組み合わせを脳内でイメージできるようにすれば、十分です。
あとは行いたいデザインを随時ネットで調べることで、スムーズな開発が行えると思います。
また、幅の指定方法など、偉大な先人たちの知恵がネットにいっぱい転がっているので、
「イケテナイと思ったらすぐ調べる」、を徹底して行って下さい。(戒めも込めて)
※ここに記載された内容はあくまで開発手法の一例です
使用するフレームワーク、プロジェクトの方針をまず1として下さい