CSSの基本
勉強の新着状況です。
現在HTMLの基本とCSSの基本というところまでが終わりました。
以下やっていてなかなか感触をつかめなかったものです。
・ HTMLの基本構造
<!DOCTYPE html>・・・doctype宣言
<html lang="ja">・・・html文書であることを示す。言語が日本語のサイトであることを示す
<head>・・・ページの設定情報を記述する
<meta charset="uft-8">・・・html文書に関する情報を示す。文字コードがuft-8
<title>ページのタイトル</title>・・・ブラウザのツールバーに表示されるタイトル
</head>
<body>・・・ページのコンテンツ
コンテンツ
</body>
</html>
・ページの構造がわかるようにタグをつける。
article・・・内容が単体で完結するセクション。ブログの1つのエントリー、新聞や雑誌の記事の1つ。
aside・・・前後の内容と関連はあるが、本筋からは外れる内容を表すセクション。補足情報や広告など。
nav・・・サイトの主要なナビゲーションを表すセクション。
section・・・上記のどれにも当てはまらないセクション。
・表の基本構造
<table>
<caption> </caption>
<tr> </tr>・・・見出し項目
<td> </td>・・・データ項目
<tr> </tr>・・・見出し項目
<td> </td>・・・データ項目
<tr> </tr>・・・見出し項目
<td> </td>・・・データ項目
</table>
・CSSファイルの作成と読み込み
htmlに読み込む時は<head>タグの中に
<link rel="stylesheet" href=".../ファイルの入ってる大フォルダ/中フォルダ/ファイル名”>
と記入する。
・HTMLに クラスをつける
<h1 class="〇〇">
のようにクラスをつけるとそのクラス個別でデザインを適用することができる。
なお、他のタグにもつけることができるため同じフォントサイズにしたい場合などにつけておくと一括管理できる。
また、同じような属性で「id」というのもある。
同じidを2個つけることできないため、ページに一つしか存在しない項目に使うと効果的。
・余白を調整するプロパティ
padding: 〇px; ・・・内側に余白を作る
margin: 〇px; ・・・外側に余白を作る
また、マージンには「隣り合う上下の、マージンは相殺される」という特徴がある。
少し苦戦しながらもなんとかＨＴＭＬとＣＳＳの基本を終えました。
そこで先生にファイルを送りレビューをしていただきました。
以下指摘されたことです。
・タグを閉じられていない箇所が1箇所あった
・インデントは半角スペースを使わずタブを使うこと
タグの閉じ忘れには注意していたはずだったがコードを書いているとごちゃごちゃしてわからなくなってしまいました。
また、そういうことを防ぐためにインデントを綺麗に整理することが大切であるとのこと。
上記のようなことに注意しながら、現在は画像の挿入と共通部分の作成とレイアウトに取り組んでおります。
