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

既存のサイトを真似てみる(Webデザインスケッチ)

一旦復習

  1. テキストや画像を並べるには?
  2. 並べたい要素すべてに対して、cssでfloat: left;を指定してあげる。並べたい要素の親要素には、必ず.cfクラスを付けてあげる

  3. 例えばどうやるの?

  4. こないだのメニュー↓みたいなのをやろうとしたとします。 f:id:dorak:20161122142157p:plain

これは本当に単純な3列レイアウトなので、 こんなHTMLを組んでみます。

<div class="nav cf">
  <div class="menu">HOME</div>
  <div class="menu">FRENCH CUISSE x VSCO</div>
  <div class="menu">ARCHIVE</div>
</div>
.nav {
  width: 980px; /*←なんでもいい*/
}

.menu {
  float: left;
  width: 33.33333%; /*←3列にしたいから*/
}

では続きをやってみましょう。

概要

今回は既存のWebサイトをそっくりそのまま真似てみます。 これにより、実際のサイトをつくる技術を身につけられるほか、デザインの能力を高めることができます。

題材

http://www.frenchcuisse.com/ f:id:dorak:20160602101301p:plain

身につけられること

  • 白を貴重とし、セリフ体をベースとしたシンプルかつかわいい、雑誌のようなデザイン
  • 写真を列で並べる技術
  • ヘッダーメニュー、フッターメニュー、ページャー(ページ送りの数字のこと)を用いた本格的なwebサイトをつくる技術

ステップ(いつものステップです)

  • プロジェクトフォルダfrenchを作成する
  • french内にindex.html、assetsフォルダを作成する
  • assetsフォルダをつくる
  • assetsフォルダの中にcssフォルダとimagesフォルダをつくる
  • 必要な画像をimagesフォルダに入れる
  • index.htmlを編集
  • app.cssを編集
  • ブラウザで確認
  • 完成!

はじめる前に

今回は、すでに出来上がったサイトが課題なので、すでに出来上がったHTMLやCSS、つまり答えを見ることが出来ます。 それは「要素を検証」ということで実現可能です。 なお、Google Chromeが一番使いやすいので、基本的にはGoogle Chromeを使用してください。

要素を検証

まず、どんなHTMLやCSSをつかってるんだろう・・・と思ったサイトにアクセスしてください。 アクセスしたら、cmd + shift + cを押しましょう。Windowsctrl + shift + cです。すると、下記のような画面が立ち上がります。

f:id:dorak:20160602102457p:plain

右側です。なんだよこれみたいな見た目だと思いますが、よくよく見るとただのHTMLです。<div>とかがあって、その中に文章とかのコンテンツがあるだけです。

で、どんなCSSを使っているのかは、下記手順で可能です。

  1. 要素を検証ウィンドウの一番上の矢印アイコン(カーソルアイコン?)をクリック
  2. すると、下記画像みたいな感じで、ページの特定の場所がどのようなHTMLとCSSでできているかを表示してくれます。f:id:dorak:20160602102902p:plain

上がHTML、下がHTMLに対応するCSSです。

f:id:dorak:20160602102801p:plain

基本的にはこれを見ながらやっていけば大丈夫・・・ですが、 それだとただ書き写しているだけなので、このWebサイトをHTMLでつくるにはどうしたら良いか、考えながらやってみましょう。

HTMLをつくる時のヒント

PhotoshopIllustratorでもそうだと思いますが、デザインをつくるときは必ずグループをつくると思います。 例えば人のイラストの場合、顔の中でも目や髪は「目」や「髪」といったグループをつくって、塗りを足していったりするのではないでしょうか。 なぜそうするのかというと、そのほうが編集しやすいからですね。 これはHTMLも同じで、HTMLを組もうと思った時、現場ではまずつくりたいデザインを分解します。分解すると、それがグループになります。グループ、グループと言ってますが、HTMLの場合は<div>とかで囲ってあげればグループになります。余談だとPhotoshopの場合はcmd + gでグループ化できますね。それがHTMLだと<div>で囲うって感じです。

で、今回つくりたいのはこれ↓ f:id:dorak:20160602101301p:plain なので、無計画にHTMLを書いていく前に、把握しやすいようにグループにしてあげます。

グループ化

取り急ぎ、僕ならどうグループ化するか。 こんなかんじでいかがでしょうか。

f:id:dorak:20160602103725p:plain

グループ化したら、名前を付けましょう。イラスト書くときに「目」とか「輪郭」ってグループつくるのと同じで、グループ名は好きなものでいいです。 僕は取り急ぎ下記のようにグループ名を付けました。

f:id:dorak:20160602105800j:plain

どうでしょう。 グループ名をつけたら、さっそくHTMLを書いていっちゃいましょう。

まずはお決まりの記述をしてください。前回、前々回のテキストにHTMLに絶対必要な記述が書いてあるので、復習が必要な場合は復習をお願いします。

さて、グループを書きます。

<div class="header">
  
</div>

<div class="logo">
</div>

<div class="lists">

</div>


<div class="filter">

</div>

<div class="pager">

</div>


<div class="footer">

</div>

こんなかんじでしょうか。以降は、わからなくなったら都度要素の検証をしつつ、サイトを完成させましょう。

僕はこう書いたHTML

<html lang="ja">

<head>
  <title>none</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>

<body>
  <header class="cf">
    <div>HOME</div>
    <div>HOME</div>
    <div>HOME</div>
  </header>
  <div class="logoarea">
    FRENCH CUISSE
  </div>
  <div class="posts">

    <div class="post">
      <div class="post-image">
        <img src="assets/images/1.jpg">
      </div>
      <div class="caption">
        TEXT
      </div>
    </div>

    <div class="post">
      <div class="post-image">
        <img src="assets/images/1.jpg">
      </div>
      <div class="caption">
        TEXT
      </div>
    </div>

    <div class="post">
      <div class="post-image">
        <img src="assets/images/1.jpg">
      </div>
      <div class="caption">
        TEXT
      </div>
    </div>

  </div>
</body>
</html>

以下のCSSをapp.cssのあたまに付けてください

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

* {
  box-sizing: border-box;
}

html {
  background: #f8f8f8;
}

header {
  background: #fff;
}

header div {
  float: left; /* header下のdivタグをぜんぶ横並びに */
  width: 33.333333%; /* divタグの幅は3等分 */
  text-align: center; /* 文字は中央寄せ */
  line-height: 4; /* 行の高さを確保 */

.logoarea {
  text-align: center;
  line-height: 8;
  max-width: 968px;
  margin: 0 auto;
}

img {
  width: 100%;
}

.posts {
  max-width: 968px;
  margin: 0 auto;
}

.post {
  float: left;
  width: 33.33333%;
  padding: 0 10px;
}

.post-image {
  border: 20px solid #fff;
}

.caption {
  font-size: 20px;
  margin-top: 20px;
  text-align: center;
}

}

もう終わった人は次のスケッチ

f:id:dorak:20161122141740p:plain

www.instagram.com

これも完全に同じです。 要は、2列とか3列のレイアウトをつくれたらこのレイアウトもつくれるということです。