PCレイアウト
タブレット(959px〜641px)
スマホ時(640px以下)
このようなニュースリリース部分はレスポンシブを考えるとul要素を使ってコーディングする方が簡単に出来るので、多くの場合はul・liで組まれていますが、文章構造的にはdl要素を使う方が良いでしょう。
なので、今回はdl要素を使って実際にコーディングして行きます。
ポイント
- ddがdtの下に回り込まないようにする
- dtとddで行数が違う場合にレイアウトが崩れないようにする
- dtとddの高さを1行目で合わせる
スマホ時のポイント
スマホ時になると最新記事3つ以外は隠れていて、「もっと見る」ボタンをクリックすると表示されるようにしてみましょう。
この際に最新記事3つ以外にクラス名をつけるやり方もありますが、それでは運用効率が非常に悪いので、擬似クラス(nth)を使えるようになりましょう。
さらに、これはjQueryだけで無く、プログラム全般に言えることですが、動きをつける際にはまず「何をしたら」、「何が」、「どうなる」という事をしっかりと明確にしましょう。
また、jQueryで要素を取得する際には「ツリー構造」と「ノード」の考え方をしっかりと理解する必要があります。
Traversingメソッドを利用
Traversingのメリット
トラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを使えば操作したい要素を「this」から見てどういう関係性にある「要素」、という形で指定する事ができます。jQueryを使う上で非常に大事な考え方なので、しっかりと理解しましょう。
childrenメソッド
jQueryオブジェクトで指定した要素の「子」要素でセレクタにマッチする要素を選択します。子要素とは階層構造(入れ子構造)において直下にある要素のことです。
childrenメソッドを利用すれば「セレクタ:>(子要素)」と同じようなことが可能です。
parentメソッド
指定した要素の「親」要素を選択します。親要素とは階層構造(入れ子構造)において直上にある要素のことです。
名前が似ているparentsメソッドはparentメソッドと異なり「先祖」要素も選択します。
siblingsメソッド
指定した要素の兄弟要素(同じ階層の要素)を選択します。引数を設定しない場合はすべての兄弟要素を選択します。
文章構造
<div class="inner"> <div id="news"> <h2>ニュースリリース</h2> <dl> <dt>2017年6月12日</dt> <dd><a href="#">「復興応援 キリン絆プロジェクト」熊本支援 阿蘇GIAHS(ジアス)ツーリズム推進協議会に支援金を助成</a></dd> <dt>2017年6月9日</dt> <dd><a href="#">国産最軽量のアルミ缶が「第41回木下賞」を受賞!</a></dd> <dt>2017年6月9日</dt> <dd><a href="#">「キリンウイスキー 富士山麓 ブレンデッド18年」が「アジアスター賞」、「ワールドスター賞」を、「キリン 生茶」525mlペットボトルが「アジアスター賞」を受賞!</a></dd> <dt>2017年6月8日</dt> <dd><a href="#">「ギュギュッと搾ったサングリア」新スタイル300ml小容量ボトル缶が販売好調</a></dd> <dt>2017年6月8日</dt> <dd><a href="#">「シャトー・メルシャン “調和を味わう”3本セット」をDRINXで数量限定発売</a></dd> <dt>2017年6月7日</dt> <dd><a href="#">「第4回 寿司×クラフトビールフェス」開催</a></dd> <dt>2017年6月6日</dt> <dd><a href="#">「キリンチューハイ ビターズ 皮ごと搾りはっさく<期間限定>」を新発売 </a></dd> </dl> </div> <div id="new_info"> <h2>新着情報</h2> <dl> <dt>2017年6月13日</dt> <dd><a href="#">「キリン 氷結®ストロング 塩グリーンレモン<期間限定>」を新発売!(6月13日発売)</a></dd> <dt>2017年6月6日</dt> <dd><a href="#">「47都道府県の一番搾り(栃木県・群馬県・埼玉県・千葉県・東京都・京都府・大阪府・奈良県・和歌山県・熊本県・宮崎県・鹿児島県・沖縄県)」を新発売!(6月6日発売)</a></dd> <dt>2017年6月6日</dt> <dd><a href="#">「47都道府県の一番搾り」新CMを公開!</a></dd> <dt>2017年6月6日</dt> <dd><a href="#">キリン食生活文化研究所 キリン食生活文化研究所のアンケート「ちょっと教えて」実施中!</a></dd> <dt>2017年6月6日</dt> <dd><a href="#">「キリン 午後の紅茶 ティー ウィズ ミルク」を新発売!(6月6日発売)</a></dd> <dt>2017年6月6日</dt> <dd><a href="#">「キリン 午後の紅茶」新CM『おいしい無糖「オール・マイ・ティー英語講座 ティー ウィズ ミルクぶら下がり」篇』を公開!</a></dd> <dt>2017年6月6日</dt> <dd><a href="#">「キリン 午後の紅茶」新CM『おいしい無糖「食事もオール・マイ・ティー ティー ウィズ ミルクぶら下がり」篇』を公開!</a></dd> </dl> </div> </div>
.inner { width:960px; margin:0 auto; padding: 0 20px; box-sizing: border-box; } #news { width:47%; float:left; } #new_info { width:47%; float:right; } #news h2, #new_info h2 { font-size:20px; padding: 20px 0 20px 10px; border-bottom: 1px solid #D8D8D8; box-sizing: border-box; } dl { overflow:hidden; margin:20px auto 0; line-height:2; font-size:12px; } dt { width:30%; float:left; } dt,dd { margin-bottom:14px; } dd { padding-left:30%; padding-bottom:10px; border-bottom:1px solid #CCC; background:url(dd_bg.gif) no-repeat 26% 6px; } dd a { color:#03C; } dd a:hover { text-decoration:underline; } @media screen and (max-width:959px) { .inner { width:100%; margin:0 auto; } #news { width:100%; float: none; margin-bottom:40px; } #new_info { width:100%; float: none; } } @media screen and (max-width:640px) { .inner { padding: 0; margin:0 auto; } #news h2, #new_info h2 { font-size:16px; background: #D8D8D8; padding: 10px; } dt { width:100%; float:none; padding-left: 10px; } dt,dd { margin-bottom:10px; box-sizing: border-box; } dd { padding-left:20px; padding-bottom:10px; border-bottom:1px solid #CCC; background:url(dd_bg.gif) no-repeat 10px 6px; } }