プロフィールページを整えた

ひそかに自分のプロフィールページを用意しているのですが、2013年に雑に作ったまま魔放置していて味気ない感じになっていたので多少整備することにしました。

https://takayukiatkwsk.github.io

Pure

purecss.io

Yahooが公開しているPureというCSSライブラリがあって、レスポンシブなレイアウトを構成するのに必要なものが最低限用意されています。また、ファイルサイズの小ささ(公式によると3.7KB)というのが特徴です。1〜2年前から良さげと思って注目していながら使えずにいたのですが、2016年末にようやく使う機会が訪れました。

グリッド

まずグリッドを使ってレイアウトを整えました。手軽にグリッド使えるのいいですね。グリッド用のクラス pure-g とユニット(グリッド内の個々のコンテンツを格納するもの)用のクラス pure-u-* が用意されています。ユニットの幅は pure-u-* の * で指定することができて、 pure-u-1-2 であれば全体の1/2、pure-u-3-5 ならば3/5という風な命名規則となっていて分かりやすいです。

また、レスポンシブにすることも可能で、grids-responsive-min.css を追加で読み込みメディアクエリ用のクラスを指定します。下の例で言うと pure-u-md-2-5 というのが横幅 768px 以上のときに適用されてグリッド内で2/5の幅を使います。横幅が768pxより小さい場合は pure-u-1 が適用されてグリッド全体を占めるように表示されます。md の他にも幅を表すキーが用意されているのでメディアによって柔軟な表現をすることもできそうです。

以下にAbout meセクションのhtmlを挙げました。PCなんかで見た場合アイコン画像と文章が横並びで表示されますが、スマホから見た場合は縦並びで表示されます。

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-2-5">
    <div class="inner-box">
      <img src="images/icon2.png" class="pure-img icon">
    </div>
  </div>
  <div class="pure-u-1 pure-u-md-3-5">
    <div class="inner-box">
      <p>TAKAyukiatkwsk(たかゆきあっとかわさき)です。にぼしという名前でも活動しています。</p>
      <p>1984年生まれ、金沢出身、東京在住のち金沢に戻ってきました。Webプログラマ、Scalaを主に使っています。Infrastructure as Code/数学が気になってます。</p>
      <p>ビール好き、猫を眺めていたい。フロンターレとツエーゲンとベガルタレディースを主に応援しています。</p>
    </div>
  </div>
</div>

Pureのグリッドシステムについて詳しくはこちらを参照してください。 purecss.io

メニュー

外部リンクのリストをどうしようかと思っていたのですが、Pureでメニューモジュールが用意されていたので使ってみることにしました。メニューが適切なのか？という話はあるかもしれませんが、使ってみたかったんや！ということで。pure-menu pure-menu-list pure-menu-item pure-menu-link というメニュー用のクラスが用意されています。これらのクラスを外側からよしなに指定してあげるとメニューができあがります。以下例です。menu-width クラスは自分で用意したもので、display: inline-block をひもづけています。メニューの幅をli要素内の文字列の幅に抑えるために指定しています。

<div class="pure-menu menu-width">
  <ul class="pure-menu-list">
    <li class="pure-menu-item"><a class="pure-menu-link" href="http://blogaomu21.blog91.fc2.com">Old blog</a></li>
    <li class="pure-menu-item"><a class="pure-menu-link" href="https://twitter.com/TAKAyuki_atkwsk">Twitter (@TAKAyuki_atkwsk)</a></li>
    <li class="pure-menu-item"><a class="pure-menu-link" href="https://github.com/TAKAyukiatkwsk">GitHub (@TAKAyukiatkwsk)</a></li>
    <li class="pure-menu-item"><a class="pure-menu-link" href="http://qiita.com/TAKAyuki_atkwsk">Qiita (TAKAyuki_atkwsk)</a></li>
    <li class="pure-menu-item"><a class="pure-menu-link" href="http://b.hatena.ne.jp/TAKAyuki_atkwsk/">はてなブックマーク (TAKAyuki_atkwsk)</a></li>
    <li class="pure-menu-item"><a class="pure-menu-link" href="http://amzn.asia/ewqSBdx">ほしい物リスト</a></li>
  </ul>
</div>

Pureのメニューについて詳しくはこちらを参照してください。 purecss.io

終わりに

今回はPureを使ってプロフィールページの表示を整えました。お手軽にグリッドを使いたいならばBootstrapよりもいいなあという気持ちです。修正前のページで計測するのを忘れていたので比較できないのですが、モバイルフレンドリーになっていました。