質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2268閲覧

ウィンドウ幅に合わせて箱の並びを変えたい

kolon.m

総合スコア69

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/01/24 13:25

説明不足で大変申し訳ないです。
私は今このようなページを作ろうと思っているのですが(目標

html

1body内 2 3 4 <div class="article"> 5 <div class="a1"> 6 </div> 7 <div class="a2"> 8 </div> 9 <div class="a3"> 10 </div> 11 <div class="a4"> 12 </div> 13 <div class="a5"> 14 </div> 15 </div>

css

1 .article { 2 height: 100%; 3 width: 95%; 4} 5.a1 { 6 background-color: #000; 7 margin: 10px; 8 width: 300px; 9 height: 300px; 10 float: left; 11} 12.a2 { 13 background-color: #000; 14 margin: 10px; 15 width: 300px; 16 height: 300px; 17 float: left; 18} 19.a3 { 20 background-color: #000; 21 margin: 10px; 22 width: 300px; 23 height: 300px; 24 float: left; 25} 26.a4 { 27 background-color: #000; 28 margin: 10px; 29 width: 300px; 30 height: 300px; 31 float: left; 32} 33.a5 { 34 background-color: #000; 35 margin: 10px; 36 width: 300px; 37 height: 300px; 38 float: left; 39} 40

簡単なので、ここまでは自分で出来るのですが、ここから、どうすれば良いか分からないです。どなたか、助言等くれないでしょうか?

現在の改善点(見落としがあるかも)
1、ウィンドウ幅を変えて箱が下に回り込んだときに残りの箱でその隙間を埋める(目標のページでウィンドウ幅を変えて頂ければ わかると思います)
2、箱にフォーカスした時の挙動※画像の収縮は不要(目標のページでウィンドウ幅を変えて頂ければ わかると思います)

特に改善点1を重点的に改善したいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

該当のページはCSS の @media タグを利用し、レスポンシブデザインという手法をとっております。

各々のコンテンツのサイズを計算し、「ウィンドウ幅を変えて箱が下に回り込んだとき」となるウィンドウ幅になった場合のCSSを別途記述することになります。

HTML

1<style> 2/* 3 * 「ウィンドウ幅を変えて箱が下に回り込んだとき」となる 4 * width を計算し、max-width に設定する (例として 900px としております) 5 */ 6@media screen and (max-width: 900px) { 7 /* 「ウィンドウ幅を変えて箱が下に回り込んだとき」のCSSを記述 */ 8 .a1 { 9 width:200px !important; 10 } 11 .a2 { 12 background: #F90; 13 } 14 /* 「ウィンドウ幅を変えて箱が下に回り込んだとき」の CSS はここまでに記載 */ 15} 16</style>
  • 参考

http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html
http://qiita.com/knml/items/c94dc493571dd4127d43

2、箱にフォーカスした時の挙動

CSS の疑似要素(:focus)で定義できます。
ただし、focus というのは input, select, textarea 等のフォームパーツにのみ適用可能です。
単純にマウスオーバーした場合に適用したい場合は :hover を利用してみてください。

HTML

1<style> 2/* 注意:.a1 が div 要素の場合、こちらのスタイルは適用されません。 */ 3.a1:focus { 4 background:#F09; 5} 6/* .a2 にマウスオーバーした場合、このスタイルが適用されます */ 7.a2:hover { 8 background:#F09; 9} 10</style>
  • 参考URL

http://www.htmq.com/selector/focus.shtml

投稿2016/01/25 01:31

usk

総合スコア397

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問