Web・デザインスクールHTML/CSS入門講座レッスンノート マークアップの仕方とレスポンシブWEBサイトについて

マークアップの仕方とレスポンシブWEBサイトについて

HTML/CSS入門講座のレッスンノート

レッスンノートって?レッスンノートって?

体験レッスンお疲れさまでした!

まずは
ご自身が作成しておられるデザインを
拝見させていただきました。

また、
コーディングをされている
トップページを拝見させていただきました。

ある程度は
どこでどのような要素を使うべきか
ご理解されていらっしゃいました。

あとはデザインに合わせて
より効率のいい要素構築の
パターンを積み重ねて頂くと、
より早くマークアップが可能になります。



【デザインからマークアップするためには】

HTMLとCSSを書くにあたって
一番理想とするものは、
「いかに少なく書いて、
 いかにきれいに表示させるか」
につきます。

ですが、
最初のうちはどうしても
たくさん書いてしまいます。

こちらもある程度は
慣れも必要な部分なので、
どんどん書きながら
改良していきましょう。


まずはHTMLとCSSを書く前に、
中ページのデザインのレイアウト部分を見て頂き、
そこの部分だけ作り上げます。

共通な
ヘッダー部分・サイドメニュー部分・フッター部分が
これでできあがります。

これをベースのテンプレートとして
中ページを量産していきます。

最後に例外として
トップページを
作り込む感じなります。



【レスポンシブWEBサイトについて】

レスポンシブWEBサイトは、
3つの技術を駆使して
成り立っています。

・フルードグリッド
・フルードイメージ/メディア
・メディアクエリ

この3っつになりまが
必ずベースとして
知っておかなければいけないのが、
「CSS」になります。


フルードグリッドは
単位をpx指定から%指定に
変える方法です。

この設定により、
デバイスサイズに合わせて
フレキシブルに動かせます。

基本的にCSSのプロパティで
width height margin padding
この4つを使って変えていきます。


フルードイメージ/メディアは
img要素にwidth属性、height属性を
まずは消してしまいます。

そしてCSSでimg要素に
width:100%;
height:auto;
を入れて使っていきます。


最後にメディアクエリですが、
こちらもCSSに書き込む感じです。

デバイスの幅に対して
読み込むCSSを切り替わる仕組みで、
どのようなデバイスでも
対応できる仕組みになっています。


見る側としましては、
ワンソースでPC・スマホ・タブレットと
表示できるので、
簡単にできるイメージがあります。

ですが、
実際の作業工数は
ブレイクポイント(切り替わる幅)の
設定数により若干違うのですが、
別々にPCサイト・スマホサイトを作るよりも
1.5倍~3倍になっています。

ですので、
最初はPCとスマホだけの
ブレイクポイント1つの
サイト作りをお勧めします。
このレッスンノートを書いたコーチ

制作会社で自力で得た実践的ノウハウ伝授。WEBデザイナーも夢じゃない!

初心者でもできるHTML・CSS入門講座
藤田佳 (HTML/CSS)

梅田/大阪・西宮(JR)・摂津本山・三ノ宮・元町・神戸・垂水・西宮北口・西宮(阪神)...

レッスンノート ページ先頭へ

HTML/CSS情報

サイタのHTML/CSS講師がブログを通して、HTML/CSS情報を発信。更新情報のチェックはこちらから!

twitter

HTML/CSSの先生

@DTPCyta