ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > タグのお勉強 > title - 文字の背景色を変えるには? 応用編

文字の背景色を変えるには? 応用編

ボックスの大きさを変える

背景色の大きさや位置なども細かく設定できるので紹介したいと思います。

縦と横の大きさを決めれば、この様に好きな範囲の背景色を変える事ができます。

どのように指定するのかというと、
<div style="width: 50%; height: 100px;background-color:#色の値;">縦と横の大きさを決めれば、この様に好きな範囲の背景色を変える事ができます。</div>
この様にwidth:横の幅;とheight:縦の長さ;で大きさを指定します。

画像を背景につかう

画像の場合なら、

<div style="width:70%; height:150px; background-image: url(http://blog~~~.gif);">画像を背景につかう</div>
この様になります。

ボックスの画像の並び方・位置を指定する

でも指定した大きさよりも画像の方が小さいと、画像がたくさん並びますよね。co-1.gifこの画像を使って説明したいと思います。

ぎっしり敷き詰められてしまいました。

こうなるのが嫌だという人は、自分で画像の表示方法を指定するタグがあるのでそれを使います。

画像の並び方
background-repeat: repeat-x; 横1列に並べる
background-repeat: repeat-y; 縦1列に並べる
background-repeat: no-repeat; 1つだけ表示する
background-repeat: repeat; 繰り返し表示して敷き詰める

画像の表示位置
基本形 background-position:横方向 縦方向;
横方向 left(左) center(中央) right(右)
縦方向 top(上) center(中央) bottom(下)
表示位置の例-background-position: left top; (左上に表示)
表示位置の例-background-position: right bottom; (右下に表示)

数字と単位で指定する事もできます。横方向は左からの距離で、縦方向は上からの距離で指定します。(単位はpx・%など)
表示位置の例-background-position: 50px 100px;
(左から50px、上から100pxの位置)
表示位置の例-background-position: 150% 300%;
(左から150%、上から300%の位置)

これを使えば・・・
真ん中に1つだけ使いました。

どの様に指定したのかというと、

<div style="width: 70%; height: 150px;
background-color:#ccff99;
background-image: url(http://blog61.fc2.com/1/1258/file/co-1.gif);
background-repeat:no-repeat;
background-position:center center;">真ん中に1つだけ使いました。
</div>

この様になっています。
使いたい物をdivに囲まれた中に入れていけばいいだけなので、難しくないと思います。

ボックス自体の位置・文字の位置を指定する

表示する場所も変えれます。

表示する文字の場所も変えれます。

他にもこの様に全体の位置や文字の位置を変える事ができます。これは空間を指定してあげる事でできるようになります。枠の外の空間をmarginで指定すると、全体の位置が変わります。例えば、枠の左側に空間を作るとその分、全体が右にずれます。
枠の中の空間をpadding で指定すると、文字の位置が変わります。例えば上下左右に同じ大きさの空間を作ると、文字は枠の真ん中に配置されます。

マージン・パディング


marginの指定
個別に指定する方法
margin-top:数値px; 上の空間の広さを指定
margin-bottom:数値px; 下の空間の広さを指定
margin-left:数値px; 左の空間の広さを指定
margin-right:数値px; 右の空間の広さを指定
一括で指定する方法
margin: 数値px; 上下左右の全てを指定
margin: 数値px 数値px; 上下・左右を指定
margin: 数値px 数値px 数値px; 上・左右・下を指定
margin: 数値px 数値px 数値px 数値px; 上・右・下・左を指定

paddingの指定
個別に指定する方法
padding-top:数値px; 上の空間の広さを指定
padding-bottom:数値px; 下の空間の広さを指定
padding-left:数値px; 左の空間の広さを指定
padding-right:数値px; 右の空間の広さを指定
一括で指定する方法
padding: 数値px; 上下左右の全てを指定
padding: 数値px 数値px; 上下・左右を指定
padding: 数値px 数値px 数値px; 上・左右・下を指定
padding: 数値px 数値px 数値px 数値px; 上・右・下・左を指定

例えば文字の位置を変えたいなら(上の文字の位置を変えた例)
<div style="width: 100px; height: 50px;
background-color:#FFDEAD;
padding: 20px 45px 20px 45px;">表示する文字の場所も変えれます。
</div>
この様に指定します。
これも画像の位置の時と同じで、<div>に囲まれた中に入れるだけなので、それほど難しくないと思います。

背景の色の枠線に色や種類を変える事もできますが長くなってしまうのでつづきで紹介します。 <つづく>


関連ページ)
文字の背景色を変えるには?基礎編
・文字の背景色を変えるには? 応用編
文字の背景色を変えるには? 枠線編
文字の背景色を変えるには? 一括編


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/131-eabc6893   

Template Designed by DW99