6月21日の授業まとめとサイトレビュー
皆さんこんばんは（こんにちは）
Tomomiです。
今日も頑張って授業まとめとサイトレビューをやっていきたいと思います。
授業の合間に３か月先に入った先輩方の
ポートフォリオ発表を見せていただいたのですが…
すごすぎる・・・・
全然レベチなんですけどマジで大丈夫ですか？？
ってめちゃ不安になりました(笑)
先生は「大丈夫！あのくらいならできるようになります！」って
言ってたので今から素材集めとか、どんなものを作りたいか考えなきゃな…と思いました。
前置きはここまでにして、
＜本日の目次＞
①授業のまとめ
②サイトレビュー
③本日の総まとめ
で書いていこうと思います。
①授業まとめ
本日はHTMLの具体的なタグと属性についてを中心に学びました。
＜本日学んだ用語一覧＞
・DOCTYPE宣言（文書型宣言）※めっちゃ大事
⇒どのバージョンのHTMLなのかブラウザが判断できるようにするための記述
・<html>: HTMLの記述をすべて囲むタグ
・lang属性:Webページで使われる言語をブラウザに伝えるためのもの
・<head>:Webページの基本情報を記述する
・<meta>:様々な情報を与えるタグ。属性によって役割が変わる
・<title>：ページタイトルを記述する※注意・見出しではない
・<p>:段落を意味する「paragraph」の略。文章のまとまりを囲む
・<header>：ページ上部にある、最初に目にしてほしいコンテンツ
・<footer>:ページ下部にある、最後に目にするコンテンツ。全ページ共通
・<nav>:グローバルナビゲーションを意味するタグ
・<main>:ページ内のメインのコンテンツ1つのページに１つだけ
・<section>:内容ごとにひとまとまりにしたコンテンツ。文書のまとまり。
・<article>:文章の内容が独立している記事セクションを意味する。
・<aside>:メインの内容とは別のコンテンツ。
・<div>:文書構造状、何の意味も持たずにグループ化するタグ
・<span>:文章内でピンポイントに装飾する部分を囲むタグ
一つ一つの意味ももっと教えていただきましたが、
あまりにも長くなりすぎるので今回は割愛していきます。
②サイトレビュー
今月は地方自治体Webサイトレビュー月間としておりますので、
昨日から引き続き、１都市選んでレビューしていこうと思います。
今日は北海道のHP一覧からオシャレだなー！と思ったものを選びました。
東川町のオフィシャルサイトです！
【概要】
写真の町というのを全面に出した、
シンプルだけれど、町の良さがわかるLPだと感じた
【ファーストインプレッション】
スタイリッシュにまとめてあるものの、老若男女が使えるように、
トップページの時点で下にスクロールする必要がなく、写真の下にアイコンで各目的ごとのリンクがあるので、便利に感じる
【メインビジュアル】
全体的に寒色系の写真を使うことで
さわやかなイメージができた。
あえて、メインのページには「Topics」と「Pick Up」や「movie」などを載せることで、町への興味や新たな移住者の興味を引くことができているのではとかんじた。
【レスポンシブ】
PCから見たこの繊細さを損なわないスマホでの表示もとても良い。
申請系がまとめてある「暮らしのガイド」もトップページから入ると
同じようにアイコン分けされているので、わかりやすいが、
さらに細かい部分にクリックして入ると、画像が引き延ばされて表示されてしまっているので、調節が必要だと感じた。
【あくまでも私見】
最初のイメージはとてもオシャレで洗練されていると感じたが、
それだけではなく、だれにとっても欲しい情報に手が届く仕様になっていて
とても良いと感じた。ただ、先のレスポンシブの通りの修正が必要だと思う点もあると思う。
【ひとつだけ自分のデザインに取り入れるとしたら】
アイコンのわかりやすさとシンプルさがとても気に入ったので、
自分でサイトを作成するときは参考にしたいと思う。
③本日の総まとめ
新しく学ぶことが多く、用語を覚えるのも一苦労だし、
先輩方の作品を見ると本当に何も知らない自分があのレベルの
作品を作れるのはとても不安になった。
でも、こうして毎日まとめをしてサイトレビューを重ねていって
自分が作りたいと思うサイトの作成ができるようになりたいと思う。
幸い今のところ、コード入力は面白みを感じるし、
日々新しいことができるようになって楽しいので、この気持ちを
忘れずに勉強していきたいと思います。
本日はここまで！
明日は週の半ばで大変ですが、頑張っていきましょー！
おやすみなさい！
Tomomi
この記事が気に入ったらサポートをしてみませんか？