枠の中の背景を変えたい

特定の枠の中だけ、背景を変えるためのスタイルシートチップス。

スポンサーリンク


さて昨日は、色つきの枠で文章を囲んだわけですが、そうなると中の背景を変えたくなるのが人情、人のなさけというものです。

そこで今日のお題 「せっかく色つきの枠で囲ったんだから、もっと頑張って背景も変えたい!」


昨日と同じように枠に色をつけた状態が下です。



上のソースはこうです。


<div style=”border:1px solid #ff0000;padding:1em;”>
広告:美容室のケアが自宅で簡単にできる7日間髪美人セット
広告:美白スキンケアを840円で試したい女性の方へ。ラサーナ潤い美肌トライアルセット
広告:オシッコをかけても数秒でニオイが消える驚異の消臭衣類デオル いい快互服ドットコム
広告:保管付きクリーニングなら美服パック
広告:面倒な会議議事録の書き起こしや、論文作成に最適! 音声認識ソフト「AmiVoiceSP」
</div>


それでは、背景色をクリーム色にしてみます。
変更箇所のみ赤で表示します。

ソース


<div style=”border:1px solid #ff0000;padding:1em;background:#ffffcc“>
広告:美容室のケアが自宅で簡単にできる7日間髪美人セット
広告:美白スキンケアを840円で試したい女性の方へ。ラサーナ潤い美肌トライアルセット
広告:オシッコをかけても数秒でニオイが消える驚異の消臭衣類デオル いい快互服ドットコム
広告:保管付きクリーニングなら美服パック
広告:面倒な会議議事録の書き起こしや、論文作成に最適! 音声認識ソフト「AmiVoiceSP」
</div>


上のソースを表示すると下のようになります。見てお分かりかと思いますが私は特に、オシッコをかけても数秒でニオイが消える驚異の消臭衣類デオルが注目です。これはオシッコがかかってしまってもということなのか、オシッコをあえてかけるようなプレイでも大丈夫という意味なのか、どっちなんでしょう?


表示結果


それでは大事なところを強調表示してみましょう。

style=”border:1px solid #ff0000;padding:1em;background:#ffffcc

borderとpaddingは昨日の記事で説明してあります。

新しいところはbackgroundですね。
バックグラウンド、背景です。色の指定方法も昨日の記事に書いてあります。
#ff0000が、#00ff00が、#0000ffです。#の後の6文字を変えていい色を配合してください。

ちなみに数値は0(ゼロ)からはじまって、9の次がaです。最後がf 。これは16進数表現です。16進数は16番目で桁代わりするわけですが、数字をあらわす文字が0から9までの10個しかない。そこで足りない分をaからf の6文字で表現しています。

では背景に画像を表示させるにはどうしたらよいでしょう?枠の中の背景に画像を使いたい!につづきます。

この素材は風と樹と空とフリー素材さんのものを使わせていただきました。


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください