モックアップ作成 – 共通部分の作りこみ

モックアップ用HTML作成の続きです。

本日はサイトの共通部分

  • サイトヘッダー(サイトロゴ部分)
  • サイドバー(メニューやウィジェットの表示部分)
  • フッター

のHTMLコーディングを行いました。

以下は sigle.html の中身。

 

サイドバーのメニューやウィジェットは、WordPressの「カスタムメニュー」や「カスタムウィジェット」の機能でカスタマイズできるようにする予定なので、該当部分のHTMLはそれらの機能が出力するTHMLに準拠させています(要は、Twenty Fifteenが出力している該当部分のHTMLのコピペです)。

 

今回作り込んだHTMLをブラウザで表示させると以下のようになります(スタイルシートを定義していないので素っ気ない画面になっています)。

mockup 2015/9/10

次回はスタイルシートをいじって、それなりの見た目になるようにしてみたいと思います。

モックアップ用HTMLの雛形を作成

とってもしばらくぶりの更新です。

 

本日はモックアップ用HTMLの雛形を作ってみました。

「agito-labs」というフォルダを作り、その中に「single.html」と「style.css」の2つのファイルを作成しています。

※ 利用したテキストエディタは SublimeText3 です

html base

single.html の内容は以下(HTML要素の構成は TwentyFifteen を参考にしています)。

今後はこれに追記するカタチでモックアップのHTMLコーディングを行っていきます。

また style.css のほうにも随時追記していく予定です。

 

以下、現時点の single.html をブラウザで表示してみたところ。まだ真っ白です。

preview 2015/9/8