沿革

  • ＞
  • History

このポートフォリオサイトのデザインについて

  • 「ビジュアル」は例の如くリソースが枯渇している為、5年以上擦り倒しているの細いリソース
  • フォントについては普段あまり使用経験のない「明朝体（セルフ体）」を利用
  • 最近よく見かける「mix-blend-mode: difference;」を利用したデザイン
  • 最近知った「@container scroll-state()」クエリーを使用

以上を目的として作成

ver1.1

ヘッダー

  • CSS

なぜか子要素レベルで「mix-blend-mode: difference;」が効かず、親要素で全適用する形となった。「position: sticky」によるものだと解釈しているが、原因の特定には至っていない。

ホバーすると蛇腹（じゃばら）式に動作し、メニューを表示するアニメーションにしたが、多少チラつきが見えた為、以下を適用。

will-change: transform, animation;

グローバルナビの「Works」について

  • iosのSafariにはホバーの概念がない
    iosのSafariでホバーアニメーションが効かなかった。iosのSafariにはホバーの概念が存在しないとの事。ホバー時と同じ挙動を行うように「input」を設置したが、チェックアウト時に収納しなかった。
    結果、スタイルを分けた
    @media (hover:hover) {
    "ホバーの概念がある場合に適用されるcss"
    }
    @media (hover:none) {
    "ホバーの概念がない場合に適用されるcss"
    }
  • 「label」に高さが指定できない
    ついでにタッチポイント領域の修正しようと思ったが、「label」はデフォルトでは「height」が指定できないらしく、「label」が入っている要素と入っていない要素で高さが揃わなかった。一度別要素を入れ子にして「display: block;」で高さを揃える必要があった。

実績一覧ページ

  • Javascript

当初は単純にグリッドで並べるだけの構成だったが、見出しとメインコンテンツの境界が曖昧で、視覚的ヒエラルキーも弱いと判断。そのため、現在のようにメインコンテンツ部分とテーブルコンテンツ部分を明確に分け、テーブルコンテンツは追従する形式に変更。

要素位置を検知して目次に同期

“Intersection Observer API”なる便利なものがあったので、スクロールで要素の位置を検知して、追従設定した目次に同期させた

const options = {
　　root: null,
　　rootMargin: "-50% 0px",
　　threshold: 0
};
const observer =
new IntersectionObserver(doWhenIntersect,options);
const target = document.querySelector('.target'); observer.observe(target);

※12/22に見栄えが良くない為、元に戻した。上記APIは「沿革」ページのみで運用。

ロゴについて

  • illustrator

ゴシック体を利用したものしか案がなく少し不本意ではあったが、時間がなかったためひとまずこの形で

ver1.2

"パンくず"の追加

  • HTML

今更追加。丁度良いスペースがあったと言いたいが、3階層以上が厳しそうなので、「HOME」はアイコンにした

FIrefoxで見出しが滲む

  • CSS

FIrefoxで見出しが滲む

  • Firefoxにて見出しが潰れている事象
    Firefox用に以下を設定
    -moz-osx-font-smoothing: grayscale;

ヘッダー

「沿革ページ」の追加に伴い、グローバルナビの項目が増えたため、ビューポート幅 428px 以下ではドロワーメニュー表示に切り替える必要が出てきた。しかし、ヘッダーに全体に「mix-blend-mode: difference;」が適用されている影響で、ドロワーメニューまで差分で反転してしまう問題が発生した。ヘッダーの外にメニューを配置する案も検討したが、その場合はドロワーを開いた際にハンバーガーメニューが隠れてしまい、クローズ操作ができなくなる。

JavaScriptで制御する方法もあるが、そこまでの対応を行うべきか判断が難しく、反転前提でスタイルを組むか、ハンバーガーが隠れない対策を施すかで悩んだ。
結果として、現状のスタイルを維持しつつ、グローバルナビの整理として「Works」配下に「Achieves」を移動し、新たに「History」を追加する形に落ち着いた。

ver1.3

実績詳細ページ

  • HTML

const url = window.location.hash;

実績一覧ページのHTMLにリンクのハッシュによって、分岐させて該当する画像を差し込む仕様とした。