[WEB系もやってみよう] HTMLで文章を書く

HTMLの基本を抑える

HTMLは骨組み

前回は、HTMLから始めようってことでHTMLの基本中の基本をやって行きました。よくホームページを作る際に学ぶことにHTMLとCSSを使うと言われますが、それって一体なんなんでしょうか。簡単に行ってしまえばこんな感じです。

HTML(HyperText Markup Language)
WEBサイトの骨組み
CSS(Cascading Style Sheets)
WEBサイトの装飾、デザイン

今回からやる基本中の基本を見ればわかると思いますが、このHTMLだけで今巷に溢れているかっちょいいWEBサイトを作るのは困難です。あくまでもHTMLは骨格を作るだけのものなんですね。そういう意味ではHTMLを勉強していくのは退屈な面もありますが、覚えるのは簡単です。

とりあえずHTMLがなんなのか、CSSがなんなのかなんて気にしないでやることをオススメします。

前回の記事

[WEB系もやってみよう] WEBを支える技術

2017.04.05
本Blogの内容を試して、トラブルや故障の原因になったとしても責任は負えません。そんな危ないことはしていませんが、自己責任でお願いしますね。

スポンサーリンク



簡単なところから始める

head要素は置いておく

まだ<head>〜</head>部分については、詳しくやりません。必要になったらその時にでも。

にゃんこ
なんでだ?
メリ
めんどくさいんじゃない!?

段落を作りまっせ [Pタグ]

ここからはHTMLの骨組みを形成する<body>〜</body>内の記述を見ていきます。

まずは前回も少し出てきたPタグです。ちなみにタグとは、<>で囲むことを言います。 開始タグ(<>)と終了タグ(</>)があり、終了タグがないものもあります。Pタグは開始と終了タグを使うので<p>〜</p>と記述します。〜の部分が実際にPタグの効果が及ぶ部分です。ここで小文字で書くか大文字で書くか迷いますが特に決まりはないようです。でも通常小文字で書くみたいですけどね。

このPタグはパラグラフのPと言う意味です。

paragraph: 文章の段落。節。

これは簡単ですね。そのままの意味で文章に段落を入れたい時に使います。使い方は以下のように使います。

表示もこのように段落っぽく行間を開けて表示してくれます。

段落としてくれる

段落としてくれる

改行を入れたいんだけど

文章はWEBサイトではブラウザのWindowの大きさに合わせて勝手に改行されたりしますね。でもデザイン上どうしても意図した場所で改行したい時が出てきます。でも、以下のように1回目の「これはサンプルです」の後にエディタ上でリターンキーを押下して改行を入れても意図した表示になりません…。

改行されない!

改行されない!

HTMLでは意図的に改行を入れたければ、<br>タグを使います。brタグは、開始タグのみで記述可能なので</br>は書く必要がありません。これは改行の意味を考えれば理解できると思います。Pタグのように段落にしたい文章を囲んで示す必要がなく、改行のポイントさえ分かれば良いわけですからね。単独で良いってわけですよ。

ちなみにbrはBreakの略ですね。
HTML5より前のバージョンでは終了タグを持たないタグは<○○/>としていました。brタグだったら<br/>

ってことでこう書きます。

ほらできた

ほらできた



段落もbrタグ使えばいいじゃんって言う問題

表示が思惑通りならいいじゃないか

ここで誰もが思うはずです。brタグを使えば段落だって表現できるでしょーって…以下のようにbrタグを連続で書くと改行が2個挿入されて段落っぽく見えるでしょうって話です。

これだってできるでしょうってね

これだってできるでしょうってね

確かにできます。これだって表示上は問題ないです。これはダメですってことも聞かないし、いいんでしょうけど、正直あまりエレガントな書き方ではないですね。って個人的には思います。どうしても意図した部分で改行してほしい場合に仕方なく使うというくらいです。これも個人的な意見です。ま、段落なら段落と分かるように明示しておくのが一番いい書き方だと思います。

にゃんこ
どっちでもいいじゃん!?
メリ
気にしなければね

今回は、Pタグとbrタグについてやりました。

前回の記事

[WEB系もやってみよう] WEBを支える技術

2017.04.05

コメントを残す

メールアドレスが公開されることはありません。