Posted by & filed under ブログ運営.

 

サラの状態からサイトを作る場合は、WordPressをおすすめするわけですが、
この度、講師業のほうで、

会社のサイトがあります。
<※それはWordPressで作られてはいない。>
そのサイトの軽微な更新修正ができるようになりたい。

というレッスン要件を承りました。

この場合はHTMLタグを学習するしかないなぁと、
改めてHTMLタグの存在をリマインドしたので、
・・・WordPressの場合だと、こだわらなければ、一度もHTMLタグを打たずにサイトを作ることもできるので・・・
HTMLタグの基本の一部について、記事を起こしてみました。

PAK86_codeing20140517500

リンクを付けるタグは<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>タグに関連して、よく質問を受けるのが・・・

mawariあいうえお

回り込みを解除して、画像の下からテキストを始めたい

↑このやり方についてです。


<imgに関して左寄せの記述>
あいうえお<br>
回り込みを解除して、画像の下からテキストを始めたい

このように記述しても


mawariあいうえお
回り込みを解除して、画像の下からテキストを始めたい


こうなってしまいます。

そこで、画像の天地幅を超える分だけ<br>を入れればよいだろうということで、

<imgに関して左寄せの記述>
あいうえお<br>
<br>
<br>
<br>
回り込みを解除して、画像の下からテキストを始めたい

このように<br>を無数に入れれば、


mawariあいうえお

回り込みを解除して、画像の下からテキストを始めたい


たしかに再現はできますが、
スマートなやり方ではありません。

この場合に使うのが、<br clear=”both”>です。


<imgに関して左寄せの記述>
あいうえお<br clear=”both”>
回り込みを解除して、画像の下からテキストを始めたい

<br clear=”both”>は、
画像(<img>タグ)に横にテキストを回り込ませる指定をした際に、
その回り込みをこの行で解除する、という指定になるので、

これを使って記述するのが正解になります。

mawariあいうえお

回り込みを解除して、画像の下からテキストを始めたい

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です