【今日学んだこと】HTML CSS Webデザイン
今日は、Webデザインの勉強をしました。
今日の内容をまとめていきます。
★今日の内容
■ページ上部の紹介文を作成
MENUページのファーストビューには、大きな背景画像とページタイトル、紹介文を掲載。
〇ファイルの準備
「news.html」を複製し、複製したファイルを「menu.html」という名前で保存する。
この「menu.html」を編集してMENUページを作っていく。
〇HTMLを編集
共通部分は残し、必要な個所を編集していく。
◆「head」内の「title」を編集
MENUページ用のタイトルに変更。
「WCB Cafe - MENU」とする
◆不要なコンテンツを削除
ページのコンテンツである見出し部分と<div class="news-contents wrapper">の部分を削除。
◆ID名を変更
「news」とつけていたIDを「menu」に変更。
◆見出し部分を追加
「header」の下にページの見出しや紹介文を追加。
〇CSSで装飾
今まで作成してきたCSSのstyle.cssに書き足していく。
背景画像や見出し部分の高さ、余白などを指定。
モバイル版では余白のみ少し調整。
〇画像を効果的にトリミング
同じ画像でも、どの部分をトリミングするかによって見え方や伝えたい情報は大きく変わる。
デザインの目的によってどの部分に焦点を当てるかを考えるとよい。
◆目的に合わせたトリミング
・引いて見せることで、画像に映る全体像を主役として表現できる。
・1つのものをズームアップすると、その被写体を主人公として強調できる。
■タイル型レイアウトを設定
「CSSグリッド」を使って9つのメニューの画像とテキストをタイル型に並べていく。
〇コンテンツを用意
<div id="menu" class="big-bg">と<footer>の間にコンテンツを記述。
画像とテキストは「item」というクラスの<div>タグで囲み、さらに9つの「item」を「grid」というクラスのついた<div>タグで囲む。
〇CSSグリッドを使う
タイル型に並べるように親要素である「grid」クラスに対して「display: grid;」を指定する。
続いて横幅の指定ができる「grid-template-columns」で、値を「1fr 1fr 1fr」とすることで、「1:1:1」の割合で一列に3つの要素を横に並べられる。
幅が固定されず、画面の幅に合わせて自動で伸縮できるので便利。
要素同士の余白は「gap」で指定。
■レスポンシブに対応させる
〇要素を繰り返し並べる「repeat」
前の節では「grid-template-columns」の値を「1fr 1fr 1fr」としていた。
同じ数値が並ぶときは「repeat関数」を使うとスッキリとまとめて指定できる。
書き方は「repeat(繰り返す数,要素の幅)」となる。
〇要素の幅に最小値や最大値を指定「minmax」
今のままではスマートフォンで見ると画像が小さすぎて少し見づらい状態になっている。
そこで要素の幅に最小値を指定。最小値とは「これ以上は小さくならない」というサイズ。
この指定には「minmax」を使う。「minmax」ではサイズの最小値だけでなく、最大値も指定できる。
書き方は「minmax(最小値,最大値)」となる。
〇画面の幅に合わせて要素を折り返し「auto-fit」
一列に3つと限定せず、画面の幅に合わせて要素を折り返して次の行に表示させる。
repeat関数で指定した繰り返しの数値の部分を「auto-fit」に置き換えて使用できる。
「auto-fit」を使えば要素を折り返しながら親要素の余ったスペースが埋まっていく。
これでどのデバイスで見ても、見やすさを保ちながらタイル状の表示になる。
〇画像を効果的にトリミング
◆空間を生かしたトリミング
画像の主人公となる被写体をあえて中心からずらして空間を作っている画像もある。大きな背景画像として設置したいときに使える。
・視線の先に空間があると未来や前向きな印象となる。
・背後に空間があると過去を思い出しているような印象になる。
以上です！
タッチタイピングの練習(32日目)
タッチタイピングの練習、32日目です。
今日は、フルキーボードでアルファベット+数字を打つ練習をしました。
今日のスコアはこちらです。
今日の最終スコアは、入力速度99文字/分で、正解率96%でした。
少し上達して嬉しいです。
今までのスコアの変化はこちらです。
明日も、フルキーボードでアルファベット+数字を打つ練習をしたいと思います。
【今日学んだこと】HTML CSS Webデザイン
今日はWebデザインの勉強をしました。
今日の内容をまとめていきます。
★今日の内容
■レスポンシブに対応させる
現在ではWebサイトをスマートフォンで見る人の方が多くなってきている。
スマートフォンのような小さな画面でも見やすいようにCSSで調整する。
〇レスポンシブWebデザインとは
レスポンシブWebデザインとは、表示領域の幅によって見え方が変わるようデザインされたWebサイトのこと。
Webサイトに掲載するコンテンツは変更せず、デバイスのサイズに合わせてCSSだけで見た目を変更することができる。
◆カラム数を減らす
複数のカラムが横に並んでいると、スマートフォンでは非常に見づらくなる。
多くのWebサイトではスマートフォンで表示させるときには横に並んでいたカラムを下へ下へと縦に置き、1カラムにする手法をとっている。
◆表示するナビゲーションメニューの数を減らす
ナビゲーションメニューが画面上部に複数並んでいるときは、少ない画面領域に入りきらないことが多くある。
最初はナビゲーションメニューを非表示にし、メニュー用アイコンをタップすることで、すべてのナビゲーションメニューを表示させる方法がある。
〇レスポンシブに対応させる手順
◆「viewport」の設定
viewportとは、様々なデバイスにおける表示領域のこと。
HTMLの「head」内に下記の<meta>タグを記述して表示領域の横幅を合わせる。
<meta name="viewport" content="width=device-width, initial-scale=1">
◆メディアクエリーの基本
メディアクエリーは、Webページが表示された画面サイズに合わせて、適用するCSSを切り替える機能。
メディアクエリーはCSSに記述していく。
まずは「@media」と書いて「メディアクエリーを書きます」という宣言をする。
続いて()の中に画面サイズの範囲を指定。
〇文字サイズと余白を調整する
実際に制作中のサイトにメディアクエリーを適用させていく。
まずはホームページの調整。
style.cssの一番下にスタイルを追加する。
〇コンテンツを縦並びにしよう
Flexboxを使って横並びにした箇所を、スマートフォン版では縦に並べる。
Flexboxのプロパティである「flex-direction」を使えば、どの方向に並べるかを指定できる。このプロパティで値を「column」にすることで、要素を縦並びにできる。
ここではロゴとナビゲーションメニューが横に並んでいたので、この部分を縦に並べる。
「align-items: center;」も一緒に指定することで、画面中央に配置できる。
続いて「NEWS」ページも調整。
まずは横並びにしていたメインエリアとサイドバーを縦に並べる。
それぞれの幅を「100%」にすることで、横幅いっぱいにコンテンツが広がる。
あとは文字サイズや余白を調整。
〇ブレークポイントについて考える
メディアクエリーを使えば、デバイスの画面サイズによってスタイルを変更できる。
その切り替わるポイントとなる画面サイズを「ブレークポイント」という。
モバイルデバイスは縦に持って使うことが多いので、縦にしたときの画面幅=デバイスの短いほうの幅を基準にブレークポイントを考えるとよい。
600px前後に設定することが多い。
■カラムページのカスタマイズ例
〇3カラムのレイアウトに設定する
カラムを一つ追加して、3カラムに変更する。例として、縦長のバナー画像を追加。
<div class="news-contents wrapper">内に「ad」というクラスのついた<div>タグと画像を追加。
CSSで「article」の横幅を少し縮めてバランスを整える。
もともとあったサイドバーの右隣に画像が追加され、3カラムになる。
このようにFlexboxを使うと、「display: flex;」が指定された要素の中のボックスをすべて自動で横並びにしてくれる。
他にコードを追記しなくてもHTMLファイルにコンテンツを追加するだけで複数の要素を横並びにできる。
〇表示するカラムの順序を変える
現状、左から「メインエリア」「サイドバー」「バナー画像」の順に並んでいる。
これを左から「バナー画像」「メインエリア」「サイドバー」の順に変更する。
順序を変えるにはCSSのorderプロパティを使う。値には表示したい順に数字を書く。
このorderプロパティは「display: flex」の指定がある要素の子要素でしか動作しないので注意。
Webブラウザーはファイルを上から順に読み込むため、重要なコンテンツを優先的にすばやく読み込ませる必要がある。
これは、Googleなどの検索エンジンにも影響するといわれている。
一番重要なコンテンツをHTMLのなるべく上部に記述するのがベスト。
■タイル型レイアウトとは
画像や四角形の要素を、整然と並べたレイアウトのことを「タイル型レイアウト」や「カード型レイアウト」という。
〇タイル型レイアウトのメリットと構成要素
タイル型レイアウトは画像やテキストといった多くの情報を整理して一度に見せることができるので、整えられた印象になる。
レスポンシブデザインとも相性が良く、ショッピングサイトの商品一覧ページや画像ギャラリーページなどでよく利用される。
各ボックスの大きさに強弱つけたり、高さを変えて敷き詰める場合もある。
余白や左右のラインをそろえることで、画像のサイズが違っても美しく表現できる。
■タイル型レイアウトの制作の流れ
お店のメニューをタイル型レイアウトで作成する。
〇制作の流れ
01.ページ上部の紹介文を作成
ページ上部に大きな背景画像とともにページタイトルや紹介文を表示させる。
02.タイル型レイアウトの設定
CSSグリッドを使って9つのメニューをタイル型に並べていく。
03.レスポンシブに対応させる
CSSグリッドの応用を使って、自動的に画面幅に合わせて要素のサイズや数を変える。
以上です！
タッチタイピングの練習(31日目)
タッチタイピングの練習、31日目です。
今日はフルキーボードでランダムキーの練習をしました。
アルファベット+数字のみに設定して行いました。
今日のスコアはこちらです。
今日の最終スコアは、入力速度90文字/分で、正解率95%でした。
難しかったけど、すこしずつ慣れていきたいです。
今までのスコアの変化はこちらです。
明日も、フルキーボードでアルファベット+数字を打つ練習をします。
【今日学んだこと】HTML CSS Webデザイン
今日は、Webデザインの勉強をしました。
今日の内容をまとめていきます。
★今日の内容
■横並びの設定
ニュースページのメインコンテンツ部分を作っていく。
2カラムの構成なので、2つのボックスを横に並べてレイアウトを組む。
〇レイアウトの骨組みを作成
Flexboxを使ってメインエリアとサイドバーを横に並べる。2つのボックスを親要素で囲む。
<div id="news" class="big-bg">と「footer」の間に「news-contents」「wrapper」クラスのついた<div>タグを書く。
さらにその中には記事を表す<article>タグでメインエリア部分を、補足説明を表す<aside>タグでサイドバー部分を作成。
〇レイアウトを組む
◆幅を指定する
<article>タグと<aside>タグに幅の指定。単位を「%」にすることで、画面幅が変わっても伸縮するようになる。
◆Flexboxで横並びにする
「.news-contents」に「display: flex;」を指定して横並びにする。
「justify-content: space-between;」を足すと子要素が両端に揃えられるので、自動的に2つのボックスの間に余白が生まれる。
■メインエリアを作る
〇記事の情報部分の作成
まずはHTMLで記事上部に表示するタイトル、日付、カテゴリー部分の作成。
<header class="post-info">部分を書く。
年は<span>タグで囲う。<span>タグはCSSで文字を装飾するための指定で、HTMLの構文には影響しない。
◆日付の装飾
<header>タグ内の「.post-info」に余白と「position: relative;」を指定。
「position」は要素の位置を決めるためのプロパティ。
続いて日付部分。背景色や、形を円にするための「border-radius」、及びサイズなどを指定。
「position: absolute;」を追加することで、前述の「.post-info」部分を基準にした絶対位置を指定できる。
続いて月日と年の間に薄く水平線を入れる。線は「border-top」で指定。ここでは、白い線を50%の割合で不透明にして表示。
◆タイトルとカテゴリーを装飾する
タイトル部分はフォントや文字サイズ、文字の太さを指定。
タイトルとカテゴリーを日付の右側に配置したいので、「margin-left」で調整。
〇画像と本文を書く
作成した<header class="post-info">の下に画像と本文を書く。
文章は段落ごとに<p>タグで囲む。
CSSで画像と本文に余白を足す。
■サイドバーを作る
〇見出しと文章の装飾
「news.html」の<aside>タグの中にサイドバーに掲載するコンテンツを書いていく。
カテゴリーリストは<ul>タグで作成。見出しにはCSSで下線をつけて装飾し、文字サイズや余白などを調整。
文章には「padding」で要素の内側に余白をつけて見やすくする。
〇カテゴリーリストの装飾
CSSのデフォルトではリスト項目に丸いマークがるいているので、「list-style: none;」で非表示にする。
<a>タグに「display: block;」を加えることで、通常テキスト部分しかクリックできないが、リスト項目の横幅いっぱいまでクリック範囲が広がる。
よりクリックしやすく、使いやすいWebサイトとなる。
「a:hover」ではカーソルを合わせたときの装飾をする。
以上です！
タッチタイピングの練習(30日目)
タッチタイピングの練習、30日目です。
今日は、フルキーボードで言葉を打つ練習をしました。
今日のスコアはこちらです。
今日の最終スコアは、入力速度191文字/分で、正解率97%でした。
最後にフルキーボードでランダムキーを練習しました。数字や記号も入って難しかったです。
今までのスコアの変化はこちらです。
明日からは、フルキーボードでランダムキーの練習を続けたいと思います。
【今日学んだこと】HTML CSS Webデザイン
今日は、Webデザインの勉強をしました。
今日の内容をまとめていきたいと思います。
★今日の内容
■2カラムのWebサイトを制作する
〇 2カラムのレイアウトとは
「カラム」とは縦の列のこと。
垂直方向にコンテンツを区切ってレイアウトを組むことを「カラムレイアウト」という。
〇2カラムのレイアウトのメリットと構成要素
2カラムのレイアウトとは「2列に並んだレイアウト」のこと。
コンテンツ量が多いニュースサイトやブログなどのWebサイトの見せ方として適している。
汎用性が高いので作り方を覚えておく。
〇2カラムの幅の比率
多くの場合は、メインエリアとサイドバーを「2:1」「3:1」という割合で作成している。
デザインや内容によっては半分で割ってみても良い。そのようなレイアウトを「スプリットスクリーン」と呼ぶ。
■2カラムページの制作の流れ
〇制作の流れ
01.ページ全体の見出しを作成
ページ全体の見出しを作成していき、ページ上部に背景画像とともにページタイトルを表示させる。
02.「footer」の作成
画面の最下部に表示するフッターを作成する。
03.横並びの設定
2カラムのレイアウトを組んておく。先にレイアウトを確定しておくことで、全体の構成が崩れにくくなる。
04.メインエリアの作成
画面左部分のメインエリアを作成。ニュースサイトやブログの記事によくある見出しや画像、文章を配置。
05.サイドバーの作成
カテゴリーの一覧リストや紹介文など、ページの補足説明となる部分をサイドバーに設置。
06.レスポンシブに対応させる
スマートフォンで見ると1カラムになるように変更。
■ページ全体の見出しを作成
ページ上部に表示させる見出しの部分から作成していく。背景画像は画面両端に広がるように、横長の画像を用意。
〇ファイルの準備
index.htmlを複製し、news.htmlという名前で保存。
共通部分が多い場合は、既存のファイルを複製して編集していくとミスが少なくて済む。
〇HTMLを編集
共通部分は残し、必要な箇所は編集していく。
◇「head」内の「title」を編集
ニュースページ用のタイトルに変更。
◇不要なコンテンツを削除
ホームページのコンテンツである<div class="home-content wrapper">部分はこのページでは不要なので削除。
◇ID名を変更
「home」とつけていたIDを「news」に変更
◇見出し部分を追加
「header」の下に見出しとして表示する部分を追加。
〇CSSで装飾
CSSファイルは新たに作成する必要はない。style.cssに書き足していく。
CSSファイルは先に制作してあるものを利用することができる。
背景画像や見出し部分の高さ、余白などを指定。
■フッター部分を作成
画面の一番下にコピーライトを記述。
〇フッターコンテンツを記述
<div id="news" class="big-bg">部分の下、</body>の上にフッターを記述する。
コピーライトは<small>タグで囲む。
<small>タグは免責や著作権などの注釈を表すタグ。
「©」はブラウザーで「©」と表示させる記述。
〇CSSで装飾しよう
CSSでは背景色や文字色、文字サイズ、余白などの指定をする。
以上です！
