カタツムリのつもりもむりむり

一般的オタクの頭の中身を置いていくところ / アイドルマスターSideMが好きです

助手展のWebサイトを作ったよ2019

www.zokei.ac.jp


今年めっちゃ頑張って作った。

  • 画像とかはグラフィック担当の人に用意してもらった。全体通して手描きのデザインだったので目立つ所は手描き文字の画像にした。今年はちょっと重い。
  • ワンカラムは私からの意見(だった気がする)。本当はワンページが良かったけど思ったよりアーカイブページが重くなったので結果的には良かったかな。
  • デザイン的にも去年みたいなタブいっぱいより情報がズラッと並んでいる方が良いとのことで技術的には大したことしてない。
  • アーカイブのページ、今後増えることを考えるとCMS対応とかさせた方が良かった気もするけど、まあどうかな。私の後の人頑張れ。
  • タグとかはもう少し整理して来年度以降はこのWebサイトのCSSだけ書き換えたらなんかまあ良い感じになるぐらいにしたい。

 

アーカイブページのスライドはslickを使った。スマホでも良い感じ。

縦長の画像と横長の画像が混ざっている時にスライドの画像サイズが良い感じに収まらなくてしばらく嵌ってたけど、こんな感じにしたら良い感じになった。

.slide li img{
    max-width: 100%;
    max-height: 300px;
    height: auto;
    object-fit: scale-down;
    margin: 0 10px;
}

プログラマーじゃないので理由は知らん。スマホから見た時依然として画像比率が微妙なので助け待ってます。

今年のWebサイトはメディアクエリをなるべく使わずに(コード長くしたくなかった)Viewportパーセンテージってやつを使って見た。vwとかvhとかいうやつ。
詳しくはこの辺でも見ておけば良いと思うけど、まあ画面のあれこれに対するパーセンテージらしいよ。使っているけど全然わからん。
それにcalcって奴を使ってこんな感じでアレしている。calcはなんか足し算とか使えるらしい。このページ見て頑張った。脳みそではあまり理解はしていない。心で理解した。

body{
    -webkit-text-size-adjust:100%;
    font-size: calc(75% + 0.25vw);
}

bodyにフォントサイズを指定する是非はさておき、このQiitaとかを参考にしてみた。こうするとどのデバイスでもフォントサイズが良い感じになるようにデバイス側で計算してくれるらしい。親切。
ちなみにvwもcalcも古いブラウザは対応していないけど、去年の助手展のWebサイトのアクセス数の半数以上はスマホからだったしPCもほとんどChromeからだったので問題は無いでしょう。

ひとつやっちまった〜というか去年やった時に気付かなかったけど、同じURLで同じ名前のCSSファイル使っててキャッシュ残ってると更新してもCSSが新しい物に適用されなくて困ってた。次の更新の時にキャッシュを消すタグを埋め込まないとな〜と思ったけど、来年以降はファイル名を変える方向で頑張りたい。重いんだよね。

まあ去年よりかは表示がヤバくなってるところも無いしちゃんとアーカイブページも公開出来たし去年よりかは進歩してて偉いんじゃないですかね。とはいえjQuery嫌いは直した方が良い気がする。私がやろうとすることぐらいならCSSで代替可能とはいえ授業ではjava scriptまで教えてもらったのに……
今年は自分の制作物もHTMLとCSSで作るそんな感じのアレになる予定なので頑張る。むんっ。