多角関係オンリーお疲れさまでした、めちゃ良かったな～～ 個人サイトで活動するようになってから初のWEBイベント参加という事で見てくださった方がどれだけいたんか分からんけど展示用のページを一から作ったんよね Twitter一本だった時はプロフカードをポータルにして支部やらぽいぴくやらに展示物を置いていたような気がします 初めは今回もそうしようとしてたんだけどサイトあるんだからポータルも展示ページも好き勝手なUIで自作すれば！？となりプロカを完全に卒業したのであった
……卒業したのは良いんだけどなんかすごいめ〜〜ちゃ大変だったので備忘録を残しておく事で今後またWEBイベント出る時の準備ハードルを下げてやろうというねらいの文章です よく考えたら真っ白の状態からHTMLとCSSを練り練りやってWEBページ作るのはサイト立ち上げ以降あまりやってねんだよな たまに気になるところをリニューアルしたりなんだりでコードを書くことはあれどページ丸々1個分はやってない というわけでGO
これはSAIで描いてるけど紙でもなんでも良い タイトルがこの辺でコンテンツがこれとこれとこれで、それらが縦に並んだり横に並んだり…を図に描く できるだけスクロールさせず全体を見せる事を常に目指しているのでそんな感じのレイアウト
サイト内で適当にスクショ撮ってメニューバー以下を塗りつぶして描きこんでいる
WordPressだと固定ページの新規作成でテキスト欄にベタ打ち
上から表示させたい順番だけあってればOKで中央揃えとか字のサイズとかは二の次 あとからなんぼでも装飾する
何も装飾していない状態 画像はバカでかいし字は全部同じサイズで左寄せだしめちゃくちゃである
中央揃えしたり枠で囲ったり行間をどうにかしたり だいたいHTMLでコンテンツごとにdivタグで囲ってクラス名付与しまくる→CSSで各クラスに装飾入れる→プレビュー&F12キーで変なところ直す…でどうにかなる 縦並びの中に横並びのコンテンツを混ぜるとかコンテンツの配置が入れ子になるやつ(Flexbox)は大混乱必至なので①のイメージ図にdivの親子構造をメモしながら整理していかないと高確率でしぬ あとはサイト内の既存ページからコピペできる部分はガンガン拾う 時短
HTMLに入れた文章とかをdivタグで分けてそれぞれ名前(クラス名)を付けてCSSで装飾していく(※字が潰れたのでこれだけ画像拡大できる)
③までは自分の端末(PC)での表示のことしか考えてないのでスマホとかタブレットでの挙動を調整する F12キーで画面幅狭めていっても良いけどたまに実際と異なる表示になるので最終的には実機で確認する
タイトルの字がちっちぇえ～！のでこのあとスマホ表示用のタイトル画像も作った
これはCSS HTMLには全部普通に記述して、CSS側で幅〇px以上(以下)の条件付きで非表示(display: none;)を入れて制御
という 流れとしてはこんなでしたね 最初からレスポンシブ対応のこと考えて作れたら最後こんなに頑張らなくて済みそうなんだけどな…しかしいきなり大きさ違うモニタ3つ並べて作業するのも大変かつモニタでかいPC版が一番ややこしいUIになりがちなのでまあ、まあ
他、細かいCSSなどの話はこっちに置くことにしたのでそのように 今後もWEBオンリーいっぱい出た～い！がんばろう 完