Webデザインを勉強してみよう！
Webデザインを勉強してみることにしたよ！
具体的にはHTMLとCSSを使って
Webサイトを作るよ
今回はHTMLとCSSについて勉強してみることにしました。
VBAとは毛色の違う言語なので、ワクワクしています！
HTML/CSSとは？
HTML/CSSは、Webサイトで表示される文字やフォント、画像などを指定する言語です。
文章の内容や文字の大きさ、フォントや文字色などをPCにわかるように伝えてあげるための言語だそうで、サイトの構成やデザインはHTML/CSSを記述することで形作られます。
なぜHTML/CSSを勉強しようと思ったか？
以前からHTML/CSSの存在は知っていたのですが、勉強したことはありませんでした。
しかし、あるとき会社のHPに間違いがあることを発見してしまったのです。
上司にHPの間違いを報告してから私は思いました。
さらっとHPの修正とかできたら
カッコよくない？
というわけで
今回はなんかカッコよさそうという不純な動機でHTMLとCSSを勉強してみたいと思います！
HTML＆CSSとWebデザインが1冊できちんと身につく本
今回お世話になるのはこちらの本です。
 | 技術評論社 発売日 : 2022-01-07 |
すべてのコードに解説があるのでとてもわかりやすいです。
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]
著：服部雄樹
表紙もオシャレ〜
デザインのセンスとかも
身につくのかな？
デザインのセンスとか皆無なので、少しでもセンスを身につけたいところです
さっそく勉強を始めていきます！
1．ヘッダー・フッターを作る(HTML)
HTMLファイルを用意して共通部分であるヘッダーとフッターから作り始めていきます。
はじめてふれる言語なので、コードの内容はまるで理解できていませんが、とりあえず本の通りに進めていきます。
ここからサイトを作り上げていくんだね〜
２．CSSファイルを用意する(CSS)
CSSファイルを用意してまたもや謎の呪文を記述しました。
HTML→文章、CSS→見た目という役割があるそうですので、これから見た目を整えるようです。
HTMLとCSSは役割が違うから
セットで使うんだね
３．ヘッダー・フッターの見た目を整える(CSS)
背景色を変えたり、画像の大きさを整えたりしてヘッダーとフッターの境界がわかるようになりました。
未だサイトの全貌は見えませんが、少し雰囲気が出てきた気がします。
４．ウェブフォントを設定する(CSS)
ナビゲーションメニューにウェブフォントを設定しました。
ウェブフォントはフォントがPCにインストールされていなくても、指定したフォントを表示できる画期的なものだそうです。
言われてみればネットって
いろんなフォントが使われてるね
ぜんぜん気が付かなかった！
デザインって細かい部分にも
気を遣うんだね〜
５．スマホでの表示を整える(CSS)
スマホでの見え方を整えました。
ひと昔前はスマホだと見辛いサイトが結構あったのですが、最近はずいぶんと減ったことに気付きます。
スマホでも見やすいようにサイト側で設定してくれてたんだな〜と実感しました。
見やすさを追求するのが大事なんだね！
デザインって奥が深いな〜
まとめ：ヘッダーとフッターができた！
全体で共通の部分である、ヘッダーとフッターができました。
ここまででわかったこと
- HTMLは文章を構成する。
- CSSは見た目を整える。
- ウェブフォントを使うと、PCにインストールされていないフォントでも表示させることができる。
- PCで見る場合、スマホで見る場合の両方を想定してサイトを作る。
見た目のよさだけじゃなくて
使い勝手を追求するのも
デザインの仕事なんだね
作業は地味だけど
徐々にサイトが出来上がっていくのを
見られるのは楽しいね
ここからは各ページの作成に移るようです。
どんなサイトが出来上がるのか楽しみに勉強を続けたいと思います！
| 技術評論社 発売日 : 2022-01-07 |
すべてのコードに解説があるのでとてもわかりやすいです。
HTML&CSSとWebデザインが1冊できちんと身につく本[増補改訂版]
著：服部雄樹
コメント