web制作のしおり

日々の学習をアウトプットします。

84.復習しよう① ~HTML・CSS~

最近、前に進めてはいるのですが、消化不良な感じがしていました。

 

なので、この辺りで今までの学習を振り返っていきます。

 

「やりきること」は1つの「目標」ですが、「目的」はちゃんと使える力を身に着けて「稼ぐこと」なのでしっかりとやっていきます。

 

今回はHTMLとCSSについて。

ではさっそくやっていきましょう。

 

HTML

タグでテキスト(コンテンツ)を囲って書いていくマークアップ言語というものです。

ブラウザはこのHTMLを解釈して、ルールに基づいてWebページを表示してくれます。

 

このブログも右クリックで「ソースを表示」すれば、HTMLを見ることができます。

 

また、タグには様々な「属性」を指定して、情報を持たせることができます。

 

href、class、imgなどがよく使いますね。

 

また、タグで囲まれたコンテンツのまとまりを要素と言い基本的に要素単位で記述していきます。

 

要素には入れ子やブロック要素、インライン要素などの性質があり、

それらを把握することで思い通りのWebデザインへの一歩近づきます。

 

まとめると

HTMLはタグでテキストを囲う形を1つの単位として書き、それを要素という。

要素には様々な性質があり、入れ子にしたり、属性を付加することでWebページの骨組みを作っていく。

こんなところです。

 

ただ、HTMLは本当にキッチリ理解に徹する方が後々の為になります。

Webページのベースの知識なので、構造の理解はしっかりしておきたいですね。

 

CSS

CSSは基本単体では使いません。

HTMLと組み合わせてWebページのデザイン部分の記述をするテキストファイルです。

その書き方はHTMLのタグや、属性等のデザインを適用する範囲を指定して、

隙間、文字サイズ、色、背景画像などを適用できます。

 

ここでも基本となるHTMLの「要素」について理解をしておくことが大切です。

入れ子や、クラス、インライン、ブロックラインなどがわかっていないと

デザインの適用がうまくいかないことが多々あります。

 

また、デザインの適用がうまくいかなかったり、あまり考えずにデザインを適用していくと、保守性(メンテナンスのしやすさ)がガタ落ちします。

こうした事を防ぐために、CSS設計という考え方があり、

私はBEMを学びました。

 

可能であればCSS設計に触れることをオススメします。

根拠を持ってHTML(CSSを適用させる部分)を書くことができるようになります。

 

 

今日のまとめ

  • HTMLがすべての基礎。本当に大事。構造、性質は特に理解しておきたい。
  • CSSは見た目が反映されるのでわかりやすい。
  • CSSはコードが散らかりやすいので、CSS設計を学ぶと良い。

 

今日は基本中の基本について復習しました。

最初のころに比べて、意識することが変わったように思います。

少しは成長しているかな。

 

では、また。