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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

課題:パスタ 解答例

提出条件

  • フォルダー名「pasta_yourname」
  • 圧縮後メールに添付
  • データが重すぎる場合は、GoogleDriveまたは他の方法で(mp4データを除外など)
  • 内容が思いどおりになっていない場合は、そのポイントをメールに書く

目的

  1. カラムレイアウトの理解
  2. floatを使ったレイアウトでの問題を解決する
  3. CSS3の記述(border-radius、box-shadow、text-shadow)
  4. HTML5新要素(video)

手順

(1)適切なマークアップ

  • 正しく文書構造を構築する
  • 見栄えのための適当なdiv要素・span要素を多用しない(あくまでも見た目のためにあるタグです)
  • 本文と見出しの関係を優先的に作る
  • 本文の段落では説明しきれない部分に箇条書きをつくる
  • 箇条書きは、特別な意味をもたない場合は ul要素を使用する
  • 意味がある箇条書きは、dl要素を使用する


(2)意味付けにあわせた適切なグループにする

  • div要素でレイアウト用のセレクタ名(id名・class名)を付与する
  • セレクタ名は、その単語のみで意味が通じるようにする(意味の無い単なる記号的な文字にはしないこと)


(3)文法チェック

  • 何も意味付けをしていなければ、エラーなしになります
  • それでは意味がありません。正しいアウトライン構造を構築した後にミスがないかをチェックするために行います


(4)CSSはリセットから

  • CSSファイル名は、必ず「style.css
  • 外部のリセット(海外サイトなどの事例)を使用せずに、必ず自分が記述した要素のみをリセットすること
  • リセット後に、設定通りになっているかを必ず確認する(この時点で問題がある場合は、リセットの記述を見直す)
  • 次の外枠の要素を決める(特に幅の値)
  • floatは基本的に「left」
  • レイアウト的に必然性がある場合のみ「right」
  • floatどおしの空きは、leftが基本なので「margin-left」を設定し、最も左側にある要素に「:first-child」を設定し値を「0」にする
  • floatをしている親要素には「overflow:hidden;」を必ず指定する
  • clearは、インラインレベル要素の floatによる回り込みの解除にのみ設定する
  • floatのネスト構造の場合、div要素は最低限にする
  • imgで記述するか背景画像にするかは、alt属性の価値によって決める(隠し文字よりは、alt属性を優先する)
  • レイアウトの空きは、上下の場合は「margin-bottom」で指定することが基本
  • 左右の空きは、paddingの必然性がなければ、marginを使用する
  • backgroundなどのショートハンドを設定する場合は、2以上の値が必要
  • 記述後のプレビューは、ひとつのブロック(グループ)を記述し終わってからにする
  • CSSの記述は、すでに終わっているところを変更して崩さないように注意する
  • 1行1行、すべての理由を正しく説明できるような設定にする
  • 意味の理解できない記述は、絶対にしない!
  • CSS Validation Service を使い検証をする
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>課題完成例:パスタとワインの店</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="img/logo.png" alt="atella"></h1>
<div id="nav">
<ul>
<li><a href="#"><img src="img/menu_concept.png" alt="concept"></a></li>
<li><a href="#"><img src="img/menu_pasta.png" alt="pasta"></a></li>
<li><a href="#"><img src="img/menu_drink.png" alt="drink"></a></li>
<li><a href="#"><img src="img/menu_side.png" alt="side"></a></li>
<li><a href="#"><img src="img/menu_access.png" alt="access"></a></li>
</ul>
</div><!-- /#nav -->
</div><!-- /#header -->
<div id="bannerMenu">
<ul>
<li><a href="#"><img src="img/subimage01.jpg" alt="Lunch"></a></li>
<li><a href="#"><img src="img/subimage02.jpg" alt="Pasta"></a></li>
<li><a href="#"><img src="img/subimage03.jpg" alt="Wine"></a></li>
</ul>
</div><!-- /#bannerMenu -->
<h2 class="info"><img src="img/campain.png" alt="現在実施中のキャンペーンやお得な情報"></h2>
<div id="wrapper">
<div id="mainContent">
<div id="recommend">
<h2><img src="img/todaypastaText.png" alt="Today's Pasta 今日の日替わりパスタ"></h2>
<p>ペンネアラビアータ<br>(ピリ辛トマトソースのペンネ)</p>
</div><!-- /#recommend -->
<div id="news">
<h2><img src="img/newsText.png" alt="news"></h2>
<dl>
<dt>2015.3.24</dt><dd>今年も冷製パスタをお出しし始めました</dd>
<dt>2015.3.18</dt><dd>トマトソースの作成ビデオを公開しました</dd>
</dl>
</div><!-- /#news -->
</div><!-- /#mainContent -->
<div id="subContent">
<h2><a href="#"><img src="img/coupon.png" alt="CouponTickets ランチセットご注文時ドリンク1杯無料"></a></h2>
<video width="270" height="152" poster="img/poster.jpg" controls >
<source src="img/pastaSauce.mp4" type="video/mp4">
<source src="img/pastaSauce.webm" type="video/webm">
</video>
</div><!-- /#subContent -->
</div><!-- /#wrapper -->
</div><!-- /#container -->
<div id="footer">
<p><small>&copy;2015 atella all right reserved.</small></p>
</div><!-- /#footer -->
</body>
</html>
@charset "utf-8";

/* reset */
html, body, h1, h2, p, ul, li, dl, dt, dd {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: none;
  vertical-align: bottom;
}

/* body */
body {
  font-size: 16px;
  color: #333;
  background: url(img/back.jpg) repeat;
}

/* layout */
#container {
  width: 980px;
  margin: 0 auto;
  background: #FFF;
}
#wrapper {
  overflow: hidden;
  width: 870px;
  margin: 0 auto;
  padding-bottom: 30px;
}
#footer {
  width: 980px;
  margin: 0 auto;
  padding:10px 0 20px 0;
  text-align: center;
  color: #6C922F;
}

/* #header */
#header h1 {
  width: 960px;
  height: 500px;
  padding-left: 20px;
  background: url(img/mainimage.jpg) no-repeat;
}

/* nav */
#nav ul {
  overflow: hidden;
  margin-bottom: 30px;
}
#nav li {
  float: left;
}
#bannerMenu ul {
  width: 870px;
  overflow: hidden;
  margin: 0 auto 30px auto;
}
#bannerMenu li {
  float: left;
  margin-left: 60px;
}
#bannerMenu li:first-child {
  margin-left: 0;
}

/* pseudo-class */
li a:hover, h2.info img:hover{
  opacity: 0.6;
}

/* info */
h2.info  {
  text-align: center;
  margin-bottom: 30px;
}
h2.info img {
  -webkit-box-shadow: 1px 1px 7px #666;
  box-shadow: 1px 1px 7px #666;
}

/* #mainContent */
#mainContent {
  float: left;
}
#recommend, #news {
  width: 560px;
  padding: 20px 0 10px 0;
  background: #F5F2EB;
  border: 1px solid #E1D8C7;
  overflow: hidden;
}
#recommend h2, #news h2 {
  text-align: center;
  margin-bottom: 20px;
}
#recommend {
  width: 300px;
  height: 124px;
  margin-bottom: 30px;
  padding-left: 260px;
  background: #FFF url(img/todaypasta.jpg) no-repeat left top;
}
#recommend p {
  font-weight: bold;
  text-shadow: 0px 1px 1px #666;
  text-align: center;
  line-height: 1.3;
 }
#news dl {
  text-align: left;
  margin-left: 30px;
}
#news dt {
  float: left;
}
#news dd {
  padding-left: 6em;
  margin-bottom: 15px;
}

/* #subContent */
#subContent {
  float: right;
}
#subContent h2 {
  margin-bottom: 30px;
}
#subContent h2 img {
  border-radius: 8px;
}


【補足】
reset CSS にdiv要素、small要素を含めることは、あくまでも自分の使用した要素を列挙するためだけです。その意味では、img要素、a要素も同様です。
ブロックレベル要素以外には、marginとpaddingの設定はできません。

CSS3の記述

  1. border-radius
  2. box-shadow
  3. text-shadow
border-radius
  • CSS の border-radius プロパティはボーダーの角を丸める
  • 角の曲線を 1 つか 2 つの半径で定義して、角の形を円か楕円にする



このプロパティが指定されると background によって与えられた背景も (たとえボックスにボーダーが指定されていなくても) 丸まる。

#box {
  border-radius: 1em/5em;
  /* これは次に等価である */
  border-top-left-radius: 1em 5em;
  border-top-right-radius: 1em 5em;
  border-bottom-right-radius: 1em 5em;
  border-bottom-left-radius: 1em 5em;
}
box-shadow
  • box-shadow プロパティは要素にドロップシャドウ効果を与えます
  • 影はカンマで区切ることで、複数指定できます
  • border-radius が指定されたボックスに適用された場合、影もその丸みを反映します
  • 複数の影が指定された場合、その重ね順は text-shadow と同様、最初に指定されたものが最も手前に描画されます


    box-shadow: 横ずれ 縦ずれ ぼかし 色;

text-shadow
  • text-shadow プロパティはテキストに影を追加します
  • 要素のテキストと text-decoration に適用する影効果をカンマ区切りのリストとして指定できます
  • それぞれの影はテキストに対するオフセットとして指定され、加えて任意で色とぼかしの半径を指定できます
  • 複数の影は手前から奥に適用され、最初に指定された影が上にきます


    text-shadow: 横ずれ 縦ずれ ぼかし 色;

video 要素

  • HTML5新要素(video 要素は HTML5 の一部として導入されました)
  • HTML もしくは XHTML 文書に映像コンテンツを埋め込むために用いられます
  • poster属性で動画のヒントとなる画像を表示す(ユーザー環境で利用できる動画が無い場合に表示させる画像ファイルを指定することができます。 poster属性で指定する画像は、ユーザーにその動画の内容がどのようなものかを知らせるヒントとなるものが適しています。 例えば、動画の開始画面の画像などです。)


《属性》

src属性動画ファイルを指定する
poster属性動画のヒントとなる画像を表示する
preload属性動画をあらかじめ読み込む(auto、metadata、none)
autoplay属性動画を自動再生する
loop属性ループ再生を指定する
controls属性インターフェースを表示する
width属性幅を指定する
height属性高さを指定する

<video controls>
  <source src="somevideo.webm" type="video/webm">
  <source src="somevideo.mp4" type="video/mp4">
  I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264.
  <!-- 古いブラウザで mp4 ビデオを再生するために、Flash プレイヤーを埋め込むことができます -->
</video>