HTMLスケッチでHTML/CSSトレーニング(Backlog編)

HTMLスケッチとは

本記事で言う「HTML」スケッチは、概ね以下の行為を指すものとする

  • 実在するWebページをHTMLとCSSを使って自らの手で再現する
  • 見本となるWebページは単一のページとし、それのソースコードを参照せずに、再現する
  • 再現に使用する手法/技術は、見本に合わせる必要はなく、自分の持っている知識から試行錯誤して再現する

参考 プロデザイナーが実践するHTML/CSSスキルアップ術

HTMLスケッチを行うメリット

  • HTML/CSSのスキル底上げには実際にモノを作るのが一番だが、何を作ったら良いかわからない時に手っ取り早い
  • 公開されているWebページがどのような構造で実装されているかが見えてくるので、Webデザイン力の底上げにもなる
  • 自分でWebデザインした場合には使わないようなレイアウト/スタイルを使うことも出てくるので、技術の幅が広がる

フロントエンジニアがWebデザインスキルを身につける必要はあるか?

これについては色々な意見が飛び交ってるが、個人的にはモダンなフロントエンジニアになるためにはWebデザインスキルも必須だと思う。

最近はリッチクライアント(死語?)が当たり前になってきたため、クライアント側でも各種ライブラリ/フレームワークの導入が一般的になってきてるが、その中でもReactやVue(Component)など、ビューとそのロジックが密になったライブラリ/フレームワークを使う場面も多くなって来ている。ビューとロジックが密ということは、それだけエンジニアとデザイナの作業範囲を分離しづらいということだ。

そうなると、デザインの諸々をデザイナに投げて放ったらかすというもの難しくなってくるため、エンジニアが最低限のデザインを施す必要がある。

よって、特にフロントエンジニアにもWebデザインスキルは必須になってくる(と思う)ので、本記事ではデザイナでなくフロントエンジニアの視点でHTMLスケッチを行う

HTMLスケッチのルール

以下のルールは本記事でのルールなので、実践する場合は各自やりやすいようにルール作りをしたほうが良い

  • 見本は既存Webサービスの特定の1画面をスクリーンショットで収めた範囲とする
  • 基本的にはスクリーンショットの画面を再現し、見えない範囲(オンマウスで見た目が変わるなど)については対応しない
  • JavaScriptが影響する部分は対応しない
  • bootstrapなどのCSSフレームワークの利用を禁止
  • 見本のソースコードを閲覧することは原則禁止する(スケッチ後に答え合わせとして確認する)
  • Saasを使う。今時生のCSSを直接書くのもナンセンスなので。と言ってもネスト構造ぐらいしか使う予定はない
  • 画像ファイルは見本のページから直接ダウンロードする(学習用なので見逃してください)
  • アイコンファイルは、今回はfontawesomeを用いて見本に近いアイコンを利用する
  • ブラウザ対応はそこまで拘らず、とりあえず見本撮影時に用いたChromeのみで検証する

今回の見本

例によってBacklogが好きなのでBacklogの課題一覧画面を対象とする。初めてのHTMLスケッチなので比較的簡単そうで、かつ身近な普段から見慣れている画面を見本とすることにした。

以下が今回見本とするスクリーンショット

作業環境の構築

以下の環境で作業を行う

要素 バージョン
Debian 8.6
sass 3.5.1
Compass 1.0.3

sassのインストール

sassはcssのプリプロセッサで、cssの弱い部分などを改良したメタ言語で書かれたファイルをcssに変換する。
簡単に言えばcssを効率的に記述するために必要なもの。

sassはgemライブラリで公開されてるので、rubyとgemが必要。本記事では割愛するので必要に応じてそれらもインストールすること。

vagrant$ sudo gem install sass

Compassのインストール

Compassは、sassで記述されたファイルの変更を検知し、自動でsassを実行し、変換後のcssファイルを生成してくれるツール。これが無いとファイルを変更するたびに変換コマンドを叩く必要があるので実質必須。

こちらもgemを用いてインストールする

vagrant$ sudo gem install compass

動作確認

compass createで作業環境をまとめて作成できる。

vagrant$ compass create
directory sass/
directory stylesheets/
   create config.rb
   create sass/screen.scss
   create sass/print.scss
   create sass/ie.scss
    write stylesheets/ie.css
    write stylesheets/print.css
    write stylesheets/screen.css
(以下略)

が、今回はscssファイル1個に全てまとめるつもりなので、生成されたsassファイルは消しておく

vagrant$ rm sass/*

compassを実行。watchコマンドで常駐化して変更を検知してくれる

vagrant$ compass watch
Compass is watching for changes. Press Ctrl-C to Stop.

この状態でsassディレクトリいかに、sassファイル(style.sass)を作成する

body {
  .hoge {
    font-size: 12px;
  }
  .fuga {
    font-size: 14px;
  }
}

するとcompassがそれを検知して

Compass is watching for changes. Press Ctrl-C to Stop.
  created sass/style.scss
    write stylesheets/style.css

自動でstyleseets/style.cssを生成してくれる

/* line 2, ../sass/style.scss */
body .hoge {
  font-size: 12px;
}
/* line 5, ../sass/style.scss */
body .fuga {
  font-size: 14px;
}

あとはこの生成されたcssファイルを参照するHTMLファイルを用意すれば準備完了

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
  </head>
  <body>
  </body>
</html>

HTMLスケッチの実施

大枠の実装

まずはページ全体の大枠をマークアップすることに。見本から見える必要な構造を想像してHTMLに書き出す(コードが長いのでGithub参照)

ある程度全体構造を意識しながら主にdivで囲って、適切なclassを振ってCSSの適用に備えている。

まだスタイルがまったく適用されていないので、そのまま画面に表示されるだけ。色々足りてない構造もあるが、それは随時追加していくものとする。
ここからスタイルの適用と、それに応じてHTMLの書き換えも行っていく。

カラム割

ページ全体を以下の3カラム構成にする

  • ヘッダー
  • サイドメニュー
  • コンテンツ

カラム割の流行りはflexboxらしいけどCSS弱者なので先ずはfloatを使ったカラム割の経験を積む。サイドメニューの背景には画像ファイルがあったのでBacklogから拝借する。コンテンツ内にもヘッダーがあるので、そこにはprojectと名付けて50px確保する。

body {
  margin:  0;
  padding: 0;
  border:  0;
}
.header {
  height: 50px;
  background-color: #ebf0f2;
}
.wrap {
  .sidebar {
    width: 200px;
    height: 100%;
    float: left;
    background-color: #3b9dbd;
    background-image: url('../images/bg_dot.png');
  }

  .content {
    margin-left: 200px;
    background-color: #f0f0f0;
    .project {
      height: 50px;
      background-color: white;
    }
  }
}

Github

HTMLも微修正して以下の感じに。少しだけ全体像が見えてくる。

サイドメニューの実装

ぱっと見一番簡単そうなのがサイドメニューなので安直にこちらから手を出す。HTMLは、メニュー項目をul/liで記述し、アイコンはfontawsomeを利用する。

      <div class="sidebar">
        <div class="burger"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></div>
        <ul class="sidemenu">
          <li><i class="fa fa-home fa-lg" aria-hidden="true"></i><span>ホーム</span></li>
          <li><i class="fa fa-list fa-lg" aria-hidden="true"></i><span>課題</span></li>
          <li><i class="fa fa-plus fa-lg" aria-hidden="true"></i><span>課題の追加</span></li>
          <li><i class="fa fa-wikipedia-w fa-lg" aria-hidden="true"></i><span>Wiki</span></li>
          <li><i class="fa fa-files-o fa-lg" aria-hidden="true"></i><span>ファイル</span></li>
          <li><i class="fa fa-git fa-lg" aria-hidden="true"></i><span>Git</span></li>
          <li><i class="fa fa-cog fa-lg" aria-hidden="true"></i><span>プロジェクト設定</span></li>
        </ul>
      </div>
    .burger {
      text-align: right;
      .fa {
        padding: 10 20 10 0;
      }
    }
    ul.sidemenu {
      padding-left: 0;
      font-size: 95%;
      list-style-type: none;
      li {
        padding-left: 12px;
        margin: 20 0 20 0;
        .fa {
          width: 20px;
        }
        span {
          padding-left: 15px;
        }
      }
    }
  }

Github
まだ比較的まともにCSSも書けてそれっぽい画面が出来上がってる。

ヘッダーの実装

コンテンツは最後として、次にヘッダーに着手する。結果から言えばここが一番苦労した。CSSよくわからない。ユーザアイコン的な画像はBacklogから拝借。li要素を横並びに表示するテクニックを身に着けたのでさっそく使ってる。

    <div class="header">
      <img class="logo" src="images/logo.svg">
      <ul class="menus">
        <li>ダッシュボード</li>
        <li>プロジェクト</li>
        <li>最近みた課題</li>
        <li>最近見たWiki</li>
        <li>フィルタ</li>
      </ul>
      <ul class="icons">
        <li><i class="fa fa-ellipsis-h fa-lg" aria-hidden="true"></i></li>
        <li><i class="fa fa-plus fa-lg" aria-hidden="true"></i></li>
        <li><i class="fa fa-eye fa-lg" aria-hidden="true"></i></li>
        <li><i class="fa fa-bell fa-lg" aria-hidden="true"></i></li>
        <li><i class="fa fa-search fa-lg" aria-hidden="true"></i></li>
        <li class="bars"><i class="fa fa-bars fa-lg" aria-hidden="true"></i></li>
        <li>
          <img class="user-menu" src="images/user.gif">
          <i class="fa fa-angle-down" aria-hidden="true"></i>
        </li>
      </ul>
    </div>
.header {
  background-color: #ebf0f2;
  * {
    vertical-align: middle;
  }
  ul {
    padding: 0;
    margin: 10px 0 10px 0;
    list-style-type: none;
    display: inline-block;
    li {
      display: inline-block;
      margin-left: 12px;
    }
  }
  img {
    width: 30px;
    max-height: 100%;
  }
  img.logo {
    padding-left: 20px;
  }
  .menus {
    font-size: 95%;
    width: 70%;
  }
  .icons {
    width: 25%;
    color: gray;
    text-align: right;
    .bars {
      padding-left: 20px;
      border-left: 1px solid gray;
    }
  }
}

Github

課題一覧の実装

メインの部分。この辺から妥協が生まれる。細かい部分を合わせるのが難しくなってきて、ゴリ押し気味なスタイリングが増えてくる。
テーブルは普通にtableタグを用いて、列単位で装飾。聞くところによるとTableの内部要素(tr/td)にmarginやpaddingを設定するのはナンセンスらしいけど、それを避けて装飾するのが上手く行かなかったので妥協。

        <div class="issues">
          <table>
            <thead>
              <tr>
                <th>種別</th>
                <th>キー</th>
                <th>件名</th>
                <th>状態</th>
                <th>カテゴリー</th>
                <th>登録日</th>
                <th>更新日</th>
                <th>登録者</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td><div class="task mark">タスク</div></td>
                <td><a href="">DEV-240</a></td>
                <td>githubのコミットログを@nullでツイートする方法の検討</td>
                <td><div class="status mark">未対応</div></td>
                <td>開発関係</td>
                <td>2017/07/30</td>
                <td>2017/07/30</td>
                <td class="user">
                  <img class="user-menu" src="images/user.gif">
                  <span>sa2knight</span>
                </td>
              </tr>
             <tr>
                <td><div class="task mark">タスク</div></td>
                <td><a href="">DEV-237</a></td>
                <td>vimでもっと強力なコード補完を導入する</td>
                <td><div class="status mark">未対応</div></td>
                <td>開発関係</td>
                <td>2017/07/30</td>
                <td>2017/07/30</td>
                <td class="user">
                  <img class="user-menu" src="images/user.gif">
                  <span>sa2knight</span>
                </td>
              </tr>
             <tr>
                <td><div class="task mark">タスク</div></td>
                <td><a href="">DEV-235</a></td>
                <td>[でぐろぐ]元ツイートページから画像ファイルのパスを抜き出すロジック</td>
                <td><div class="status mark">未対応</div></td>
                <td>開発関係</td>
                <td>2017/07/30</td>
                <td>2017/07/30</td>
                <td class="user">
                  <img class="user-menu" src="images/user.gif">
                  <span>sa2knight</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
    .issues {
      padding: 0 30 0 30;
      table {
        width: 100%;
        border: solid 1px #c2c2c2;
        border-radius:   4px;
        border-collapse: collapse;
        thead {
          background-color: white;
          color: #00759b;
          font-size: 85%;
          tr {
            border-bottom: 2px solid #ccc;
          }
          th {
            padding: 7px 0px 7px 0px;
          }
        }
        tbody {
          font-size: 80%;
          a {
            color: #00759b;
            text-decoration: none;
          }
          tr {
            border-collapse: separate;
          }
          tr:nth-child(even) {
            background-color: #f6f6f6;
          }
          tr:nth-child(odd) {
            background-color: white;
          }
          td {
            padding: 5px 15px 5px 15px;
          }
          td > .mark {
            text-align: center;
            color: white;
            padding: 0 10 0 10;
            border-radius: 20px;
          }
          td > .task {
            background-color: #b0be3c;
          }
          td > .status {
            background-color: #ed8077;
          }
          td.user {
            img {
              vertical-align: middle;
              width:  24px;
              height: 24px;
            }
          }
        }
      }
    }

Github
ゴリ押したけど見た目はそれっぽい

課題一覧周辺のUI実装

ページャみたいなモノとかボタンとかのスタイリング。この当たりから作業がとても地味でCSSも汚くなってきた。
コードの修正が分散してきたのでGithub参照

検索フォームの実装とその他修正

あとは検索フォームをスタイリングして全体の仕上げをして完成。
最終的な成果物はこちら

上が今回作成したページで、下が見本となる本家Backlog。比べてみると中国産のパチもんみたいにも見えるが、概ね同じように出来ているので個人的には満足。

所感

良かった点

  • スケッチの過程でスタイリングに関する知らなかった定石/手法を身につけることができた
  • 最後にBacklogのCSSを見て答え合わせした中で、知らなかった属性などを学ぶことができた
  • 自分で一からスタイリングする経験が少なかったので、そういった経験を得られた

失敗した点

  • flota,absolute,text-alignなど、現在はあまり使われないスタイリング手法に頼りすぎて、変更に弱いCSSになったと自負してる。もう少しモダンなスタイリング技術を学びたい
  • BacklogのようなWebサービスは、通常動的にページが生成されるので必然的にHTMLの可読性が低くなるので、参考にしづらかった。俳優のホームページなど、静的なHTMLページを見本にしたほうが勉強になると思う
  • ファイルを更新した後にブラウザも更新するのが面倒だった。ブラウザのオートリロードツールなどを導入すればもう少し楽だったかも

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です