これだけは知っていて欲しいHTMLとCSSの基礎知識

author photo

Byinfobloger

HTMLとCSSの基礎知識

このブログではHTMLをコピペするだけでサンプルと同じ様な表現が出来るようにカスタマイズしています。

ただ少しだけHTMLの知識も必要です。

え~難しそう。
そんな事はありません。

本当に少しだけの知識で充分ですので最後まで読んでいただければと思います。

スポンサーリンク

閉じタグの忘れはデザインの崩壊に

HTMLの基本形、開始タグと閉じタグ、閉じタグ忘れの例

画像をみていただければ分かると思いますが、HTMLの場合は開始タグと閉じタグがセットになっています。

閉じタグの忘れ
表示が崩れたら閉じタグを忘れていないか確認してください。
不完全なコピペ
コピーするときには必ず全てのコードをコピーしてください。
コメントアウトの消し忘れ
HTMLにはコメントアウト、言葉通りコメントを記入するタグがあります。

コメントアウトに関しては重要な部分なので、もう少し詳しく説明します。

意外に見落としがちなコメントアウトの消し忘れ

最初に画像の例について説明していきます。

コメントアウトとは?
  1. コメントアウトと言って表示はされません
  2. コメントアウトの一部が消し忘れている
  3. コメントアウト消す時に他の部分も消してしまう

コピペする時は必ず例にあげた点を注意するようにしてください。

絶対に忘れてはいけないタグはこれ

画像で説明しているように「div」タグの閉じ忘れや、余計なに「div」タグを書いてしまった場合は表示がグチャグチャになってしまいます。

HTMLタグの中でも一番気をつけなければいけません。

表示が崩れた場合は慌てずに「div」タグの閉じ忘れはないか、あるいは余計な「div」タグが入っていないか確認してください。

テンプレートをカスタマイズする時の注意点

このテンプレートは紹介しているHTMLをコピペするだけで、色々なパーツを簡単に使用することができます。

基本的にはCSSに何かを書き加える必要はありません。

どうしてもカスタマイズしたい時は迷わずチャレンジしてください。

重要な部分にはコメントを書いていますので、文字サイズや色を変えたい時は参考にしてください。

ただカスタマイズをする時は、HTMLとCSSの勉強をしてからにした方が無難でしょう。

まとめ

最後に

CSSをカスタマイズをしたい。
そんな時は迷わずチャレンジしても構いません。

ただ注意点が一つだけあります。
配布された元ファイルではなく、コピーしたファイルを使うようにしてください。

元ファイルがあれば失敗した時に以前の状態に簡単に戻すことができます。

習うより慣れろ。
やりたいと思ったら失敗を恐れずに実行してみる事も勉強です。

カスタマイズして素敵なテンプレートを作ってみましょう。

ただしHTMLとCSSの勉強はお忘れなく!

関連記事
Share

Comments 0

Leave a reply