スポンサーサイト

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

HTML/CSSタグ

HTMLとはWebページの構造を記述する言語。新たにレイアウト担当として分離したのがCSSです。タグとは標識のことで埋め込む事で命令することが出来ます。HTMLタグは主に記事/サイトの構造で使い、CSSタグは主に記事/サイトの装飾で使います。

このタグだけは最低限覚えといた方がいいというものを羅列しました。
(基本的にタグは</b>のように「/」の入った終わりを意味するタグが最後に入ります。始まりのタグだけで、終わりのタグがないといったことになると、タグが全てに反映されてしまいますので気をつけましょう)


HTMLタグ


・<br>と<p>
<br>は改行のタグ。あくまで改行のタグなので間としての使い方は不適切です。ですので、連続させるのはHTML的にマイナスです。間を空けたい場合は<p style="height:数字"></p>の方がまだ適切かもしれません。私は面倒くさいので3連続程度なら当たり前のように連続させていますが。

<p>は段落のタグです。正確には<p>文章</p>として扱います。タグの中の文章が一つの段落の固まりというわけです。始まりと終わりで1行分改行されます。


・<strong>と<b>
<strong>は強い強調のタグです。強調の意味があるので、表示では文字が太字になって表示されます。

<b>は強調の意味はなく、ただ単に太字にする装飾のタグです。しかし、前述したようにHTMLは装飾ではなく構造の役割なので、出来るだけ<strong>を使うかCSSで記述したいところです。


・<span style>
現在、fontの代わりに使われているタグです。<span style="color:#番号">で文字色、<span style="background-color: #番号">で文字の背景など装飾の適用に使えます。


・<table>
表を作成することができるタグです。『Web便利ツール/テーブルタグ作成ツール』などのサイトを使えば自動でタグを作成できます。どのようなものかは上記のサイトで実際に試してみましょう。


・<a href="URL">
<a href="URL" target="値">文章</a>で文章の部分がURLの部分にリンクされた状態になります。target="値"はリンクの開き方です。"_blank"で新しいウィンドウ(タブ)で表示、"_self"で同じウィンドウ(タブ)で表示です。他にもありますが、とりあえずこの二つの値を覚えましょう。


・<hr size="数字" width="数字" align="値">
水平の罫線を表すタグです。この記事でもHTMLタグ、CSSタグの下に使っています。sizeは線の太さ、widhtは長さ(デフォルトで100%)、alignは位置を表しています。


CSSタグ


・marginとpadding
どちらも領域(余白)を取るためのタグです。違いはmarginが外部の領域を取るのに対して、paddingは内部の領域を取るということです。このタグの違いはボーダーや背景色がある時に意味を持ちます。

margin

⇔padding

こんな感じです。⇔が余白部分。marginは枠の外にpaddingは枠の中に余白がありますね。


・text-align:値;
位置を揃えるタグです。値をleftにすることで左、rightで右、centerで中央に寄せることができます。インライン要素なのでブロック自体ではなくその中身だけが寄せられます。

            text-align:center;            

こんな感じです。しかし厄介なのがIE(インターネットブラウザの一つ)です。ブロックまで寄せてしまいます。

            text-align:center;            


このようになってしまいます。FirefoxやGoogleChromeなどのインターネットブラウザは正確に認識するので、中の文字しかセンタリングされません。FirefoxやGoogleChromeは「margin:auto;」の記述でブロックをセンタリングさせることが出来ます。




以上で「HTML/CSSタグ」は終わりですが、覚えておくべきタグはまだまだあります。『HTMLクイックリファレンス』やeWeb(イー・ウェブ)さんの『HTMLリファレンス』を読んで足りないところはどんどん補完しましょう。

ブログサービスの比較 ブログ用語 HTMLタグ アクセスアップ 便利ツールの紹介 ブログ作成入門のサイトマップ 参考になる本 考察録

gmail
連絡はこちらにお願いします。



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