Hakrラボ

科学、ITの中でプログラム、Wordpressテーマやプラグイン用途、関連の制作記事、興味のあるテーマに対しての記事、他様々ITと科学のコラボから更なる新しいアイディア等を書き留めています。実際に使えるものから、応用が効きそうな物まで幅広く書いているので、参考に成れば幸いです。

HtmlやCSSをカスタマイズしやすくする初心者の為のワンポイントテク

time 2016/09/03

HtmlやCSSをカスタマイズしやすくする初心者の為のワンポイントテク
コードの基本・コメント機能

htmlcode
皆さんはHTMLやCSSを書くときにただただコードをズラッと書いていませんか?例えばこんな具合に

スポンサードリンク

分かりずらいですね

僕から見るとかなり整理されてて分かり易いですが、初心者の方には何が何をしているのかあまり分からないと思います。
ですが、これではやっぱりコードが見づらいことがかなり多い上、どこに何が有るかと言うのが中級者程にならないと全く分からないと思います。HTMLに文章を追加する際にそれでは困ります。
それはHtmlにもCSSにもPHP,Javascript何かにも同じように言えることです。

さて、そんな時に役に立つのが、コメント機能です。

コメント機能と言うのはHtml内、CSS内にブラウザ上では表示されない管理者サイドにコードを解り易く書くための物で、

Htmlに関してはコードが

CSSに関しては

と言った書き方をします。

こうすることで、どこに何が有って、何と関連しているのか と言う事が明確になったのではないでしょうか?
これは簡単な例ですので、あまり分からないと思いますが、こういった文章が10000字超にも上るWeb開発に置いて、こう言った細かい配慮が後々自分を助けてくれる物に成ってきます。

ちなみに見たい部分を探すのもこう言ったことをしている事が有利に働きます。

CtrlキーとFを押してみてください、Ctrl+Fは文字を検索してくれる機能を持っています。このキーを押したときに右上に表示される入力欄に記入し、Enterを押す事で、見たい文字を検索する事がかなり簡単に成って行きます。

まとめ

今回紹介したコードはWeb開発に置いてかなり基本で重要なコードになって来ますので、書いたHtmlにはこのコメントコードを出来るだけ記入する事を心掛けてください。

sponsored link

down

コメントする





*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ソーシャル関連

パソコン

プログラム

個人的なブログ倉庫



sponsored link

Do NOT follow this link or you will be banned from the site!