ささぴよ 
2020.02.18 超初心者のためのWordPress解説集への案内を追加しました。
最近よく聞かれるのが「デザインカンプは出来たけどどうやってコーディングしたら良いのかわからない」という話。
いや、出来たらそのままコーディングだよ…なんて思うのは、どうもずっとやっているから思うことらしいので、そのステップを改めて整理してみました。
慣れちゃうと、こんなこと考えなくてもできる様になっちゃうもんですね。今更ながらそんなことを思うようになりました。
正確に技術としての理解をするということよりは、大枠としてどんなものなのかということや、どう使えるのかということをイメージでとらえるためにまとめている記事です。
この記事を通して興味が湧いたら、他の皆さんの書いている記事も見てみてください。必要な記事が読めるようになっていると思います。
目次ページはこちらにありますので、よかったらみてみてください。
この記事の目次
カンプをブロッキングしよう
なかなかここが難しいようなのですが、カンプの一つ一つのブロックを四角で囲んで書き足してみるといいと思います。細かければ細かいほどいいとは思うのですが、あまり細かすぎても大変なので、ある程度のブロッキングで良いのかなと言う気がします。
そもそもHTMLはそのブロックの中に何があるか（＝要素と呼ばれる物）で構成されているので、一番悩ましい全体的な配置の部分を整理できれば、あとは、その中の構成を考えていけば良いと言うことになります。
それをブロック毎にこなすのが難しければ、この段階でできるだけ細かくブロッキングすればいいかと思います。
例えば…ということで、こんな感じにブロッキングできたとしましょう。
ブロッキングした物を縦に並べ直そう
次は、ブロッキング出来た物を縦に並べ直しましょう。
正直、このステップは無くても良いのですが、コレをやるとHTMLの構造に近くなるので、なれるまでは割とお薦めです。
お気づきの通り位置の調整はCSSのお仕事ですので、要素の親と子の関係が崩れない限り、どうなろうとHTMLは同じということになります。そこを逆手に取る感じです。
ということで、先程の例を縦に並べ直すとこうなります。
余裕があれば、このタイミングでidやclassを付けておくとコーディングしやすくなりますね。(今回はやってないですけどね。)
コーディングしよう
さぁ、コーディングです。
コーディングはひたすら先程のブロッキングの通りに、
この要素の内側にこの要素という親子関係が崩れないように
書き進めていきます。
コードとしてはこんな感じになります。
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Nice Title</title> </head> <body> <header> </header> <nav> </nav> <article> <section> </section> </article> <aside> </aside> <footer> </footer> </body> </html>
続きはCSSで進める
ここまで来れれば残りはCSSでのスタイリングです。
HTML然りですが、そもそもどんなタグがあるのかだとか、CSSでのプロパティ（設定可能な項目）はどんなものがあるのかとか、その辺が前提知識として必要になります。大変ですが、このあたりは地道に覚えていくしか無いでしょう。
よく「全部覚えないとダメですか？」って聞かれるのですが、そんなことは無いと思います。
正直「こんなのあったなー、どう書くんだっけなー」で調べられれば十分だと思います。そのうち順番に紹介していきたいなと思いますが、基本的な部分よりも新しいプロパティとかの方が様々なサイトでの紹介率は高い気がします。
そんなことを踏まえると、基本的なプロパティについては覚えておけると理想的なことには変わりないのですが、プロパティ名と役割程度で充分かなと思うところです。指定の書き方については調べられると思うので。
コーディングするときのチェックポイント
HTML
初心者にありがちなのが、タグの閉じ忘れ等です。
コレを防ぐために、
必ず対になるタグは閉じてから、内側に書く
ということをお薦めしています。
先程の例を抜粋すると、次のような順番になります。
まず最初にタグを開きます。
<article>
次にタグを閉じます。
<article></article>
更にその内側にタグを開きます。
<article>
<section>
</article>
内側に開いたタグを閉じます。
<article>
<section>
</section>
</article>
こんな感じです。
CSSに応用
CSSで応用すると、
プロパティを書いたら、コロンとセミコロンを打ってしまって、セミコロンの前に指定内容を書く
という感じになります。
プログラミングに応用
同様にプログラムなどでの括弧なども
開いたら閉じて、中に書く
を徹底するといいと思います。括弧の閉じ忘れって、後々になって見つかって大変なことになるので気をつけましょう。時として完全なる500エラーとなって何が問題か探るのも大変なこともありますし…。特にWPのテーマをいじってるときなんか気をつけた方が良いですね。
そんな感じで基本的な骨組みを作ることが出来るところまでは出来たかと思います。どんなサイトもこの流れでコーディングすれば問題ないはずです！