サラの状態からサイトを作る場合は、WordPressをおすすめするわけですが、
この度、講師業のほうで、
—
会社のサイトがあります。
＜※それはWordPressで作られてはいない。＞
そのサイトの軽微な更新修正ができるようになりたい。
—
というレッスン要件を承りました。
この場合はHTMLタグを学習するしかないなぁと、
改めてHTMLタグの存在をリマインドしたので、
・・・WordPressの場合だと、こだわらなければ、一度もHTMLタグを打たずにサイトを作ることもできるので・・・
HTMLタグの基本の一部について、記事を起こしてみました。
リンクを付けるタグは<a href=”●”>
ブログの管理画面やfacebookの投稿画面だと、（＝ビジュアルエディター）
http://www.yahoo.co.jp/
と貼り付ければ、
公開された画面でリンクがかかっていますが、
HTMLファイルの記述では、そうはいきません。
文字にリンクを付ける場合は、その文字を<a href=”●”></a>で囲みます。
<a href=”http://www.yahoo.co.jp/”>http://www.yahoo.co.jp/</a>
↓
http://www.yahoo.co.jp/
上のリンクをクリックしていただくと、
このページを見ている（ブラウザの）タブ、そのタブの表示がヤフーに切り替わります。
ここでaタグのステップアップ。
このページを見ているタブは残ったままで、新しいタブでヤフーを開かせたい場合は、
<a href=”●” target=”_blank”>を用います。
<a href=”http://www.yahoo.co.jp/” target=”_blank”>http://www.yahoo.co.jp/</a>
↓
http://www.yahoo.co.jp/
見た目はひとつ前と変わりませんが、クリックしてみてください、
新しいタブで開きます。
ここで話は戻って、
上述のようにレクチャーすると、URLの文字列（http://www.yahoo.co.jp/）にしかリンクは付けられないのですか？、と質問されることが…。
そんなことはないです、大丈夫です。
どんな文字列でもaタグでリンクを付けられます。
<a href=”http://www.yahoo.co.jp/” target=”_blank”>ヤフーが別タブで開きます</a>
↓
ヤフーが別タブで開きます
このように。
余白の調整には、改行タグの<br>
改行タグは<br>です。
あいうえお<br>
<br>
かきくけこ
↓
あいうえお (←改行が入る)
(←改行が入る)
かきくけこ
さて、HTMLタグやCSSの学習を進めていくと、
ページデザイン的な余白の記述に、marginやpaddingが登場するわけですが、記述が面倒ですので、
<br>タグで調整するのが一番カンタンです。
あいうえお<br>
<br>
<br>
<br>
かきくけこ
↓
あいうえお (←改行が入る)
(←<br>1つで)
(←1行の改行が入るので)
(←改行で余白を調整できます)
かきくけこ
このように、<br>の数で調整できます。
画像へのテキストの回り込み解除には<br clear=”both”>
<br>タグに関連して、よく質問を受けるのが・・・
—
あいうえお
回り込みを解除して、画像の下からテキストを始めたい
—
↑このやり方についてです。
—
<imgに関して左寄せの記述>
あいうえお<br>
回り込みを解除して、画像の下からテキストを始めたい
—
このように記述しても
↓
—
あいうえお
回り込みを解除して、画像の下からテキストを始めたい
—
こうなってしまいます。
そこで、画像の天地幅を超える分だけ<br>を入れればよいだろうということで、
—
<imgに関して左寄せの記述>
あいうえお<br>
<br>
<br>
<br>
回り込みを解除して、画像の下からテキストを始めたい
—
このように<br>を無数に入れれば、
↓
—
あいうえお
回り込みを解除して、画像の下からテキストを始めたい
—
たしかに再現はできますが、
スマートなやり方ではありません。
この場合に使うのが、<br clear=”both”>です。
—
<imgに関して左寄せの記述>
あいうえお<br clear=”both”>
回り込みを解除して、画像の下からテキストを始めたい
—
<br clear=”both”>は、
画像（<img>タグ）に横にテキストを回り込ませる指定をした際に、
その回り込みをこの行で解除する、という指定になるので、
↓
これを使って記述するのが正解になります。
—
あいうえお
回り込みを解除して、画像の下からテキストを始めたい
—