こんにちは。
今回の記事ネタはHTML。HTMLっていうのはWEBページ上の文書の構造を書いたものでページの元になっているもの。ブラウザにchromeを使っている人ならページの上で右クリック→ページのソースを表示と選ぶと表示されるやつです。はてなブログで記事を書くときはHTML編集という項目から編集ができますね。それからブラウザゲームもHTMLだったりします。
今回このHTMLを編集することでブログの文章を2列にしてみます。
※一応の注意書き。HTML・CSSはプログラミングではありませんがJavaScriptに関係するので当サイトでのカテゴリーはプログラミングに分類しています。
ブログサイトによってはHTML編集をしなくても複数列にする機能を備えている場合もあるかと思いますがHTML編集ができないブログサイトっていうのはたぶん無いだろうと思います。
なのでこれははてなブログに限らずいろんなWEBページ制作で使えるってわけです。
おそらく基本的なことだと思うので調べたらいくらでも情報は出てくるかと思いますが自分用のメモとしてここにも書いておきます。
結論から言うとテーブルってやつを使います。HTMLは表をつくることができるのでそれを使って構造を分割することで2列にしてやろうという訳です。
<table>とか<tr>とか<td>ってやつを使います。テンプレートとして完成形を↓
<table style="border: none; width: 100%;">
<tr style="border: none;">
<td style="border: none; width: 40%;">
<p>ここが左側になる</p>
</td>
<td style="border: none; width: 60%;">
<p>ここが右側になる</p>
</td>
</tr>
</table>
<table></table>のセット中に<tr></tr>のセットがあってその中に<td></td>が２セットあるのがわかります。trは増やすことで行を追加できますが今回は行は1つでよいのでtrのセットは１つ。tdは増やすことで列を追加できるのでこれを2つにしているのです。
各属性に style=”border:none;”と書いているのはこれによって枠線を消せるのです。tdのところでは style="width:%"と書いて横幅の割合を指定できます。
上の例をそのまま使用してみるとこうなります(文章を少し追加)↓
|
ここが左側です。横幅を40%にしています。もちろん画像を貼ることもできます。 |
ここが右側になります。横幅を60％にしています。画像の横に説明文を書きたい場合などにテーブルが使えます。 |
ちなみにstyle=”border:none;”を書かなかった場合↓
|
ここが左側です。横幅を40%にしています。もちろん画像を貼ることもできます。 |
ここが右側になります。横幅を60％にしています。画像の横に説明文を書きたい場合などにテーブルが使えます。 |
前回の記事でも使っていたのですが これだけでもある程度自由なページのレイアウトができるようになりますよね(∩´∀｀)∩
今回は以上です。ありがとうございました。
このラフはボツ案です(。-`ω-) ちょっと変えて描く予定です…。
