【連載】ウェブサイト作りませんか?②

最終更新: 2019年6月23日

#小室 #施設整備 #パソコン #社内発信 #ウェブ #プログラミング

前回からちょっと間が空いてしまいましたが、前回はこんな内容でしたね。

【連載】ウェブサイト作りませんか?


■タグの特性を覚えておきましょう

今回はタグについてお話していきますがタグには特性があります。

その特性は大きく分けて2つ

  • ブロックレベル ・・・ 文字が何文字だろうとサイズが画面の横幅いっぱいに伸びます。必ず前後に改行が入ります。指定する事でサイズは変わりますが実は見えない改行が入ってます。

  • インラインレベル ・・・ 文字数分しか横幅が確保されません。前後に改行は入りません。サイズの指定は出来ません。


■具体的に

具体的にどのようなものか見てみましょう。

HTMLにこのように書いてみました。

これをブラウザで見てみましょう。

この様になりました。しかし、これではわかりづらいのでこれらがどうなっているのかを見てみましょう。

これはブラウザの機能を使ってそれぞれの要素を見てみた状態なのですが、

ブロックレベルの方が横幅いっぱい伸びていてインラインレベルの方が文字数分しか横幅が無いのがわかります。


■主要なタグを覚えましょう

特性がわかった所で最も使われているであろうタグを紹介しましょう。

  • div ・・・ ディブと読みます。ブロックレベルです。

  • span ・・・ スパンと読みます。インラインレベルです。

はい、これだけです。他にもたくさんありますがこの2つだけ覚えればひとまず何とかなります。

役職者の方は麗都WEBやP-Worldの編集ページで見たことがあるのではないでしょうか?


■わかりやすい例を作ってみましょう

ではdivとspanがどのように作用するのかが理解しやすい例を作ってみましょう。

全て改行しつつdivとspanを使って文章を書いてみました。

これをブラウザで見てみましょう。

なんということでしょう!

改行したはずの

<span>本社施設整備部</span>

<span>商品チーム主任</span>

が改行されていないじゃありませんか!

良く見ると「本社施設整備課」と「商品チーム主任」の間に若干のスペースが空いています。

HTMLでは改行は改行ではなく「改行の意味を持つ見えない文字」なのです。

つまり、このスペースは改行分のスペースなのです。


では、なぜdivとはspanを使わなければいけないのでしょうか?


それは・・・

次回やっていきましょう!




TEL:029-863-1811

  • Instagram

©Copyright 2015 REITO,all right reserved.