上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 最初のページから読むには「スタイルシートで遊ぶ part.1(<span>タグ編)」からどうぞ。

 前回までで、一通りの「デザイン遊び」のタグは出来るようになりました。
 今回は、「span」「div」以外のタグにスタイルシートを適応します。




…といっても、難しいことは何もなく、実はタグ内に前回までで使っていた「半角スペース」+「style="〇〇"」を追加するだけで、それらにスタイルを指定することができます。

■こんな感じ

使えれば<b style="〇〇">面白いスタイルシート</b>ですよ~。
使えれば<strong style="〇〇">面白いスタイルシート</strong>ですよ~。

 ではそもそもタグとは何か?
 代表的なタグを纏めてみます。


フォント装飾系タグ

<b> ~ </b>
太字
<strong> ~ </strong>
太字・論理強調
<i> ~ </i>
斜体
<em> ~ </em>
斜体・論理強調
<s> ~ </s>
打ち消し線
<u> ~ </u>
下線
すべてスタイルシートで指定できるエフェクトなので、強調したい文章以外では使わない方が無難です。

 主に、文章中でより重要な意味のある文に対して使うタグです。見た目も太字、斜体などに変化します。
「span」と同じ、インライン要素です。


段落タグ

<p> ~ </p>
段落

 文章を段落ごとに囲むタグです。文字に変化は起こりません。きちんと使った方が良いそうですよ☆
「div」と同じ、ブロック要素です。


引用タグ

<blockquote> ~ </blockquote>
引用文

 引用した文章を囲むタグです。文字に変化は起こりません。
「div」と同じ、ブロック要素です。


画像タグ・区切り線タグ

<img />
画像
<hr />



 画像を呼び出すタグです。
 特殊なインライン要素です。


リンクタグ

<a> ~ </a>

「href="http://〇〇"」を付け足せば、「http://〇〇」のページヘジャンプするハイパーリンクを設置することができます。
「span」と同じく、インライン要素です。


 主要なタグは、こんなところでしょうか?
 テーブルは、難しいタグなので、またリストはIEに合わせるとFirefoxが、Firefoxに合わせるとIEで画面からはみ出て表示される仕様なので、またいずれ紹介したいと思います。

 これら、すべてに「style="〇〇"」を付け足して、デコレーションすることができます。


 次回はいよいよ、「スタイルシートファイル」の編集です。
次のステップの前に(スタイルシートってなに?)

■CSSメインメニュー
実用的スタイルシート入門
このエントリーをはてなブックマークに追加
Thu.03.18.2010
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。