読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

既存サイトのトレース ニュースリリース部分

レスポンシブデザイン

PCレイアウト
f:id:yachin29:20170224015445p:plain


タブレット(959px〜641px)
f:id:yachin29:20170224015224p:plain



スマホ時(640px以下)
f:id:yachin29:20170224130834p:plain


このようなニュースリリース部分はレスポンシブを考えると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メソッド
指定した要素の兄弟要素(同じ階層の要素)を選択します。引数を設定しない場合はすべての兄弟要素を選択します。


f:id:yachin29:20170224130454p:plain

www.jquerystudy.info





文章構造

<div class="inner">
<div id="news">
<h2>ニュースリリース</h2>
<dl>
<dt>2017年2月16日</dt>
<dd><a href="#">「ブルックリン ラガー」の飲食店向け大樽・家庭向け缶をキリンビール社が全国で発売</a></dd>
<dt>2017年2月16日</dt>
<dd><a href="#">「よなよなエール」(ヤッホーブルーイング社)の大樽を、キリンビール社が全国の飲食店にて販売開始</a></dd>
<dt>2017年2月16日</dt>
<dd><a href="#">「CLUB SVB」を創設</a></dd>
<dt>2017年2月15日</dt>
<dd><a href="#">「キリン 午後の紅茶」×「グリコ ポッキー」のコラボ第3弾 史上初「道頓堀グリコサイン」に「午後の紅茶」登場!?</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">「カッシェロ・デル・ディアブロ」のキャンペーンを3月14日(火)より開始!~絶対もらえる!悪魔の晩餐グルメキャンペーン~</a></dd>
<dt>2017年2月9日</dt>
<dd><a href="#">「キリン 午後の紅茶 ストレートティー」500ml紙パック3月7日(火)リニューアル発売</a></dd>
<dt>2017年2月9日</dt>
<dd><a href="#">「シャトー・メルシャン マリコ・ヴィンヤード シラー 2013」、「同 マリコ・ヴィンヤード ソーヴィニヨン・ブラン 2015」、「同 北信シャルドネ RGC 千曲川左岸収穫 2015」が「Asian Wine Review 2017」にて金賞を受賞</a></dd>
</dl>
</div>

<div id="new_info">
<h2>新着情報</h2>
<dl>
<dt>2017年2月14日</dt>
<dd><a href="#">「キリン サプリ レモン」を新発売!(2月14日発売)</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">「ワールドセレクション」を新発売!(2月14日発売)</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">「キリン 氷結®ストロング 佐藤錦」を新発売!(2月14日発売)</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">キリンクイズ検定-第21回 キリン 午後の紅茶 いちごティー編- クイズに答えてキリン 午後の紅茶 いちごティーを当てよう!</a></dd>
<dt>2017年2月14日</dt>
<dd><a href="#">『キリン淡麗 絶対もらえるキャンペーン』情報公開!</a></dd>
<dt>2017年2月13日</dt>
<dd><a href="#">「CSV活動」トップをリニューアル!</a></dd>
<dt>2017年2月7日</dt>
<dd><a href="#">キリン食生活文化研究所 あなたのくらしのアンケート「自由時間の過ごし方」公開中!</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;
}
}