てんぽ: CSSクイズ ブロックボックスの右寄せ

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

CSSクイズ ブロックボックスの右寄せ

2006年10月22日(日)

CSSでレイアウトをするとき、ある表示結果を実現するためには複数の異なる方法があり得ます。 ひとつの方法があるブラウザでうまくいかなかった場合、安易にハックに頼るのではなく、別の実現方法を試してみるとよいでしょう。

というわけで問題。

div要素の中にp要素があり、divの幅は80%、pの幅は200pxと指定されている。 p要素のブロックボックスを右寄せせよ。(参考画像
<div>
 <p></p>
</div>
div, p {
 padding: 0;
 border : none;
 height : 100px;
}

div {
 width: 80%;
}

p {
 width: 200px;
}

※divの幅が200px以下になる場合を考慮する必要はない。

もちろんこの問題の解答は複数存在します。できるだけ多くの方法を考えてみてください。

#114
カテゴリ:HTML・CSS
タグ[ CSS ]

(-4件)

sug:Re: CSSクイズ ブロックボックスの右寄せ

最近おぼえた手法です。
→ http://blog2.fc2.com/s/sug/file/answer1.htm

  • 2006年10月22日(日)13:55:26
  • URL
  • 編集
みりばーる:Re: CSSクイズ ブロックボックスの右寄せ

float:rightは解答のひとつですね。
IE用zoomの意図がいまいちわからない…

  • 2006年10月22日(日)23:23:14
  • URL
  • 編集
:Re: CSSクイズ ブロックボックスの右寄せ

えと、定番テクだけど回答したのでトラバしました。

トラバ元でも触れてるのですが、ここの「メニューの下まで帯が入っているレイアウト」、某WEB技術掲示板で実現できないかと質問があったので、実装例としてここを紹介させていただきました。
スレの感じではスレ立てた人にはちょっと難しいかもしれないのですが、CSSデザインをしている人たちの参考になればと思ったもので…事後報告ですみません m(_ _)m

  • 2006年10月24日(火)02:16:05
  • URL
  • 編集
みりばーる:>洵さん

その3つが想定したスタンダードな解答です(やや余分なコードもありますが)。
某WEB技術掲示板のあれはリファラでチェックしていましたが、洵さんだったんですね。この手法についてもそのうち解説を書きたいと思っています。

  • 2006年10月28日(土)01:48:29
  • URL
  • 編集
コメントの投稿

トラックバック(-3件)

http://mb.blog7.fc2.com/tb.php/114-a81ceba6

ボックスを右に寄せる

CSSクイズ ブロックボックスの右寄せ(てんぽ) 面白そうなので挑戦…してみたけど。 子ボックス float: right; 親ボックス position: relative; 、子ボックス right: 0; 子ボックス margin: 0 0...

  • 2006年10月22日(日)17:30:33
  • from &gt;&gt;Delta
CSSデザインに関する複数回答

ここでも何度か記事を紹介していますし、CSS好きの間ではよく知られていますが、「てんぽ」のみりばーるさんはおそらく最先端のCSSデザインの知識を持っている方ではないかと思います。そもそも、「てんぽ」のデザイン

  • 2006年10月24日(火)01:53:43
  • from ウェビンブログ
『CSSクイズ ブロックボックスの右寄せ』解答

CSSクイズ ブロックボックスの右寄せに挑戰してみたのです。 基本ソース 提示されたソース斷片に、見易くする爲の背景色と空のdiv要素を追加して拵へたのが次のHTML文書。 &#60;!DOCTYPE HTML PUBLIC &#34;-//W3C//DTD HTML 4.01//EN&#34;&#62; &#60;title&#62;Answers to

  • 2006年10月25日(水)01:13:21
  • from 海馬日記

<<放送順か、時系列順か | コンテナブロック(包含ブロック)とは>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。