スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
RSSフィード twitter Google Bookmarks スポンサーサイトをはてなブックマークに登録 はてなブックマーク
タグ /

ブログ運営で、知ってて損しないHTMLタグ集 前編

今更感たっぷりではありますが、「A HAPPY NEW YEAR!」

2010年初更新です。今年もどうぞよろしくお願いします。

新年とは全く関係の無いネタですが、ブログの運営上、これだけは知識として納めておきたい最低限のタグのお話です。一応、前編です。

A HAPPY NEW YEAR

文字装飾

文字を太字にしたり、赤字にしたり、文字の背景を黄色にしたりすると、文脈の強弱も付けやすくなります。

HTMLタグはどうなっているのかというと、

<b>太字</b> <font color="#ff0000">赤字</font> <font style="background-color:#ffff00">背景黄色</font>

となります。

この「#ffff00」とか 「#ffff00」は色を指しています。背景色や文字色はこの“カラーコード”を変更することで設定出来ます。

・カラーコード一覧表

http://www.finitojapan.com/cltable.html

ちなみに、フォントサイズを変更するには、

<font style="font-size:13px">文字</font>

と指定します。13pxのところを変更してサイズを調整します。

引用

主に他媒体から文章を引用する時に使うのが、この引用タグ。

引用というのは、こういう↓枠のことです。

ここが引用部分

こうすることで、通常の文章との見分けを付けやすくすることが出来ます。

ちなみにタグはどうなっているのかというと、

<blockquote>引用</blockquote>

これもblockquoteで囲うだけです。

小見出しを付ける

↑こういう小見出しを付ける方法です。

このブログでは見出しタグ(h3)を使っています。

まず、スタイルシートに以下の記述を加えます。

#contents h3 {

margin: 65px 15px 10px 0px;

padding: 5px 10px;

border-bottom: 1px dashed #4ab0f5;

border-left: 5px solid #4ab0f5;

color: #4ab0f5;

font: bold 1.0em 'arial', sans-serif;

text-align: left;

}

次に、挿入したい部分に以下のタグを入れますと、上記のような小見出しを付けることが出来ます。

<h3 class="contents h3">小見出し</font>

とします。ただし、これだけでは単なる強調見出しとしか捉えられず、たいていは文字が大きくなるだけで終わります。

細かい設定は先程付け加えたスタイルシート内で変更できます。

下線の色や線種は「border-bottom」

文字の左側の部分は「border-left」

文字色は「color」

で変更してください。

画像の回り込み

画像左回り

文章の左側に画像を回り込みさせてみました。


画像の回り込みを行うには、スタイルシートにあらかじめ下記の内容を追加しておきます。

.floatleft{

float: left;

margin-right: 1em;

}

.floatright{

float: right;

margin-left: 1em;

}

.floatclear{

clear: both;

}

HTMLはこのように記述しています。

<p><img src="http://blog-imgs-35-origin.fc2.com/t/o/s/toshiiy/iphone.gif" width="160" height="160" alt="画像左回り" class="floatleft" /></p> <p>文章の左側に画像を回り込みさせてみました。</p>

<br class="floatclear">

class="floatleft"で画像を左に回りこみするように指定しています。

class="floatclear"は回り込み解除を意味します。

画像右回り

逆に、右に画像を回り込みさせるには、HTMLはこう記述します。


<p><img src="http://blog-imgs-35-origin.fc2.com/t/o/s/toshiiy/iphone.gif" width="160" height="160" alt="画像右回り" class="floatright" /></p> <p>文章の左側に画像を回り込みさせてみました。</p>

<br class="floatclear">

先程と何が変わったかと言うと、「floatleft」が「floatright」に変わっただけです。

これらのタグは、ブログでもごくごく普通に使われる基本的なタグですので、慣れておくことをお勧めします。

関連記事

RSSフィード twitter Google Bookmarks ブログ運営で、知ってて損しないHTMLタグ集 前編をはてなブックマークに登録 はてなブックマーク
タグ / ブログ
コメント一覧
コメントを残す


管理者にだけ表示を許可する

 | BLOG TOP | 

人気記事

スポンサードリンク

新着記事

プロフィール

日刊ウェブログ式を運営するナカタと申します。まだ開設して日も浅い拙いブログですが、どうぞよろしくお願いします。

リンク

LOOMICDESIGN

タグクラウド

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。