HTML/CSS-2日目
HTML/CSS 二日目の講義です。
先日より引き続き、基礎的なところから始まり、簡単なタグの使用例をいくつか。
------------------------------------------------------------------------------
まず開始してから先生の雑学が少々、、、
どうも街中の街頭ビジョンや電車の広告はしっかり見ておいて損はないそう。
目を引かれるデザインというものはそれだけで価値があるらしい。
でも、「なんとなく良いな」と思わせるのは天才の仕事で、
はじめは「写真がいい」「レイアウトがいい」「コピーがいい」とか、
言葉で説明できるような良さを出していく練習をこつこつしなさい、と。
それから何かをプレゼンするときや説明するとき、その言葉の一つ一つを美しくするために、普段から綺麗な言葉を選びなさい、とか。
素敵なことを教えてくれる先生です(*´﹃｀*)
さて、今回の授業。
HTML雑学と、簡単なタグの使い方と、ブロック要素、インライン要素についての講義でした。
復習れっつごー↑↑
----------------------------------------------------------------------------
まず雑学。
コードを書く皆さんならもう当たり前のことだとは思いますが、
HTMLの最小基本構文自体は基本はテンプレで存在するのでいちいち書くことのほうが少ないってこと。<!DOCTYPE html>とか、<html lang="ja">とか。<body>に入るまでの部分。
あ、あと、HTMLにおいて、なぜ”マークアップ”するか？ってことについて、
理由は二つ。
①ブラウザがマークアップされている言葉を解析し、ホームページとして表示する仕様だから
②タグによる意味づけがSEO対策上で有利になるから(このサイトは何をメインにしているか等)
ちゃんと意味があるんですね～(●´ڡ`●)
では実技。
プログラムを書く上で、基本的な書き方は
タグを置くとき、開始タグと同時に終了タグを書いてしまってから、中身を記述します。
<h1>
</h1>
先にこれを書いてから
<h1>
カワイイは、作れる。
</h1>
こうやって中身を入れます。
ちなみにカワイイは作れるとは思ってません。作ったものは壊れます。
どうでも良いけどいまめっちゃドーナツ食べたい。
で、ここからはタグの話。
今回習ったタグは以下箇条書き（ごめんなさい）
○改行に使用する<br>は連続して使わない。できればCSSで解決しよう。
○<ul>→箇条書き（マーカーリスト）
<ol>→連番リスト
→リストマーカーを消すコードもある。
○<dl><dt><dd>→説明リスト、用語、用語の説明に使用する。ECサイトによく使われます。
google「ECサイト作るならdl使ったほうが売れるよ！(｀・ω・´)」
○リスト等はブラウザで見える形と同じでインデントを重視してやるとよい！
○!!<dd>は<dt>のネストではない。⇦割とネストだと思ってる方、多いらしいです。
○<hr>延々とひたすら線引いてやるやつ
○<small>特殊文字を実体参照するためのタグ。インラインコンテンツなのでブロック要素で囲んであげて。特殊文字については以下をどうぞ。
○<div>→最近はあんまり使わない。<section><article>がHTML5から出てきたので、そっちがメインになってる。
○<section>⇨パーツや要素を囲うもの。このタグの中に<h1>が入れ子として必ず存在している必要がある。
○<article>⇨当該webサイト内でコンテンツとして独立しているものをくくりたい時に使用する。
○コメントアウトの多重化は不可。
こんな感じです。まあまあ1日に習う量じゃないというのがマジな感想。５分お手洗いに抜けたらもうついていけません。すげえ。
また、まさかのタイミングでついでのように
ブロックレベル要素とインライン要素についても教えてくれました。
こちらは図式でノートとったんですが、いまいちこれうpの仕方もわかんないんで、こちらも箇条書きで。
○ブロック要素は、
→<body>をたんすに見立てると、
<div>とか、<p>とか、そういうのです。
○インライン要素
→フレージング要素。
<span>とか、<em>とか。
○ブロック要素の中にほかのブロック要素、
○インライン要素として存在するタグ<em><strlng>
ブロック要素の中に放り込みましょう。
これらは文字が存在する領域のみカバーするので、
と、文字に起こすとこんな感じ。
プログラムにしてみると、出力結果は以下画像です。
上の方に書いたタグ云々の部分も反映されてます。（リストとか）
