タッチタイピングの練習(29日目)
タッチタイピングの練習、29日目です。
今日は、フルキーボードで名言を打つ練習をしました。
今日のスコアはこちらです。
今日の最終スコアは、入力速度240文字/分で、正解率94%でした。
自己ベストを更新できました!
いままでのスコアの変化はこちらです。
入力速度が大きく上がってうれしいです!
明日も、フルキーボードの練習をしたいと思います。
タッチタイピングの練習(28日目)
タッチタイピングの練習、28日目です。
今日も、フルキーボードでことわざを打つ練習をしました。
今日のスコアはこちらです。
今日の最終スコアは、入力速度197文字/分で、正解率91%でした。
今までのスコアの変化はこちらです。
もっと入力速度が上がるように頑張りたいです。
明日もフルキーボードの練習をしたいと思います!
タッチタイピングの練習(27日目)
タッチタイピングの練習、27日目です。
今日は、フルキーボードでことわざを打つ練習をしました。
今日のスコアはこちらです。
今日の最終スコアは、入力速度200文字/分で、正解率97%でした。
速度も正解率も大きく上がりました。
うれしかったです!
今までのスコアの変化はこちらです。
明日も、フルキーボードでことわざを打つ練習をしたいと思います。
【今日学んだこと】HTML CSS Webデザイン
今日は、Webデザインの勉強をしました。
今日の内容をまとめていきたいと思います。
★今日の内容
■「header」部分の作成
Webサイトの全ページ共通となる部分なので、最初に作成。
〇HTMLに「header」部分を記述
index.htmlの<body>タグ内に<header>記述する。
続いてその中に<h1>タグでロゴ画像を、<nav>タグでナビゲーションメニューとなるリストを書いていく。
ロゴの画像は「images」フォルダーを作成し、その中に保存。
〇CSSファイルの準備
「css」フォルダーを作成し、その中に「style.css」という名前のCSSファイルを新規作成。
このstyle.cssにスタイル記述。
〇共通部分の記述
CSSファイルの1行目には「@charset "UTF-8";」を書き、コードの文字化けを防ぐ。
続いて<html>タグに文字サイズを100%と指定する。
これにより、ブラウザーのデフォルトの文字サイズやユーザーが設定した文字サイズが正しく反映されるようになる。
<img>タグに「max-width: 100%;」を指定することで、画像が親要素よりも大きくなることを防ぐ。
〇ロゴのサイズと余白の調整
ロゴ画像が大きいままなので、サイズを指定。
記述した共通部分のCSSの下に書き足していく。
〇ナビゲーションメニューの装飾
ナビゲーションメニューに文字サイズや余白などの装飾を加えていく。
ポイントは「display: flex;」を使って中の<li>タグを横並びにする点。
「a:hover」はリンクテキストにカーソルを合わせたときに適用される疑似クラスと呼ばれるもの。カーソルを合わせたときの装飾を指定できる。
〇ロゴとナビゲーションメニューを横並びにしよう
「page-header」クラスにFlexboxで横並びに設定。
「justify-content: space-between;」も書くことで両端に設置できる。
〇コンテンツの最大表示幅を設定
コンテンツ全体を囲むボックスに最大幅を指定。
これにより、大きな画面でも違和感なく閲覧できるようになる。
CSSに「max-width」で最大幅を指定。「margin: 0 auto;」を指定すると、ボックスを画面の中央に配置できる。
左右に「padding」をつけておくと、スマートフォンの狭い画面幅で見ても余白ができて見やすくなる。
■コンテンツ部分の作成
ホームページの顔となるメインコンテンツ部分を作成。
背景画像を大きく打ち出して、印象的なページに仕上げていく。
〇文章とボタンを設置
まずはページの中心部分に配置する文章とボタンを作成。
HTMLの<header>タグの下に<div>部分を作成。
さらに、ここに見出しとなる<h2>タグと、本文となる<p>タグ、リンク先となる<a>タグを追加。
CSSの「text-align: center;」で画面の中央に文章を配置。
その他、余白や文章のフォントサイズを指定。
続けてCSSで見出しやボタンの指定。
見出しやボタンは他のページでも利用するので、わかりやすいようコメントアウトをつけてまとめておくとよい。
「border-radius」は四角形の角を丸めるためのプロパティ、「:hover」はカーソルを上に重ねたときに適用される疑似クラスと呼ばれるもの。
〇画面いっぱいに背景画像を設置しよう
ホーム全体に背景画像を設置する。画像を「images」フォルダーに保存しておく。
HTMLに追加する。記述していた「header」部分と<div>部分を新たに<div>タグで囲む。
その<div>タグに背景画像を当てる。
CSSで「background-size: cover;」を指定して、画像の縦横の比率を保ったまま画面いっぱいに広げる。
また、この指定は他のページでも使いまわしたいので、クラスとして設定する。
CSSに追加する。ホームで表示したい背景画像を指定する。
「min-height: 100vh;」とすることで、画面の表示領域の高さいっぱいに画像を広げる。
■ファビコンの用意
Webサイトの制作時に設置を忘れがちなファビコン。ホームページができた段階で用意しておくとよい。
〇ファビコンとは
Webサイトをブックマークしたり、タグ表示した際にサイトの横にちょこんと表示されている小さなアイコンのことを「ファビコン」という。
ファビコンは実際に表示されるのは16px四方とかなり小さいが、とても大切。
複数のタブを開いているときや、ブックマークリストの中から選ぶとき、ユーザーがひと目見てどのサイトか区別できる。
〇どんなデザインのファビコンがよいのか
多くの場合、そのWebサイトのロゴマークを縮めたり、簡略化したものがファビコンのデザインとして採用されている。
ロゴが長方形だったり、テキストのみのデザインだったりする場合は、そのブランドを連想させるアイコンを作る。
そのアイコンをファビコンとして利用することでWebサイトのデザインに生かすことができる。
ファビコンは小さく、サイズ制限がある分、テーマカラーを利用したり、シンプルな図形を使って、わかりやすくデザインすることがポイント。
〇ファビコン用の画像を用意
IllustratorやPhotoshopなどのグラフィックツールを使ってファビコン用のファイルを作成。
サイズは縦横32px以上の正方形で、保存形式はPNG形式にするとよい。
〇HTMLの「head」内でファビコンを読み込む
例)作成したファビコン画像を「favicon.png」という名前で「images」フォルダーに保存。
index.htmlの「head」内に<link rel="icon" type="image/png" href="images/favicon.png">を追加。
〇ファビコンの生成サービスを使う
高解像度ディスプレイや異なるデバイスに対応させるにはもう少しコードを書き足す必要がある。
全てに対応する画像の作成や、コードの記述を楽にしたいときは、「RealFaviconGenerator」というWebのサービスを利用してみるとよい。
■ フルスクリーンページのカスタマイズ例
〇背景画像にブレンドモードで色を重ね合わせる
グラフィックツールに搭載されている「描画モード(ブレンドモード)」機能は複数の画像や色を様々な手法で重ね合わせ、独特の効果を生み出す。
ブレンドモードはCSSでも実装できる。
background-blend-modeプロパティを使い、値に加えたい効果の名前を指定すれば利用できる。
▲主な値
multiply・・・乗算
screen・・・スクリーン
pverlay・・・オーバーレイ
darken・・・暗く
lighten・・・明るく
color-dodge・・・覆い焼きカラー
color-burn・・・焼き込みカラー
hard-light・・・ハードライト
soft-light・・・ソフトライト
difference・・・差の絶対値
exclusion・・・除外
hue・・・色相
saturation・・・彩度
color・・・カラー
luminosity・・・輝度
〇背景をグラデーションカラーにする
グラデーションはbackground-imageプロパティに「linear-gradient」の値を使い、「,」で区切って異なる色を指定。
直線上に伸びるグラデーションではなく、円形のグラデーションを実装するには「radial-gradient」を使う。
〇背景画像にブレンドモードでグラデーションカラーを重ね合わせる
背景画像にグラデーションカラーを重ね合わせることもできる。
「background-blend-mode」でブレンドモードを指定するところは変わらない。
background-imageプロパティで背景画像とグラデーションカラーを「,」で区切って両方指定するところがポイント。
以上です!
タッチタイピングの練習(26日目)
タッチタイピングの練習、26日目です。
今日は、フルキーボードでことわざを打つ練習をしました。
今日のスコアはこちらです。
今日の最終スコアは、入力速度125文字で、正解率94%でした。
今までのスコアの変化はこちらです。
明日もフルキーボードの練習をしたいと思います!
タッチタイピングの練習(25日目)
タッチタイピングの練習、25日目です。
今日は、上段+下段の練習をしました。
今日のスコアはこちらです。
今日の最終スコアは、入力速度151文字で、正解率97%でした。
昨日よりも、かなり速度が上がった気がします。
今までのスコアの変化はこちらです。
明日は、フルキーボードの練習をしたいと思います!
【今日学んだこと】HTML CSS Webデザイン
今日は、Webデザインの勉強をしました。
今日から学習内容が「簡単なWebサイトの作成」に入ったので、その流れなどをまとめていきたいと思います。
★今日の内容
■フルスクリーンとは
フルスクリーンとは、画像や動画などのメインビジュアルを画面全体を使って表示させるレイアウトのこと。
印象的なデザインを作るをことができる。
フルスクリーンの部分をスクロールするとコンテンツが表示されるパターンもある。
ページを開いたときにはインパクトを与え、その下の部分からは詳しい情報を提供できる。
くわしい情報を掲載したいときはスクロールしたところに配置するとよい。
■フルスクリーンページの制作の流れ
実際にフルスクリーンページのWebページを作っていく。
〇作成するページ
まず、ホームページの作成。
おおきな画像を一面に配置したインパクトのあるページにする。
ロゴ、ナビゲーションメニュー、キャッチコピー、文章、ボタンのあるホームページ。
〇制作の流れ
01.「head」部分の記述
Webページの情報を記述する<head>タグから書いていく。
02.ロゴ、ナビゲーションメニューの作成
続いてページ上部に設置する、ロゴとナビゲーションメニューを作成。
03.コンテンツ部分の作成
ページの肝となるコンテンツ部分の作成。このページではキャッチコピー、文章、ボタンを用意。
04.ファビコンの設定
ページのタブに表示される「ファビコン」を作成。ファビコンはブラウザーのた部分に表示される小さなアイコンのこと。
■「head」の記述
〇ファイルの準備
フォルダーを新規作成し、フォルダー名を「WCB Cafe」とする。
その中に「index.html」という名前のHTMLファイルを新規作成する。
〇HTMLの骨組みを記述
HTMLファイルに必須となるタグから書いていく。
〇「meta」情報と「title」を記述
続いて<head>タグの中に、
文字コードの指定である<meta charset="utf-8">、
Webページのタイトルとなる<title>タグ、
そしてWebページの説明文を<meta name="description">で書き足す。
〇必要なCSSファイルを読み込む
各ブラウザーのデフォルトCSSはress.cssを使ってリセット。
見出しはGoogle Fontsを使って「Philosopher」というフォントを設定するので、Google Fonts用のCSSも読み込む。
その下にこれから指定していくstyle.cssを記述しておく。
以上です!