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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

Q&A

解決済

5回答

1766閲覧

CSSで実現する方法をご教授下さい。

AlnairBright

総合スコア35

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

0グッド

0クリップ

投稿2016/07/27 02:47

当方、ウェブページのデザイン、特にCSSは未経験でしてどのようにして
実現するのかがわかりません。

下記の要件を満たすCSSの記述方法をご教授下さい。

###要件

  • 4つの要素を一行に等間隔で表示。
  • ブラウザの幅に合わせて間隔を調整。ユーザがブラウザの幅を変えた時は自動で位置を調節。
  • クリックした要素のみを非表示

###今の状態

  • 一行に4要素を表示できておらず、4行に別れて表示される
  • クリックした時、その要素の表示は消えるが詰められてしまう

###記述したコード

lang

1<div id="items"> 2 <div class="first> 3 <a href="javascript:void(0)" onClick="clickFirst()">一番目</a> 4 </div> 5 <div class="second"> 6 <a href="javascript:void(0)" onClick="clickSecond()">二番目</a> 7 </div> 8 <div class="third"> 9 <a href="javascript:void(0)" onClick="clickThird()">三番目</a> 10 </div> 11 <div class="fourth"> 12 <a href="javascript:void(0)" onClick="clickFourth()">四番目</a></div> 13 </div> 14</div>

lang

1 2function clickFirst() { 3 $(#items div.first a).hide(); 4 $(#items div.second a).show(); 5 $(#items div.third a).show(); 6 $(#items div.fourth a).show(); 7} 8 9function clickSecond() { 10 $(#items div.first a).show(); 11 $(#items div.second a).hide(); 12 $(#items div.third a).show(); 13 $(#items div.fourth a).show(); 14} 15 16function clickThird() { 17 $(#item div.first a).show(); 18 $(#item div.second a).show(); 19 $(#item div.third a).hide(); 20 $(#item div.fourth a).show(); 21} 22 23function clickFourth() { 24 $(#items div.first a).show(); 25 $(#items div.second a).show(); 26 $(#items div.third a).show(); 27 $(#items div.fourth a).hide(); 28} 29

lang

1#items div.first a { 2} 3 4#items div.second a { 5} 6 7#items div.third a { 8} 9 10#items div.fourth a { 11} 12

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

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

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

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

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

guest

回答5

0

ベストアンサー

一行に4要素を表示できておらず、4行に別れて表示される

クリックした時、その要素の表示は消えるが詰められてしまう

この2つの現象の原因はどちらも**「display」**プロパティの仕様によるものです。
displayプロパティとは、要素の表示特性を定義するためのプロパティで、
主な値にはblock, inline, inline-block, table-cell, none等、様々なものがあります。
この値によって、
・マークアップしただけで自動的に要素ごとに改行されるかされないか
・width/height/margin/padding等のボックス系プロパティを指定した場合の挙動
などが大きく異なるため、結果としてレイアウトの状態に大きな影響を与えます。

どうすれば望むレイアウトを実現できるか、ということについては実に様々な方法が提案できますが、
CSS未経験とのことですので、まずはdisplayプロパティの種類とその仕様を調べてみて、
実際にdisplayプロパティの値を変えた時に表示がどのように変化するのかためしてみることをお勧めします。

ちなみにjqueryのhide()はdisplay:none;を適用、show()はdisplay:block;を適用する、
という設定と全く同じ結果となります。従って、hide()した場合その要素は画面上から消え、**「存在しない」**扱いとなりますので、後続要素によって詰められることになります。
見えなくするだけで要素自体はそこにある(空白領域を確保)状態にしたいのであれば、
visibility:hidden;opacity:0の適用をするのがよろしいかと思います。

投稿2016/07/27 04:22

編集2016/07/27 07:02
aKusano

総合スコア3763

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

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

AlnairBright

2016/07/27 13:41

aKusana様 ご回答誠にありがとうございました。 クリック時の詰められてしまう問題は visibility:hidden;とvisibility:visible; をjqueryにてスイッチすることで実現 することが出来ました。 また、色々とcssを調べる時のヒントを 示して頂きほんとうに助かりました。 今後のスキルアップに繋げたいと思います。
AlnairBright

2016/07/27 15:05

aKusano様 名前が間違っていました。 大変失礼致しました。 すみません。。。
guest

0

もし、IE11未満を切り捨てられる環境なら、flexboxを使うのがいちばん楽です。

css

1#items{ 2 width:100%; 3 display: -webkit-flex; /* Safari */ 4 display: flex; 5 -webkit-flex-wrap:nowrap; 6 flex-wrap:nowrap; 7} 8 9#itemd div{ 10 -webkit-flex-grow: 1; 11 flex-grow: 1; 12 -webkit-flex-shrink: 1; 13 flex-shrink: 1; 14}

これだけで、中身の幅を自動調整してくれます。

投稿2016/07/27 02:56

maisumakun

総合スコア145121

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

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

AlnairBright

2016/07/27 13:37

maisumakun様 ご回答誠にありがとうございます。 CSSはこの方法を使って横一列に4要素を 並べることが出来ました。 当方、メインはスマホをターゲットとしているので すごく楽に実現することが出来ました。
guest

0

こちらに最終的なコードを記述してもいいかどうかわかりませんが、
特に書く場所が無かったのでこちらへ記載致します。

ご回答頂いた、
maisumakun様
aKusano様
NatsumiOki様
MasafumiOkamoto様

ご回答誠にありがとうございました。
無事に問題を乗り越えることが出来ました。
皆様のお陰です。

html

1<div id="items"> 2 <div onClick="clickItems(1)">一番目</div> 3 <div onClick="clickItems(2)">二番目</div> 4 <div onClick="clickItems(3)">三番目</div> 5 <div onClick="clickItems(4)">四番目</div> 6</div>

css

1#items{ 2 width:100%; 3 display: -webkit-flex; /* Safari */ 4 display: flex; 5 -webkit-flex-wrap:nowrap; 6 flex-wrap:nowrap; 7 8 text-align:center; 9} 10 11#items div{ 12 -webkit-flex-grow: 1; 13 flex-grow: 1; 14 -webkit-flex-shrink: 1; 15 flex-shrink: 1; 16 17 cursor: pointer; 18 border: 2px solid #fff; 19 background-color: #333; 20 color: #fff; 21 22} 23 24#items div:hover { 25 background-color: #59b1eb; 26}

javascript

1function clickItems(num) { 2 $('#items div').each(function(i){ 3 if(num == i+1) { 4 $(this).css('visibility','hidden'); 5 } else { 6 $(this).css('visibility','visible'); 7 } 8 }); 9}

投稿2016/07/27 15:07

AlnairBright

総合スコア35

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

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

0

こんな感じですかね・・・

HTML

1<div id="items"> 2 <div class="item"> 3 <div class="first"> 4 <a href="javascript:void(0)" onClick="clickFirst()">一番目</a> 5 </div> 6 </div> 7 <div class="item"> 8 <div class="second"> 9 <a href="javascript:void(0)" onClick="clickSecond()">二番目</a> 10 </div> 11 </div> 12 <div class="item"> 13 <div class="third"> 14 <a href="javascript:void(0)" onClick="clickThird()">三番目</a> 15 </div> 16 </div> 17 <div class="item"> 18 <div class="fourth"> 19 <a href="javascript:void(0)" onClick="clickFourth()">四番目</a> 20 </div> 21 </div> 22</div> 23

JavaScript

1function clickFirst() { 2 $('#items div.first a').hide(); 3 $('#items div.second a').show(); 4 $('#items div.third a').show(); 5 $('#items div.fourth a').show(); 6} 7 8function clickSecond() { 9 $('#items div.first a').show(); 10 $('#items div.second a').hide(); 11 $('#items div.third a').show(); 12 $('#items div.fourth a').show(); 13} 14 15function clickThird() { 16 $('#items div.first a').show(); 17 $('#items div.second a').show(); 18 $('#items div.third a').hide(); 19 $('#items div.fourth a').show(); 20} 21 22function clickFourth() { 23 $('#items div.first a').show(); 24 $('#items div.second a').show(); 25 $('#items div.third a').show(); 26 $('#items div.fourth a').hide(); 27}

CSS

1#items { 2 width: 100%; 3 box-sizing: border-box; 4} 5 6#items > div.item { 7 display: block; 8 float: left; 9 min-width: 25%; 10 box-sizing: border-box; 11} 12 13#items > div.item > div { 14 min-height:1px; 15 box-sizing: border-box; 16} 17

投稿2016/07/27 08:21

編集2016/07/27 08:26
MasafumiOkamoto

総合スコア254

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

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

AlnairBright

2016/07/27 13:54

MasafumiOkamoto様 ご回答頂き誠にありがとうございます。 質問に即した、具体的なコードを書いて頂き、 分かりやすかったです。 特に、CSSのセレクタ部分の記述方法が参考に なりました。 CSSのセレクタっていまいちわからなかったので 具体的に別の書き方を見ることが出来、勉強に なりました。
guest

0

要素を消した時、残りの要素を画面幅に合わせて均等にしたいのでしょうか?

その想定で回答するならこんな感じです。
http://codepen.io/mayo31/pen/OXEpwA
※display:table;を使用していますが、ほかの方のようにflexでもいいと思います。

提示されたコードからするとjQueryを使用する前提っぽいのでjQueryで書きました。
もとのコードはクリックイベントを得るためにわざわざa要素にしていますが、ページ遷移するのではなく、項目の表示・非表示を切り替えるということであれば、a要素はいらないでしょう。
button要素にしておくというのでもいいですね。

投稿2016/07/27 07:18

NatsumiOki

総合スコア1298

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

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

AlnairBright

2016/07/27 13:50

NatsumiOki様 ご回答頂き誠にありがとうございます。 ご提示頂いたサイトのコードを拝見致しました。 なるほど、こういう書き方もあるのかと、興味 深く勉強になりました。 特にHTML部分は、スッキリと見やすくなって おり、こちらを参考にコードを記述致しました。 蛇足ですがこのサイトはテストコードを色々と 試すのにはもってこいですね。 早速登録致しました。 このあといろいろ遊んでみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問