タイトル付ボックス
ブログでスタイルシート
- 枠付きボックスで注目
- 幅いっぱいのボックス
- ボックスを右に表示
- ボックスの中に色をつける
- タイトル付ボックス
- タイトル付ボックス
- ボックスを右に寄せる
- ボックスを２つ並べる
- フォトスタンド風画像わく
- 画像に枠を付ける
- 中央に寄せて表示する
- ２つ横に並べる
注意事項
現在の楽天ブログでは、記事入力の中に改行コードがあると、自動的に改行するタグ（BRタグ）が付加されます。
テキストだけの場合には、このほうが便利なのですが、スタイルシートでレイアウトした場合、ブラウザでの表示が崩れます。
そのため、サンプルHTMLも自動的に改行が入るのを前提にしています。
見づらかったり、編集しづらかったりしますが、現在の仕様上仕方がありません。
ここのサンプルは、楽天ブログで利用できるHTMLを使っています。なお、楽天ブログの「トップ自由欄」や「フリーページ」で利用するときに「自動改行なし（<BR>タグで指定）」のモードで編集する場合には、タグの途中とかでない限り、どこに改行を入れてもかまいません。
他のブログサイトでも、そのまま使えますが、利用できるHTMLに制限がある場合、うまく表示されないことがあります。もし、スタイルシートを別ファイルで指定できるのであれば、タグのstyle属性をclassやidに変更して指定したほうがスマートです（楽天ブログではこれができません）。
タイトル付ボックス
タイトル付ボックスといっているのは、上に背景色ありでタイトルを表示して、下は普通のボックスとなっているものです。ちょうど、Windowsのウィンドウのような感じになります。まずは基本的なサンプルです。
文章を書く</div>
文章を書く
タイトルのテキストが中央寄せのほうが見やすいし、見た目もいいので変えてみます。
文章を書く</div>
文章を書く
ちなみに枠付きボックスと同じですが、この場合も横幅は100%（横幅いっぱい）になります。あえて横幅を設定すると次のようになります。
文章を書く</div>
文章を書く
ボックスを右に寄せる
floatを使って右に寄せます。floatしたボックスのサイズはデフォルトだと「０」です。横幅を設定しない場合、中のインライン要素で幅が決定することになります。横幅を設定したほうが明らかにレイアウトしやすいので、設定することにします。
文章を書く</div></div>ここはボックスの外です。<div style="clear:right"></div>
文章を書く
ここまでくると、タグやスタイルが複雑なのでHTMLがごちゃごちゃしてきました。自動改行がなければ、ちゃんと改行して見やすくできるんですが、仕方がありません。
ボックスを２つ並べる
これ以上タグを複雑にしてどうするのかといわれそうですがやります。floatを使って２つ横に並べてみます。
ここに書く</div></div> <div style="float:right;width:45%"> <div style="border:solid 1px pink"> <div style="background-color:pink;padding:3px;margin-bottom:3px;text-align:center">右のタイトル</div>右の文章は
ここに書く</div></div> <div style="clear:both"></div>
ここに書く
ここに書く
ここでは、幅を左右とも45%に設定してみました。隙間の加減は48%のところを調整してください。くれぐれも100%は超えないように。きれいなレイアウトをするには、表示しようとしているブロックレベルの横幅をpxやemなどで設定して、floatのサイズもpxかemで指定したほうがよいです。そうすると隙間の幅がちゃんと制御できます。「%」の設定だと元の横幅に依存します。これ以上複雑にすると解読困難になりそうなので、この辺でやめておきます。「ここに...」と書いてある所にさらにタグを入れていけば、より複雑なレイアウトにすることができます。
-
-
- 私のPC生活
- iiyamaのノートPCのケース
- (2024-05-28 22:58:51)
-
-
-
- iPhone
- アップルウォッチ 用 バンド ベルト …
- (2024-05-27 00:51:24)
-
-
-
- Amazonマケプレ
- Best Chopping Board in the UK: Dee…
- (2024-05-30 04:55:20)
-
