簡単HTML:レイアウトを変える・リンクをつける [ブログのための簡単HTML]
ブログを書くとき、ちょっとしたHTMLタグを知っているととっても便利。
そんな皆さまからの声にお答えして、3回に分けて「ブログのための簡単HTML講座」
を連載しております。
HTMLタグは実はとっても簡単。ちょっとだけ知っていれば簡単なレイアウトは
すぐにできます。他にもHTMLタグを使えば、文字の色を変えたり、リンクを張ったり
することもできます。
2回目の今回は、レイアウトを変える方法やリンクをつける方法をお教えします。
|
|
中央に表示する |
文字や画像を記事の中央に表示するには、<center>というタグを使います。
■中央に表示したい場合
<center>中央に表示したい文字・画像のタグ</center>
<center>中央に表示したい文字・画像のタグ</center>
【記述例 1】
<center>まんなかに表示</center>
まんなかに表示
<center>まんなかに表示</center>
【記述例 2】
<center>
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</center>

<center>
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</center>
|
|
左寄せ・右寄せに表示する |
文字や画像を左寄せ・右寄せで表示するには、<div align>というタグを使います。 タグの中で位置をを指定することにより、左寄せや右寄せになります。
■左寄せで表示したい場合
<div align="left">左寄せで表示したい文字・画像のタグ</div>
■右寄せで表示したい場合
<div align="right">左寄せで表示したい文字・画像のタグ</div>
また、このタグを使って中央に表示することもできます。
■中央に表示したい場合
<div align="center">中央に表示したい文字・画像のタグ</div>
<div align="left">左寄せで表示したい文字・画像のタグ</div>
■右寄せで表示したい場合
<div align="right">左寄せで表示したい文字・画像のタグ</div>
また、このタグを使って中央に表示することもできます。
■中央に表示したい場合
<div align="center">中央に表示したい文字・画像のタグ</div>
【記述例1: 左寄せ】
<div align="left">
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</div>
<div align="left">
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</div>
【記述例2: 中央】
<div align="center">
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</div>

<div align="center">
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</div>
【記述例3: 右寄せ】
<div align="right">
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</div>

<div align="right">
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</div>
|
|
リンクをつける |
文字や画像にリンクをつけるには、<a href>というタグを使います。 この時、aとhrefの間には半角スペースを入れて記述します。
■リンクをつける場合
<a href="リンク先のURL">リンクをつけたい文 字や画像</a>
<a href="リンク先のURL">リンクをつけたい文 字や画像</a>
【記述例2: リンク先を新しいウインドウで開く】
<a href="http://blog.so-net.ne.jp/" target="_blank">
So-net blogを新しいウィンドウで開く </a>
↓
So-net blogを新しいウィンドウで開く
<a href="http://blog.so-net.ne.jp/" target="_blank">
So-net blogを新しいウィンドウで開く </a>
↓
So-net blogを新しいウィンドウで開く
【記述例3: リンクにマウスのカーソルをあてると説明をだす】
<a href="http://blog.so-net.ne.jp/" title="So-net blogのトップページです">
So-net blog</a>
↓
So-net blog
<a href="http://blog.so-net.ne.jp/" title="So-net blogのトップページです">
So-net blog</a>
↓
So-net blog
次回は「中央に表示する」「リンクをつける」「リストをつける」を予定しています。 お楽しみに(^o^)丿
2007-02-01 17:09
nice!(20)
コメント(4)
トラックバック(1)
ブログを書くとき、ちょっとしたHTMLタグを知っているととっても便利。
そんな皆さまからの声にお答えして、3回に分けて「ブログのための簡単HTML講座」
を連載しております。
HTMLタグは実はとっても簡単。ちょっとだけ知っていれば簡単なレイアウトは
すぐにできます。他にもHTMLタグを使えば、文字の色を変えたり、リンクを張ったり
することもできます。
2回目の今回は、レイアウトを変える方法やリンクをつける方法をお教えします。
中央に表示する
左寄せ・右寄せに表示する
リンクをつける
中央に表示する
文字や画像を記事の中央に表示するには、<center>というタグを使います。
■中央に表示したい場合
<center>中央に表示したい文字・画像のタグ</center>
【記述例 1】
<center>まんなかに表示</center>
まんなかに表示
【記述例 2】
<center>
<img src="/blog/_images/blog/_95c/blog-class/6327969.png">
</center>
左寄せ・右寄せに表示する
文字や画像を左寄せ・右寄せで表示するには、<div align>というタグを使います。
タグの中で位置をを指定することにより、左寄せや右寄せになります。
■左寄せで表示したい場合
<div align="left">左寄せで表示したい文字・画像のタグ</div>
■右寄せで表示したい場合
<div align="right">左寄せで表示したい文字・画像のタグ</div
トラックバック 1
めんどくさいタグの簡単な打ち方 (海の研究者 2/3 13:58)
ソネブロのブログ教室で「ブログのための簡単タグ」が紹介されていますね。 ただこのタグ、覚えるのはめんどくさいし、だいいち打ち込むのがめんどくさい。 そこで私が愛用している”簡単にタグを打つ方法”をお教えしましょう。 「単語登録」を利用するのです。コツは「セミコロン」です。 -...[続く]
ソネブロのブログ教室で「ブログのための簡単タグ」が紹介されていますね。 ただこのタグ、覚えるのはめんどくさいし、だいいち打ち込むのがめんどくさい。 そこで私が愛用している”簡単にタグを打つ方法”をお教えしましょう。 「単語登録」を利用するのです。コツは「セミコロン」です。 -...[続く]
この記事のトラックバックURL:
http://blog.so-net.ne.jp/blog-class/2007-02-01-1/trackback
コメント 4