![見出し画像](https://assets.st-note.com/production/uploads/images/7757084/rectangle_large_type_2_ea2ea989e639017e204700bb5940d0a8.jpg?width=1200)
Web設計を元にHTMLマークアップをやった【38Web-7】【制作ログ】
今日はこれまでのWeb設計を元にして、HTMLファイルを作るところまでをやりました。HTML5のマークアップは初の作業です。
こんにちは、38歳からWebエンジニアを目指しているフェニックスA子(@lipton_milk999)です。
HTML5でマークアップする
かつてHTML4の時代に手打ちしてたことはあるのですが、その時は思うがままにプレビュー押しながらタグ打ってたので、きちんとしたフロー手順でやるのは初です。
HTML5では、文書構造(アウトライン)を元にマークアップする設計思想になっていて、Wordで文章を編集するようなイメージでしょうか。
全てのタグ(特に文書構造タグ)は「推奨される使い方」を持っていて、見た目だけで好き勝手にマークアップするのは良くない、ということになっています。
元にしたのは3つの設計書(メモ)
これまで作った設計メモのうち、「文書構造設計」「情報構造設計」「CSSセレクタ設計」を順にマークアップしていきました。前回の制作ログはこちらです。
使いやすいエディタSublime Text
エディタは「Sublime Text」を使うことにしました。
閉じタグを打つ時、「</」だけ打てば自動的に閉じてくれるのがとてもありがたい。使いやすいエディタですね!
HTMLのみのサンプルがこちら
そして、出来上がったHTML(cssなし)をキャプチャしたのがこちら。
殺風景ながら、画像があるだけでちょこっとましに見えます(笑)
ここから、cssでそれっぽくなる過程が楽しいんですよね。今回色素材しかないけど・・・。最近はシンプルなWebサイトが主流なので、画像さえあればWebっぽくなると信じて。
画像の下準備
画像はサイズ調整済みで、丸く切り抜く予定のものは正方形にする、などの用意をしてあります。縮小はcssでやる。
画像のサイズについては本で見たのですが、Retinaディスプレイにあわせて画面最大幅の2倍が良いとか、等倍で良いとか、いろんな説があるようです。
サクッとロゴを作ろう
アイコンがないのは寂しいので、「Logo Maker」というサイトでサクッと作りました。
猫の絵などは、デフォルトで表示される図柄には丸や四角しかないけど、Searchウィンドウに「Cat」などと入れるとたくさん候補が出て来ますよ。
このロゴの猫、トップ画像の猫ちゃんと、完全にシンクロしていて、とても気に入っている。
HTMLマークアップで気づいた点
・cssセレクタ設計の時点で、指定に結構抜けがあったのでその場でつけた(外枠のwrapper的なsectionなんか、よく忘れている)
今日はここまでです。やっと目に見える形になって嬉しい。
モチベーションを上げる方法
そうそう、大学の研究室の教授が、新入りが最初に来た時によく教えていたモチベーションを上げる方法。
「簡単なことでもいいから、何か一つできたらそれを印刷して記録して、みんなに(先輩とかに)これができたと喜んで見せびらかせ」
私がnoteでやっていることは、まさにそれですな。
【この勉強ログは、マガジンにしています。フォローしてね。】
F1クリエイターとして、そしてWebデザイナーの駆け出しとして、自らの手でサイトを立ち上げています。 ご支援を糧に素晴らしいものを作りたい。 どうぞ、よろしくお願いします。