ももちん - Memo

Manalica(まなりか)のイラストなどを公開しています。

2020年5月の記事(1件)

2020/05/27

このサイトの閲覧デバイスの統計は75%ほどがモバイルからみたいです。
作者としてはモバイル用の表示はPC用のサイトレイアウトをモバイル表示用に崩しているような感覚ですね。
絵描きとしても大きい画面でイラストを表示させた方が作品が壮大に見えるので(笑)、少なくともイラストは解像度短辺1000px以上の画面で見てほしいなぁ。(私のイラスト作品は大抵短辺1000px程度です)

ここのところとあるサイトの制作作業をしています。(手っ取り早く言うなら仕事です)
Webサイト制作の中でも、固定幅一ページ単体に限って言えば効率の良いマークアップ、CSSによるレイアウト・装飾はそれなりなんじゃないかと自負しています(>ω<)
だけど今の時代、サイト制作はそんな固定幅の一ページで済むような単純さではないです。デバイス(画面サイズ)が多種に渡るためですね。
ページのレスポンシブ化の工程が必須なわけです。
自分はまだそれほどその工程の場数を踏んでおらず、現在効率のいい・扱いやすいレスポンシブの作り方の模索中です。

現時点で個人的にこの方法がやりやすいんじゃないか?という手触りと推測をメモしておきます。

  • 基準となるページレイアウトを制作し、それを改変してレスポンシブに対応させることにする
  • ブレイクポイントごとにCSSファイルを分けて<link>で読み込む(minとmax同時指定でファイルがかぶらないようにする)←干渉し合わないからイイ
  • ブレイクポイント間(min – max)ではまずminサイズを制作。場合によってmaxサイズ用までブロック幅が伸びるようにwidth:%やmax-width・min-widthを使う

あと今回制作していて知識がついたこととすると、

  • <img>等の閉じタグのない要素には擬似要素(::before,::after)が使えない
  • position:static;(初期値)以外の属性にのみz-indexが効く
  • position:relative;でも相対的移動としてtop系の属性が使える(absoluteと違って要素分の空間は空いたまま?)
  • Flexボックスは子要素にflex:none;を付けると勝手に伸縮しないようになる

ってことなどですね…!
その他GoogleフォントやAdobeフォントが簡単に使えたり、Slick(jQuery)・Lottieアニメーション(jsonファイル)の使い方を覚えたり、Wordpressの方ではカスタム投稿なるものがあることが分かったり、色々と収穫のある作業です。

課題はヘッダーのナビメニューをレスポンシブでハンバーガーメニュー表示にするときの<nav>の挙動なんだよなぁ…🤔
ブレイクポイントに差し掛かったときにJavaScript(jQuery?)でハンバーガーCSS用のidかclassを与えちゃえばいいのかな?
JavaScriptが未だ使用方法が掴めてないから未知なんだよなぁ…