Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

【CSSはセレクタを先に書いてしまうのがポイント】

f:id:wp-lesson:20170207145043j:plain

HTMLでタグを構造化したあと、
その構造を外側から内側に向かって過不足なく
辿りながら、CSSセレクタを書き出します。
 
そうすると、
 
「あ!ここもスタイル付けなきゃ!」
「えっと、ここはどういうセレクタがいいかな?」
 
とか、行き当たりバッタリに悩む時間を
劇的に減らすことができます。
 
HTMLの構造に沿って書くから、
あとで自分で見ても他人が見ても分かりやすい
綺麗な(=保守性が高い)コードになります。
 
このセレクタだけ書き並べたものを、
ディベロッパーツールの編集欄に貼り付けると、
ディベロッパーツールを開いたまま
HTMLの階層を1つ選択してはCSSを入れ、
次のタグを選択してはCSSを入れ・・・
 
というように、流れ作業的にホームページの
見栄えを組み立てていくことができます。
 
このやり方が非常に便利なので、
レッスンを受けていただいた方にも
なるべくお教えするようにしています。

CODEMYのマンツーマンレッスンでは、
HTML5やCSS3を基礎からしっかり学びたい方のために、
コース学習の中でカリキュラムをご提案致します。
 
▼無料相談をお気軽にご利用ください。
http://codemy-lesson.office-ing.net/contact
 
━━━━━━━━━━━━━━━━━━
講師が執筆した本が発売されました
━━━━━━━━━━━━━━━━━━
 
『ホームページ作成のツボとコツがゼッタイにわかる本』
定価: 2,400円(税別)出版社:秀和システム
 
Amazon購入ページはこちら
http://amzn.to/2bXJkbs
 
━━━━━━━━━━━━━━━━━━
CODEMYのオンラインレッスン
━━━━━━━━━━━━━━━━━━
 
【1】自宅でマンツーマンレッスン
http://codemy-lesson.office-ing.net/
知りたいことだけ学べる個人レッスンです。
 
【2】動画と個別添削のプログラミング講座
http://bit.ly/2h7ZeRJ
HTML/CSS/JavaScriptの基本が身に付くレッスンです。
↓動画講座を無料体験してください
http://bit.ly/2hw7mIy