この記事はこんな方におすすめです
- WEBデザインを始めたい方
- プログラミング（マークアップ）をはじめたい方
- WEBデザイナーに仕事を依頼する立場にある方
- ワードプレスをカスタマイズしたい方
こんにちはデザイナー/アートディレクターのnobuです。
当ブログは「専門学校級を無料で」をコンセプトにデザインに関する記事をまとめています。
今回は見やすいコードの書き方とコメントアウトについて解説します！
見やすいコードの書き方-HTML
ここで見やすいコードの書き方をご紹介します。
プログラミングやwebでは構造上、ファイル階層やコードなどが入れ子状態になります。HTMLも例に漏れずdivやulなど、入れ子状になります。
そこで、視覚的にコードを見やすくするために字下げ（インデント）を用いるのが一般的です。
半角スペース4つで階層が一つ下がっています。TABキーを使う人もいるのでお好みの方をお使い下さい。※TABキーの場合エディタによってずれてしまうことがあります。
見やすいコードの書き方-CSS
半角スペースや改行はスタイルに影響しないため、視覚的に見やすいようにテキストを整形しましょう。
プログラミングやマークアップでは半角スペースで指定の意味が変わったりすることもあります。セレクタの複数指定や子孫セレクタなどです。詳しくは後日解説します。
コメントアウト
コメントアウトとは、プログラムのソースコード上で「実行させない部分」のことです。コーディングをするときにブラウザに表示させたくない部分をコメントアウトします。
コメントアウトの役割は主に「保守性の向上」と「可読性の向上」と言われていますが、様々な場面で役立ちます。
HTML コメントアウト
＜!--ここに書いた文字がコメントアウトされる--＞CSS コメントアウト
/*ここに書いた文字がコメントアウトされる*/まとめ
面白いコメントアウトのリンクを貼っておきますね！
HTMLソースコードが凝っているWEBサイトまとめ | 株式会社スマートメディア｜仙台のホームページ制作・ECサイト制作会社
こんにちは、三浦です。 WEB制作している方は、オシャレだったり、凝っているサイトを見つけると そのソースコー
smart-media.co.jp
ソースコードで発見した奇妙なコメント集
コーダー・デベロッパー・プログラマーさん達はそのソースコードにわかりやすい説明書きを「コメント」として残し、後から他の人が修正・編集しやすいようにコードを書いていきます。Stackoverflowの中でなんだそりゃー！と
www.webcreatorbox.com
お疲れ様でした。HTMLとCSSの最初のステップはこれにて終了です。WEB制作としてはここからが本当のスタートラインです！
次回からは実際にHPを作りながら解説していきます！
