HTML/CSS-4日目
こないだから使ってるBracketsですが、ライブプレビューに不良があるとき、
ファイルから直接開いて動作確認したほうがいいみたいです◎
どうせ今晩も昨日の残りのカレーやんと思うと、何もやる気がおきません。
じゃあ早速、今回の講義を復習します。
----------------------------------
画像配置応用編
二つ以上の画像を横並びに配置したいとき
ひとつの<p>のなかに<img>を数の分だけ置いてあげます。
<p><img...><img...></p>
こんな感じで。
結果はこちら。
<p>の中に配置する<img>タグは隙間や改行はなし(改行コードのせいで隙間が開きます)
なぜこうなるかというと、
<img>はインライン要素だから。
インライン要素は領域を持たないので、隙間なく敷き詰めて配置してくれます。
この性質を利用して画像を横並びに配置するんですね。
この出力画像でいうと、赤い枠線のカバーする範囲内が<p>タグの領域です。<img>はインライン要素なので、写真が表紙されているその範囲しか領域を持ちません。
また、ボタンにリンクを持たせたいとき、これもひとつの<p>タグの中に<img>と<a>を入れ込みます。
が、そのとき、さらに<a>の中に<img>を入れ込みます。マトリョシカ的考え。
ちなみに、細かい指定はCSSで行いますが、まだ授業はそこまで進んでないんで、
いまはHTMLにCSSをインライン記述してます(´；ω；｀)ﾌﾞﾜｯ
------------------------------------------------
ページ内リンクについて
ページ内リンクとは、
たとえば目次がリンクになっていて、クリックすると同じページ内のその項目に飛ぶ的名、そんな感じのやつです。
ここではリンクとそのリンク先に同じid名を持たせることで、その二つを関連付けします。
<a href="#sec1"></a>
↓
↓ジャンプ
↓
<section id="sec1>
ここで#はidと同じ意味を持ちます。
よって、二つのリンクが結び付けられるわけです。
idを指定するとき、id名は、
○必ず半角英数名で
○数字スタートはNG
この2つに気をつけて、かつ
出発点と到達点のid名が完全に一致するようにします。
----------------------------
<div>と<section>、<article>
<section><article>はHTML5からの新入りです。
<div>と<section>に関しては、2つとも似たような意味で、範囲を確保するという部分では変わりませんが、どう使い分けられるのか簡単に説明します。
<div>→ブロック要素として領域を確保する。セマンティック(意味を持たないタグ)なので、SEO対策の観点では不向きとされる。
<section>→同じくブロック要素として領域を確保する。こちらは章、節といった意味合いをもつタグなので、SEOの観点から検索に有利。
ちなみに、
<article>→ひとつの自己完結した記事として独立させる(という意味を持つ)
結局このあたりの使い分けは人によって曖昧らしいのですが、SEO対策として使い分けができると良いねっていってた。ばあちゃんが。
----------------------------------------------------
<nav>
「主要な」ナビゲーション
フローコンテンツのひとつで、
webサイト内共通で使われるグローバルナビゲーションと呼ばれるセクションなどに使われます。
基本的には中に<ul>が入る！
<h1>など見出しが入る例も多数あります。
--------------------------------------------------
表を作りたいとき
<table>タグを使うことで表を発生させることが可能です。
とりあえず、
コードを見たほうがわかりやすいかも。
<table>タグで基本となる表の一番外の枠組みを作り、
ネスト（入れ子）として
<tr>タグをはさむことで行を発生させます。
さらにその中で<td>を使うことでセルを作ります。
ブラウザで確認します。
いまいち仕組みがわかんなかったので、<tr>の中身をちょっと増やしてみました
予想では外枠の大きさは変えてないので、中のセルがめっちゃ小さくなってa,s,d分増えるパターンかなと。
むっちゃ雑やん。
でも外枠の大きさは死守してくれています。要するに、<td>が増えればその分、横にセルが増えるってことですね。え、なんとなくわかった。
これNG例なんですけど、
表と表の間を空けたいとき、<br>を使ってしまうと怒られます(誰かに)
<br>はインライン要素なので、<body>の中にそのまま投げ込むのはCSSがなかった時代の技法で。今はタブーだそう。2017年はCSSで指定してね。ハート。
-----------------------------------------------
では次、セルを連結してみます。
横方向に連結したいとき、<td>にcolspan属性を与えます。
正の値を与えることで、その数の分だけセルを連結します。
考え方としては、ほかのセルに比べて横方向にその数ぶん伸びるというのが正しいそう。
コードはこんな感じで
結果は以下。
もうなんか雑くね？ｗｗｗ
本当に伸びてるだけというのがよくわかりました。ぜんぜん連結ではないので、
コードから
<td>2</td>
の部分を抹消して（コメントアウトで殺して）あげるしかないようだ。
すっきりしました。
たて向き伸張のrowspanについても、同じ。
いい感じに雑に連結（伸ばして）くれます。
余分なセルは抹消（コメントで殺）してあげましょう。
では最後にこちら。
このコードの出力はどんな形の図になるでしょうか。
答えは↓
これで〜〜〜す（雑）
また明日〜〜〜〜
