51日目 | web制作

本日は…

■HTML5のドリル
思い出せる順に…
1.section
2.nav
3.header
4.figure
5.atlibute
6.aside
7.placeholder
8.autofocus
9.required
10.DTD
こんな感じの回答だった記憶（順不同）

■横型アコーディオン
縦のものより横に広がるほうが意外と使い勝手がある

<div id="accordion">
<dl>
<dt><span>1</span></dt>
<dd>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Aenean commodo ligula eget dolor.
  Aenean massa. Cum sociis natoque penatibus et magnis 
  dis parturient montes, nascetur ridiculus mus.
</dd>
<dt><span>2</span></dt>
<dd>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Aenean commodo ligula eget dolor.
  Aenean massa. Cum sociis natoque penatibus et magnis 
  dis parturient montes, nascetur ridiculus mus.
</dd>
<dt><span>3</span></dt>
<dd>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
 Aenean commodo ligula eget dolor.
  Aenean massa. Cum sociis natoque penatibus et magnis 
  dis parturient montes, nascetur ridiculus mus.
</dd>
</dl>
</div>

html自体は必要事項だけでシンプルに

#accordion {
  width: 800px;
  height: 300px;
  margin: 50px auto;
  overflow: hidden;
}
dl {
  width: 900px;
  height: 300px;
}
dt {
  width: 35px;
  height: 300px;
  float: left;
  background: #000;
  color: #fff;
  border-right: 1px solid #fff;
}
dt span {
  display: block;
  width:50px;
  padding: 10px;
}
dt span.over {
  cursor:pointe;
}
dt span.selected {
  cursor: default;
}
dd {
  margin:0;
  width: 695px;
  height:300px;
  float: left;
  background: #ccc;
  overflow:hidden;
}
dd p {
  width:655px;
  text-indent:1em;
  padding: 20px;
  margin:0;
}

必要最低限の装飾で

$(function(){
  $('dd:not(:first)').css('width','0px');
  $('dt:first span').addClass('selected');
  $('dl dt').click(function(){
    if($('+dd',this).css('width')=='0px'){
      $('dt:has(.selected) +dd').animate({'width':'0px'});
      $('+dd',this).animate({'width':'695px'});
      $('dt span.selected').removeClass('selected');
      $('span',this).addClass('selected');
    }		
  });
});

クラスselectedがついたものを操作しているというのがポイント
→最初は一番最初のdtにselectedを付けている
クリックされたものの隣のddが幅０pxであるとき
dt.selectの隣のddは幅を0にし、クリックしたものの隣のddの幅は695に
selectedのついていたdtからはselectedを葉寿司、クリックされたもののspanに新たにselectedを追加

これによって横に広がるアコーディオンが完成

■企業サイトプレゼン
　キーワード設計
　　…サービスがありがちなら、その具体的な形容詞で
　　ex)家族　天然　などの特色を出す