【-見やすいコードの書き方編-】1日15分で覚えるWEBデザイン-第4回

webデザイン

この記事はこんな方におすすめです

  • WEBデザインを始めたい方
  • プログラミング(マークアップ)をはじめたい方
  • WEBデザイナーに仕事を依頼する立場にある方
  • ワードプレスをカスタマイズしたい方

こんにちはデザイナー/アートディレクターのnobuです。

当ブログは「専門学校級を無料で」をコンセプトにデザインに関する記事をまとめています。

今回は見やすいコードの書き方とコメントアウトについて解説します!

見やすいコードの書き方-HTML

ここで見やすいコードの書き方をご紹介します。

プログラミングやwebでは構造上、ファイル階層やコードなどが入れ子状態になります。HTMLも例に漏れずdivやulなど、入れ子状になります。

そこで、視覚的にコードを見やすくするために字下げ(インデント)を用いるのが一般的です。

半角スペース4つで階層が一つ下がっています。TABキーを使う人もいるのでお好みの方をお使い下さい。※TABキーの場合エディタによってずれてしまうことがあります。

見やすいコードの書き方-CSS

半角スペースや改行はスタイルに影響しないため、視覚的に見やすいようにテキストを整形しましょう。

プログラミングやマークアップでは半角スペースで指定の意味が変わったりすることもあります。セレクタの複数指定や子孫セレクタなどです。詳しくは後日解説します。

コメントアウト

コメントアウトとは、プログラムのソースコード上で実行させない部分」のことです。コーディングをするときにブラウザに表示させたくない部分をコメントアウトします。

コメントアウトの役割は主に「保守性の向上」と「可読性の向上」と言われていますが、様々な場面で役立ちます。

HTML コメントアウト

<!--ここに書いた文字がコメントアウトされる-->

CSS コメントアウト

/*ここに書いた文字がコメントアウトされる*/

まとめ

面白いコメントアウトのリンクを貼っておきますね!

HTMLソースコードが凝っているWEBサイトまとめ | 株式会社スマートメディア|仙台のホームページ制作・ECサイト制作会社
こんにちは、三浦です。 WEB制作している方は、オシャレだったり、凝っているサイトを見つけると そのソースコー
ソースコードで発見した奇妙なコメント集
コーダー・デベロッパー・プログラマーさん達はそのソースコードにわかりやすい説明書きを「コメント」として残し、後から他の人が修正・編集しやすいようにコードを書いていきます。Stackoverflowの中でなんだそりゃー!と

お疲れ様でした。HTMLとCSSの最初のステップはこれにて終了です。WEB制作としてはここからが本当のスタートラインです!

次回からは実際にHPを作りながら解説していきます!

この記事を書いた人
nobu

株式会社キャップ所属 デザイナー/アートディレクター。デザイン歴10年 大手小売業のインハウスデザイナーを経てフリーランスとして独立。世界初炭酸氷のロゴデザインなどを行う。様々な出会いと別れを経て、現在は株式会社キャップ メディアソリューション室にてデザイナー/アートディレクターとして奮闘中。同社webマーケティング責任者です。 公式サイトHPリニューアルにてPV数500%UPを達成。illustACにてイラストを提供中です!DLランキング上位1%に入ることができました!

nobuをフォローする
webデザイン
シェアする
nobu no blog
タイトルとURLをコピーしました