モックアップからマークアップ・スタイルシートへの流れ

CSS HTML

基本的な文法や決まりを多少なり覚えたところで、それをどう『使えるようになる』までもっていくのでしょう。
自分の希望でも、他人からの発注や要望でも、それらはまず『モックアップ』や『ワイヤーフレーム』と呼ばれるイメージ案に出力されるらしいですね。
そのイメージを、ウェブサイトという形で実装する際に、やっと『HTMLやCSSが使えるか』が問われるようです。
その流れをざっと見たみました。

#1: Converting a Photoshop Mockup (part 1 of 3) | CSS-Tricks
　→　背景の色とヘッダ画像の設置まで

#2: Converting a Photoshop Mockup (part 2 of 3) | CSS-Tricks
　→　メインメニュー、メインコンテンツ、フッタの設置

#3: Converting a Photoshop Mockup (part 3 of 3) | CSS-Tricks
　→　右カラムと左クイックジャンプの整備

うーんなるほど。合計時間は１ｈ程度。
英語でも、なんとなく分かりますね。
まずもってモックアップとしてイメージにまとめる技術が無いなと思いました。
実際に動画を追うと、CSSの記述でインデントがうまく使われてて、これまで見てきたものより分かりやすいです。
これまで、セレクタ部分が長くなればなるほど、パッと見で『そこがどこを指しているのか』がどうも分からなくて、困ってました。
モックアップを確認しつつ、マークアップとスタイルシートを同時並行で構築していく様子がよく分かりました。
記述されていくプロパティで、それがなぜそこで使われるのかもほぼ理解できました。
音量が小さいのはどうしてでしょう（笑）

これからどうするか

実践しなきゃ覚えないし『使えることにならない』ので、どう実践するかということになります。
他のサイトのソースをみて「ふんふんなるほど」としたところで、創造性はないし技術は身につきません。
うーん。

　…　なんにせよ、この技術は身に着けなければいけません。フォトショ？イラレ？ファイヤワークス？のあたり。

　…　とりあえずのコース。モックアップ技術もないし、完全な独自アイデアもないし。
　　　けれど、そのウェブページのソースには頼らず、マークアップやスタイルシートは自分でやってみるコース。

　…　いちばん理想のコース。ちょっとまだ遠そう。