上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 スタイルシートで遊ぼう!
 その前に、スタイルシートで何が出来るのかをご紹介。以下の文字は、画像は一切使わず、スタイルシートのみで作られた文字です。



スタイルシート を工夫すれば、 表現の幅が 広がります






スタイルシートで出来る文字装飾

 スタイルシートでは、上図のように「文字の色やサイズ、スタイル、太さなど」「文字とボーダーの空間の空き具合」「ボーダーの種類と色、サイズ」「他の要素との空き具合」などを装飾することが出来ます。

■こちらもチェック!
CSS文字デコツール(学習用簡易版)



基本中の基本タグ


<span style="〇〇">変形したい文字</span>

 これが、基本のタグの形です。<~>内はすべて半角文字です。
 テキストエリアでタグが使えるブログであれば、この「<span>」~「<span>」で囲われた文字は、自由に変形させることができます。

 そして、「〇〇」に、予め決められている「スタイルシートの命令文」を入力すれば、いろいろな形に文字を加工出来ると言うわけです。
 それでは、「〇〇」に入る命令文を以下に示します。



ボーダー(ライン、枠)


ボーダーの位置

4辺を囲うライン border : 1px solid #093 ;
文字の上にライン border-top : 1px solid #093 ;
文字の右にライン border-right : 1px solid #093 ;
文字の下にライン border-bottom : 1px solid #093 ;
文字の左にライン border-left : 1px solid #093 ;

 基本になる「4隅を囲うライン」に、「-left」や、「-bottom」等を加えます。


ボーダーの太さ

太さ2px border : 2px solid #093 ;
太さ5px border : 5px solid #093 ;
太さ10px border : 10px solid #093 ;

 太さは「~px」で指定します。数値が大きくなるほど太くなります。


ボーダーの色

青系のボーダーborder : 5px solid #0000ff ;

 カラーは「#〇〇○〇〇○」の6桁の数字で表します。(3桁の場合、「#f53」であれば、「#ff5533」の略となります)
 数値は「0~9」、9の次が「a,b,c,d,e,f」と続く、一桁が「15」で出来ています。(つまり、「a=10」、「d=13」、「f=15」となります。9の上はa~fと覚えておけばOK)

 詳しい解説は「RGBカラー・色の基本」にもあります。


ボーダー装飾

ドット border:4px dotted #093;
ダッシュ border : 4px dashed #093 ;
ソリッド border : 4px solid #093 ;
ダブル border : 4px double #093 ;
グローブ border : 4px groove #093 ;
リッジ border : 4px ridge #093 ;
インセット border : 4px inset #093 ;
アウトセット border : 4px outset #093 ;




例文
<span style="border-left : 6px solid #093 ; border-top : 3px dotted #00f ;">表示テスト</span>
表示テスト

実際に表示確認してみる(編集可)




パディング(余白、文字の周りの空間、隙間)


4辺同時指定

padding : 数値px ;


例文
<span style="padding : 10px ; border:1px solid #000;">表示テスト</span>

表示テスト


 4辺ともに、等間隔の余白を開ける場合は、数値(px)をひとつだけ指定します。


「上下」同時、「左右」同時指定

padding : 上下余白px 左右余白px ;

例文
<span style="padding : 10px 40px ; border:1px solid #000;">表示テスト</span>

表示テスト


 上下を等間隔に〇〇px、左右を等間隔に〇〇px指定する場合は、半角スペースで区切り、数値を2つ入力します。


上下左右、別々に指定

padding : 上px 右px 下px 左px ;


例文

<span style="padding : 0px 40px 20px 80px ; border:1px solid #000;">表示テスト</span>

表示テスト


 4辺を別々に指定する場合は、「上余白」、「右余白」、「下余白」、「左余白」の順番に、半角スペースで区切って指定します。「時計回り上から」と覚えておくと便利。

実際に表示確認してみる(編集可)




バックグランド(背景色、ボックスカラー)


background : 色指定 ;

例文

<span style="background : #ff5599 ; border:1px solid #000;">表示テスト</span>


表示テスト

 背景色は「background :」に「#〇〇○〇〇○;」6桁の数値を入力します。
 詳しい解説は「RGBカラー・色の基本」にもあります。

実際に表示確認してみる(編集可)




フォントカラー(文字色)


color:色指定;

例文

<span style="color : #ff5599 ;">表示テスト</span>

表示テスト


 文字色はは「color:」に「#〇〇○〇〇○;」6桁の数値を入力します。
 詳しい解説は「RGBカラー・色の基本」にもあります。

実際に表示確認してみる(編集可)




 このような感じで、文字や文字の周りに色付けをしたり、ラインを引くことで、文字を目立たせ、ブログの視認性を向上させる事ができます。重要な部分にアンダーラインを引いたり、小見出しに使ってみたり。

 でも、これ、一回一回タグを書いて指定するのは大変。スタイルシートで最初に一括統一規格にしてしまうには?
 フォントの飾りの指定は?
 ボックス形式とは?

 これから順番に、調べて行きましょう☆


上手くいかないときは?

 スタイルシートの記述は、すべて半角文字です。上手くいかない場合は、全角文字が使われていないかどうか確認してください。


スタイルシートでよく間違える記述例。

①英文や記号の何処かに全角文字が紛れ込んでいる。
②「;」セミコロン忘れ。
③「:」コロンと「;」セミコロン打ち間違い。



■次のページはこちらです。
スタイルシートで遊ぶ part.2(<div>タグ編)

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