HTML / XHTMLコミュのHTML、CSS初心者です。質問があります。

はじめまして。
勉強を始めてまだまだですが
先輩方にいろいろ質問があります…。
もし良かったら教えてください。
私自身も自力で頑張って入るのですが頭足らずで…

コメント(9)

最初
全て
最新の40件

このようなレイアウトのページを作りたい場合、
それぞれのボックスをdivや、nav、などで囲ってどうすれば綺麗に配置できるのでしょうか。
もし良かったら教えてください。お願い致します

CSSをどの程度理解されているのか分からないのでざっくり言えば、
floatを使って左右にブロックを寄せて作ります。

「サブコン」や「SNS」など複数の要素をまとめて寄せたい場合には、
その要素をさらにdivなりsectionなりで囲います。

floatした後にある要素は、特にインライン要素などの場合はfloatした要素の横に来てしまうので、
clearを使ってfloat属性を文字通りクリアする必要があります。

[3] mixiユーザー 08月27日 16:54

ちょびんさんご回答ありがとうございます！
フロートでとりあえずやっていきます。
やってみたらCSSのコードを写真でとって貼ってみますのでもし良かったらまた御指導お願い致します。

[4] mixiユーザー 08月27日 17:48

とりあえず、フロートでやってみて、一応こんな感じにできたのですが、自分から見ても、マージンのゴリ押し感がすごくて…
これをどうやったらもっと綺麗にコードが見えるようになりますか？
皆さんだったらどのように組むか教えてください(´・ω・｀)

[5] mixiユーザー 08月27日 17:49

羽川さんなのは個人的に好きなのでお許しください(´・ω・｀)

[6] mixiユーザー 08月27日 18:24

HTMLコードを貼っていただければブロック要素の構造が分かるのでもっと突っ込んだ話ができると思いますが、
現状で気になった点をいくつか。

・メニューのliタグはdisplay:table-cellでもいいですが、
　一般的にはfloatを利用して横並びにするか、display:inline-blockを使用します。
　（メニュー数が固定ならば良いのですが、数が増えた場合に次の行に並べる為）

・position:fixedは恐らくこの場合は適切ではありません。
　スクロールバーが出ていないので分かりませんが、
　fixedの場合はスクロールした場合に画面上で固定位置に表示され続けます。
　（引っ付いてくるメニューのイメージ）

ネガティブマージンがいくつかありますが、
全体的にfloatをうまく使えていない印象があります。
このレイアウトであれば、横並びのメニュー以外はmargin-topのみで事足りるはずです。

[7] mixiユーザー 08月28日 01:37

質問への回答じゃないですが、スクリーンショット撮る方法を取りあえず抑えられてはいかがでしょ。

参考） Windowsのスクリーンショットの撮り方
http://allabout.co.jp/gm/gc/20843/

# 何か理由があってのことでしたらすいませんが。

[8] mixiユーザー 08月28日 13:28

ＫＡＢＡさんありがとうございます！
写メでとった理由は学校のＰＣで授業の合間でやってたので写メだったわけです・・・
すみません＞＜

スクショのとりかたわざわざありがとうございました！

[9] mixiユーザー 09月02日 23:07

そうでしたか、要らぬお節介でした。

状況を共有しづらいので、下記の様な Web サービスを利用してコードなど共有されると、
適切な回答に結びつきやすいと思います。

https://jsbin.com/

英語なので分かりづらいかもしれませんが、HTML と CSS のタブだけで完結できるのではーと思います。
画像に関してはこちら（ https://placehold.it/ ）でダミー画像が利用できます。

例に挙げたサイト意外にも同様のサービスはあるので、もし興味があればご自身で調べてみてください。

ログインすると、みんなのコメントがもっと見れるよ