ポートフォリオサイトっぽいモノを GitHub Pages に作ってみた

フリーランスとして活動する気もないし、会社にも自分のアカウントは表立って知らせていないので、何のために作ったのかは分からないが、プログラマとしてのアテクシを自己紹介する的なページを作ってみた。

GitHub Pages として公開したが、GitHub リポジトリ上でも README.md に同じような内容を Markdown 版として置いている。

ゴリッゴリにスタイルをキメて作ってはいない。昔ながらの、「HTML 文書」という点に重きを置いて、やたらと画像を使ったりしないタイプなのである。w

作った際に色々試したことがあったので、メモしておく。

目次

@neos21/neos-normalize を導入

実は About リポジトリ自体はしばらく前から作ってあったのだが、デザインを付けたりしていなかった。

今回はベースとして、拙作の Neo's Normalize (@neos21/neos-normalize) を導入した。自分が作るページのベースとしては、我ながら充分なノーマライズだ。

Grid レイアウトと Flexbox をまた練習

「My Websites / Blogs」と「Social」のセクションで、CSS Grid を使った。

「My Websites / Blogs」セクションは dl (dt・dd) 要素で作っているので、grid-area で名前を付けて配置した。IE11 に関しては Grid の書き方が大分違うので、-ms-grid-row と -ms-grid-column で要素ごとに配置した。

「Social」セクションはメディアクエリを仕込んでいて、ウィンドウ幅を狭めた時は「3列・2列」の2行で表示するようにした。その際、記念写真を撮る時みたいに、互い違いに配置したかった。

↓「*****」が各リンク。「___」がスペース。

*****___*****___*****
____*****___*****____

等間隔に配置したかったのだが、Grid で colspan 的なことをやるのが難しく、最終的には、2行目の2列を transform: translateX() でズラすことで対応した。

ul {
  $social-gap: 1rem;  // 要素間の隙間
  
  display: grid;
  grid-template-areas: "gh tw fb"
                       "ig in .";  // 2行目は transform でズラす
  gap: $social-gap;
  grid-gap: $social-gap;
  
  li {
    &:nth-child(1) { grid-area: gh; }  // 1行目・1列目 (左)
    &:nth-child(2) { grid-area: tw; }  // 1行目・2列目 (中央)
    &:nth-child(3) { grid-area: fb; }  // 1行目・3列目 (右)
    &:nth-child(4) { grid-area: ig; transform: translateX(50%);                        }  // 2行目・1列目と2列目の間
    &:nth-child(5) { grid-area: in; transform: translateX(calc(50% + #{$social-gap})); }  // 2行目・2列目と3列目の間 (余白分ズラす)
  }
}

かなり強引だが、他に良いやり方あるだろうか…。

「My Projects」セクションでは Flexbox を使っていて、dt・dd 要素のセットを1行として flex-wrap: wrap するようにした。こちらは特筆事項なし。

SCSS をビルドする環境をミニマムに作成

スタイルシートは SCSS で作成し、CSS にコンパイルするようにしたが、その環境をミニマムに作った。

変換自体は node-sass、ただし圧縮モードにすると BOM 付き UTF-8 になるので strip-bom で除去する必要がある。また、開発中は watch パッケージを使ってライブリロードするようにした。

Node.js スクリプトとして用意し、それを npm-scripts で実行するようにした。今回は styles.scss という1ファイルしか扱わないので、かなりミニマムというか、変数を使わずわざと分かりにくくなる書き方をしてみた。

require('watch').createMonitor('./',  {
  ignoreDotFiles: true
}, (monitor) => {
  monitor.files['./styles.scss'];
  monitor.on('changed', (func, current, prev) => {
    console.log('Changed', new Date());
    require('fs').writeFileSync(
      './styles.css',
      require('strip-bom')(
        require('node-sass').renderSync({
          file: './styles.scss',
          outputStyle: 'compressed'
        }).css.toString()
      )
    );
  });
});

どうも、.css なファイルを @import している SCSS ファイルをコンパイルしようとすると、node-sass がワーニングを出してくるのだが、イマイチ詳細や解決策が分からない。謎の node-sass-loader 的なパッケージを入れろとか書いてあったが、よく分からないのでワーニングごと無視することにした。現状上手く動いている。

画面右上の斜めの帯

GitHub リポジトリに飛べるリンクを、画面右上に斜めに配置してみた。

最近の CSS は本当に便利になったモノで、要素を斜めに配置するには transform: rotate(45deg) だけで良い。position: absolute 時の right プロパティが上手く解釈されないバグもないし、思ったとおりに実装して動いてくれる。w

スマホで :hover 時のアニメーションを有効にする

スマホでサイトを見ると、:hover による文字色のアニメーションの発火タイミングが遅い。タップしている間だけ :hover が発火するのではなく、その要素をタップして離した時に、やっと :hover のスタイルが有効になる。実際のところ、リンクをタップした場合は遷移してしまうので、コレでは :hover のスタイルが分からない。

コレを改善し、タップしている間だけ :hover を機能させるにはどうしたらいいか調べたところ、<body ontouchstart=""> と書けば実現できるようだ。

:hover 指定がある要素より親の要素に対し、onTouchStart イベントを宣言だけしてあげると、どういう理由かよく分からないが、タップしている間だけ :hover のスタイルが利くようになるみたいだ。イマイチ原理が分からなくてキモいので、もう少し調べてみる。

とりあえずこのやり方なら、他のサイトで紹介されているような「touchstart イベントを JS で監視して .hover クラスをセットする」みたいな処理は必要ない。

スキルや経歴は定期的にまとめ直したい

今回、サイト上に公開したのは「保有スキル」のみで、職務経歴的なことは書かなかったが、保有スキルや職務経歴は定期的に見直すようにしたい。

「ただ知っているだけ」だったモノが、いつの間にか「(自分で効果的に活用できる) スキル」になっているかもしれないし、より深く学んだことで、「コレって本当にスキルと言って良いのだろうか…？」とスキルレベルの自己評価を疑えるようにもなる。

経歴についても、技術要素だけでなく、チームの規模や編成、担当した工程、そのプロジェクトの売上や効果など、様々な視点で説明できる。その他の現場と比較することで、後になって見えてくることもあるだろうから、定期的に見直すと良いと思った。