なんか気が向いたから作りました
Tomoka's portfolio
- ver2.0 にアップデートした。
- とにかくいろいろ変えました。
- nav が float じゃなくて flex になったとか！
- ベンダープレフィックスを付けていないので、全ブラウザで動くかはわからない。要検証。
- トップのアニメーションや、全体の配色などは仮。
- CSS アニメーションを勉強がてらいろいろ使ってみた。
- 一番のこだわりは About me の画像のところ。（画像自体も変えました）
- とにかくいろいろ変えました。
- ちゃんと作ろうとすると、公開するところまでなかなかたどり着けないので、「とりあえず」なバージョン（大型アップデートなのに）。
- テーマカラーを決定した。
- どうしてもMSSPっぽさのある4色（青・黄・赤・緑）を使いたかったけど、文字が読める程度でかつ可愛い感じの色にするのが難しかった。
- もっと良い色があったら変更する。
- 読込中のアニメーションを追加した。
- 完全に思いどおりにはならなかったので、CSSアニメーションをもっと勉強したい…
- トップ（メインビジュアル？）に背景画像を追加した。
- いい画像が思いつかなかったので、とりあえず在宅作業環境。作業環境がアップデートされたらこちらの写真もアップデートしたい。
- Ver1.0のときみたいに、桜とか風景の写真のほうが良かった…？
- favicon, OGP情報を追加した。
- 作った。
- 合字がブラウザによっては自動で適用されることと、それを解除する方法を学んだ。
- 内容は仮ってことで。名前が本名じゃないのも、自撮りが
メンヘラっぽいかわいこぶったやつなのもそのため。 - HTML, CSS の良い復習になったけど、JavaScript の勉強をしたいので、そこにたどり着くために HTML と CSS はささっと終わらせたいところ。
- 載せた。
- 完全にくろーん？こみっと？なんだっけ？みたいな感じだったけど GUI 版ソフトに助けられてなんとかなった。
- マークダウン記法も Webmaster Jr.で教えてもらったけど忘れていたのでググりながら書いてる。
- 足した。
- Works の画像をクリックするとモーダルウィンドウが出てくるやつをやりたいなと思って調べてたら日付が変わっていた。
- なのでまだ実装できてません。がんばります。
- 当面の目標はモーダルウィンドウとメディアクエリの理解を深めて使えるようにすることかな。
- Link のところ、「載せておきます（載せるとは言ってない）」になっているけど、リンク先の内容の精査とかあるので…
- あ、あとスムーズスクロールに対応しました。JavaScript 理解しきれてないけど！もう少し縦長になったら一番上に戻るボタンも作る。
- JavaScript が倒せない。
- モーダルウィンドウを作ろうとして無理だったのでほぼ進捗がない。
- 詳しくは overlay.js のコメントを見ればわかる（見る必要はない）。
- 新たな知識は得たんだけど、結果に活かせてないのが残念ポイント…
- モーダルウィンドウに少しだけ進捗が…！
- overflow:scroll と hidden を知ったことにより、モーダルウィンドウのスクロールと、元のページのスクロール禁止ができるようになった。
- ただし CSS でできるものは CSS ですべきと 2 人の先輩から助言をいただいたので、後で CSS に置き換えると思います…
- モーダルウィンドウの中身を充実させた。
- 現状、MMD の内容がとても偏っているので、別の動画への差し替えなどを後で行う。（クリックするサムネもわかりづらい）
- 地味に勉強になったのが、video の音量の初期設定を Max 以外にする方法がわかったこと。
- ついでに、再生途中でモーダルウィンドウを閉じた場合動画を停止したり、動画停止状態でウィンドウを閉じた場合再生位置を最初に戻したりもした。
- モーダルウィンドウを JavaScript から CSS での実装に移行した。
- 解決できていない問題がちらほら…（気がついてないだけで他にも問題があるかもしれないが）
- ウィンドウが出ていても背景がスクロールされてしまう問題
- 動画の再生途中でウィンドウを閉じても動画が停止しない問題（JavaScript ではできていたが CSS だとできない）
- video タグを使っている時点で古いブラウザに対応する気はほぼないという態度が出てしまっていますが、モーダルウィンドウは一応参考元が古めの IE に対応する書き方もしていたので、そのまま残しています。（文章だけは読めるかもということで…）
- スムーズスクロールについて、完全 JavaScript 実装だったのが CSS＆ポリフィル JS 実装にした。
- これ元の CSS 意味あるのかわからないけど…
- すごい苦労したけど何とか Edge でもできて良かった～
- IE はブラウザじゃないという助言を某先輩から頂いたので、IE は知りません。
- ちょっとだけメディアクエリ対応した。
- レイアウト少し調整したくらいだけど、スマホからもなんとか見れる程度になったと思う。
- Works の部分はもう少し工夫したい。
- 具体的にはモーダルウィンドウじゃなくアコーディオン式にするとか…
- でもレイアウトの変更より大掛かりになるからどう実装していいのかまだわからない。
- 今まで上部のナビゲーションバーが Profile からの 4 つしかなかったけど、一番上に戻れるように増やした。
- コンテンツの区切り線を変えた。
- 今まではそれぞれの div に border-bottom って感じだったけど、hr 要素というものを知り、そちらに変更。
- デザインも可愛くしたくて調べた。ハートマークはやっぱりかわいい。
- Extra の内容を書き換えた。
- Works の趣味関係を移動しようと思ってたけど、あれはあれで作品としていいやと思い、Extra にはその名の通り「おまけ」の情報を載せた。
- 今のところ長文自分語りだけだけど、もう少し内容は充実させる予定。
- 上部ナビゲーションバーにシャドウを付けた。
- サイトの色とトップの画像が四季ごとに変わるようにした。
- 春：3 ～ 5 月、夏：6 ～ 8 月、秋：9 ～ 11 月、冬：12 ～ 2 月
- 誕生日だけ特別仕様とかもやるべきか…？
- Extra の内容を少し追加した。
- SCSS に挑戦した。（まだその機能を活かしきっていない）
- 配色の調整をした。
- Works と Extra の文章を追加した。
- 文章の一部を強調した。
- 読み込みの重さ問題解決はお待ちください…
- 軽微な修正をした。
- Profile の画像が暗かったのを修正した。
- （min-width:768px で）ナビゲーションバーの線で、solid にするべきところを dashed にしていたのを直した。
- 全体的に横幅が広すぎる気がしたので、横幅の最大値を設けた。
- 横幅に合わせて、Works の画像が中央揃えになったり左揃えになったりするようにした。
- 3, 1 で二段になるときは中央揃えだと見栄えが悪いので、左揃えにした。
- Profile の内容を追記した。（今やっていること）
- Link のリンクを画像にした。（語彙力）