Excelでカレンダー作ってみた①- IF関数を使ったセルの色付けまでマスタしよう-
皆さん、職場でExcelを使っている方もたくさんいらっしゃるかと思います。
Googleカレンダーなどの社内カレンダーを使っている方も多いですが、
今回は条件付き書式などを使いカレンダーの曜日部分の色付けまで
行っていきます！
完成品は、自動で月を変えられる仕様になっています。
いろいろなものをExcelで作れることを実感するきっかけにして
頂ければ幸いです。
この記事で学べること！
- セルの書式設定を使った日付→曜日への表記変更
- 条件付き書式の使い方
- IF関数とweekday関数の使い方
それでは、始めていきましょう！
目次
1.＜完成物＞のプレビュー
それでは、次の項から手順を追ってカレンダーを作っていきましょう！
2.実際にカレンダーを作っていこう
2-1.セルに1週間単位で曜日を入力
まず、写真のようにB2セルに日付を入力(手入力でOK)
2-2.オートフィルでH2セルまで日付を反映させる
カーソルをB2セルの右下に置き、写真のようにH2セルまでをオートフィルで
日付を反映させる。
2-3.<1歩上の自分へ>セルの書式設定で日付→曜日に変化
B2セルで右クリック→「セルの書式設定」→「ユーザー設定」
→入力欄に「aaa」と入力→B2セルが曜日に変換される
曜日へ変換すると
↓
2-4.オートフィルでH2セルまでを曜日変換
カーソルをB2セルの右下に置き、写真のようにH2セルまでをオートフィルで
曜日に変換させる。
2-5.セルの書式設定で土曜日は"青"、日曜日は"赤"に変更する
B2セルを選択し、「ホーム」→「条件付き書式」
→「数式を使用して、書式設定するセルを決定」
→IF関数を使って日曜日を判別する式を入力する。
※Trueは色を変える処理を実行、""は空白処理といい何も処理をしないことを
意味する。
今、日曜日を赤色に変更したいので下の写真のように
「フォント」→「色」→「赤」にしてすべて「OK」を押す。
「OK」を押した後は
↓
B2セルの文字が赤色に変わっていますね！
最後にB2セルの右下にカーソルを合わせ、オートフィルでH2セルまで
条件付き書式の範囲を広げて今回のタスクは完了。
※土曜日の色の変更は一度ご自身で調べて、挑戦してみてくださいね！
weekday関数の使い方がヒントになりますので下記の【補足】を
参考にしてみてください。
【補足】weekday関数の使い方
weekday関数の（）の中身は日付のセルを選択。
結果は下の写真のように曜日に対応した数字が表示されます。
この結果を踏まえて土曜日の数字はいくつになるか実際にweekday関数を
使って確認してみましょう。
【追記】
※次回記事と最新記事をnoteで公開開始しました！
下のリンクから是非読んでみて下さい！！
次回記事はこちら↓
最新記事はこちら↓
これから、皆さんのためになるような記事を書いていこうと思います。
普段使っているExcelでいろいろなものが作れるという楽しさを発見して
頂ければと思います。どうぞ宜しくお願いします。
この記事がいいと思った方、ブログの読者登録とTwiitterでの拡散
宜しくお願いします。また、関数の使い方などご不明な点や
こんな記事を書いて欲しいなどご要望がありましたら、お気軽に
「お問い合わせフォーム」のメールアドレスからお問合せください。
一歩上の自分を目指して頑張っていきましょう！！
WEBページの作り方－CSSとは・導入準備－
皆さん、こんにちは🥵
暑い日が続き、食欲がわかない日も
あるかもしれませんが、食事と水分補給を
しっかりして、体調を整えていきましょう！
前回は、<nav>・<a>タグ、相対パスなど
今までのタグを復習しながらフッターを
完成させました。
フッターの作り方を復習をしたい方は下記より
前回の記事をぜひ見てみて下さいね！
今回は、CSSを使って前回までで作った
各ページ共通部分の『common.html』を
スタイリングする準備をしていきましょう(^^♪
この記事で学べること！
それでは、始めていきましょう(^^)/
目次
- 1.CSSとは
- 2.ドキュメントファイルに『CSS』フォルダ－を作る
- 3.『common.css』を作成する
- 4.CSSを使う宣言をする
- 5.全称セクレタ(*)でデフォルトのスタイルを解除する
- 6.本日の文法まとめ
1.CSSとは
CSSとは、Cascading Style Sheetの略で
HTMLデータのスタイルを調整する役割が
あります。
下記でHTMLだけのものとHTMLにCSSを
適用させたものを比較してみましょう！
『HTMLのみ適用』
HTMLのみでは、要素を上から下に
並べただけの構造になります。
『HTMLにCSSを適用』
HTMLにCSSを適用することで
背景を黒くしたり、文字を横に並べたりと
見栄えを整える役割があります。
2.ドキュメントファイルに『CSS』フォルダ－を作る
HTMLファイルはドキュメントファイル内に
そのまま格納しましたが、CSSファイルは
『CSS』フォルダを作成し、その中に
格納しましょう！
①『CSS』フォルダーを作成する
『common.html』のあるドキュメントフォルダー内で
右クリック→『新規作成』→『フォルダー』
→『CSS』の順で新しいフォルダーを作って
みましょう。
作ったCSSフォルダーの中に
CSSファイルを入れていく(格納)形に
なります。
3.『common.css』を作成する
画面左上の『ファイル』→『新規ファイル』
→『ファイル』→『名前をつけて保存する』
→『CSS』フォルダをクリック
→ファイル名を『common.css』→『保存』
の順でCSSファイルを作成する。
※拡張子が『.css』となることが
ポイントです！
4.CSSを使う宣言をする
HTMLを記述する際は、<!DOCTYPE html>と
DOCTYPE宣言しましたが、CSSを書く際は
下記のようにCSSを使う宣言をしましょう！
①@charsetでCSSを使う宣言をする
HTMLではDOCTYPE宣言をしてコードを書き始め
ました。
CSSでは下記のように『@charset "utf-8";』と
宣言をして、CSSを書いて行きます。
『；』の書き忘れに注意してくださいね( ﾟДﾟ)
5.全称セクレタ(*)でデフォルトのスタイルを解除する
さっそくCSSを書き始めていきたいところですが、
パソコンには予め設定されているデフォルト値
というものがあります。
デフォルト値だけの画面表示は、下記のように
なります。
デフォルト値がある状態でCSSで
スタイリングすると余白がずれたり等
スタイル調整がうまくできません。
よって、CSSでスタイリングする際は
最初にデフォルト値を解除する必要が
あります。
下記のようにして、デフォルト値を
解除しましょう。
全称セクレタ(*)以外にもデフォルト値の
解除方法はいろいろありますが、ここでは
全称セクレタ(*)でデフォルト値を解除します。
この部分は構文として覚えてしまいましょう！
｛｝内のpadding、marginなどはボックスモデル
という考え方を使って要素の位置を調節する為の
ものですが、詳細は次回以降の記事で解説して
いきます(*'ω'*)
キリがいいので、今回はこれで終わりに
しましょう(^^)/
6.本日の文法まとめ
次回はcssを使って画像サイズの調整や
背景色の指定などを行っていきましょう(^^♪
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
WEBページの作り方－フッターの作成－
皆さん、こんにちは🍧
梅雨が明け、さっそく台風が来たりと
一気に夏になってしまいましたね(*´Д｀)
暑い日が続きますので、水分補給をしながら
体調管理をしていきましょうね！
前回は相対パスを使った画像の指定や
<a>タグを使ったリンクの飛ばし方を
解説しました！
相対パスや<a>タグの使い方を確認したい方は
下記より前回の記事をぜひ見てみて下さいね！
今回は、<nav>、<a>タグや相対パスなど
今までに学んできたことを凝縮して
ヘッダー部分を作っていきましょう！
この記事で学べること！
それでは、始めていきましょう(^^)/
目次
- 1.コメントアウトでフッター部分を明確にする
- 2.<footer>タグでフッターエリアを作る
- 3.フッターエリア内にナビゲーションメニューを設置する
- 4.フッターエリア内にロゴ画像を設置する
- 5.著作権を表すコピーライトを入れる
- 6.『Go Live』機能でフッター部分を確認する
- 7.本日の文法まとめ
1.コメントアウトでフッター部分を明確にする
ヘッダーを作成する際に、ヘッダー部分を
明確にする為に<!-- headerここから -->と
コメントアウトしましたね。
同じ様にフッターでもコメントアウトをして
みましょう！
①ヘッダー下にコメントアウトを入れる
<!-- headerここまで -->の横でエンターキーを2回押して
スペースを空け、40行目をクリックして
下記のようにコメントアウトする。
キーボードの『Ctrl』キーと『？・/め』のキーを
同時に押すとコメントを入力する緑色の部分が現れ、
中に『footerここから』と入力する。
②更に『footerここまで』をコメントアウトする
フッターの終わりを明確にするために、
下記で更にコメントアウトしてみましょう。
<!-- footerここから -->の横でエンターキーを2回押して
スペースを空け、42行目をクリックして
下記のようにコメントアウトする。
キーボードの『Ctrl』キーと『？・/め』のキーを
同時に押すとコメントを入力する緑色の部分が現れ、
中に『footerここまで』と入力する。
2.<footer>タグでフッターエリアを作る
コメントアウトでフッター範囲を明確にした所で
今度はフッターエリアを作っていきましょう。
①<footer＞タグでフッターエリアを作る
先ほどコメントアウトした
<!-- footerここから -->の横をクリック、
エンターを押して改行し、<footer>タグを
下記のように記述する。
②フッターに名前をつける
cssでのスタイル調整に備えて
<footer>タグに下記のように
名前をつけましょう。
3.フッターエリア内にナビゲーションメニューを設置する
ヘッダーと同じようにして、フッターにも
<nav>タグでナビゲーションメニューを
<img>でロゴを<a>タグでリンクを飛ばし
ましょう。
①<nav>タグでナビゲーションメニューを設置する
<footer></footer>タグの間で
クリック、エンターを押して改行し、
<nav>タグを下記のように記述する。
②<nav>タグに名前をつける
cssでのスタイル調整に備えて
<nav>タグに下記のように
名前をつけましょう。
ヘッダーと同じ『site-menu』とする事で
cssで調整するときに、フッター・ヘッダーを
まとめて調整できる事がポイントです！
③<ul>・<li>タグでナビゲーション項目を記載する
<nav class="site-menu"></nav>タグの間を
クリック、エンターを押して改行し、
<ul>・<li>タグを下記のように記述する。
『はじめに』、『適応障害とは』・・・の部分は
ご自身の好きな項目にしてみて下さいね(^_-)-☆
上の画像では<a>タグを使ってリンクを飛ばして
しまいましたが、詳しくは下記記事の
3.『<a>タグでリンクを飛ばす』の④を見てみて
下さいね！
URL：WEBページの作り方－相対パス・<a>タグの使い方－ - ゆるゆるWEBブログ
4.フッターエリア内にロゴ画像を設置する
ヘッダー同様に、フッターにもロゴ画像を
設置してサイト内の回遊性を上げてみましょう。
①<img>タグを使って画像を指定する
</nav>タグの横をクリック、エンターを押して
改行し、<img>タグを下記のように記述する。
u
相対パスとalt属性で画像が表示できない時の
代替えテキストを記述することで
視認性を上げることが出来ます！
(ユーザビリティと言います)
②<a>タグでリンクを飛ばす
ヘッダー同様にロゴを押した際に、
最初のページに戻るように
<a>タグを下記のように記述する。
<a>タグの位置がずれた際は
『ずれている範囲を左クリック』
→『右クリック』→『選択範囲のフォーマット』
の順で修正しましょう(^_-)-☆
5.著作権を表すコピーライトを入れる
どこかのホームページを見た際に
ページ下に©○○と書かれているのを
見たことがありませんか？
これは『コピーライト』というもので
ページの権利(作成者)は○○ですと
著作権を表しているものです。
実際にフッターにコピーライト(©)を
表示してみましょう！
①『©』でコピーライトを記述する
<p>タグを下記のように記述して
コピーライトを記述しましょう。
『©』で著作権を表すコピーライト(©)を
記述することが出来ます。
②<small>タグで表示を小さくする
コピーライトのお作法として
<small>タグを使って表示を小さくします。
<small>タグを下記のように記述する。
cssでスタイリングするために
class="copyright"と名前をつけてましょう！
6.『Go Live』機能でフッター部分を確認する
『Go Live』はリアルタイムで作ったものを
確認する機能です。
『Go Live』をクリックしてフッター部分を
確認してみましょう！
フッターを表示できたところで
今回はここまでにしましょう(*'ω'*)
相対パスの指定やリンクの飛ばし方など
復習したい方は下記の記事を見てみて
下さいね！
URL：WEBページの作り方－相対パス・<a>タグの使い方－ - ゆるゆるWEBブログ
7.本日の文法まとめ
次回は『common.html』へのCSSの
導入準備を行っていきましょう(^^♪
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
WEBページの作り方－相対パス・<a>タグの使い方－
皆さん、こんにちは🥵
7月に入り各地で猛暑日が続くなど、厳しい暑さに
なっていますね。
熱中症にならないよう水分補給をしながら
エアコンも活用して体調管理に気を付けて
いきましょうね！
前回は、ヘッダーの作り方という事で
<div>タグを使った領域の確保や、
<nav>タグを使ったナビゲーションメニューの
設置方法を見てきました。
前回の記事をご覧になりたい方は下記URLより読んでみて下さいね！
URL：WEBページの作り方－ヘッダーの作成－ - ゆるゆるWEBブログ
今回はパスを使った画像の指定方法や<a>タグを使った
リンクを飛ばす方法について解説していこうと思います！
この記事で学べること！
- パスには絶対パスと相対パスがあり、相対パスがよく使われる
- 相対パス：
ドット(.)が同じ位置のディレクトリを指し
スラッシュ(/)を挟んで下のディレクトリが指定できる。
- リンクは<a>タグを使って飛ばす
- <a></a>の間に飛ばしたい要素を挟むことで
リンクを飛ばすことが出来る
それでは、始めていきましょう(^^)/
目次
1.パスとは？絶対パスと相対パスを理解しよう！
『パス』という言葉を始めて聞いた方も
いらっしゃるかもしれません。
また、既に勉強されてる方も、少し手間取った
思い出があるかもしれません(*´Д｀)
ここではパスの種類と指定の方法を画像を使いながら
簡潔に解説していこうと思います！
その前にまず『ディレクトリ』という言葉だけ覚えて
しまいましょう。
①『ディレクトリ』とは
『ディレクトリ』とは一言でいうと
フォルダ又はファイルのある場所を言います。
『common.html』のあるドキュメントフォルダー内で
右クリック→『新規作成』→『フォルダー』
→『images』の順で新しいフォルダーを
作ってみましょう。
『images』フォルダーは
『ドキュメント』フォルダーの下にあり
1つ下のディレクトリあると言います。
また、『common.html』ファイルと
『ドキュメント』フォルダーは同じ場所にあるので、
同じディレクトリにあると言います。
それそれで表してみましょう。
②『images』フォルダーを絶対パスで表す
絶対パスとはデスクトップ画面から
順を追って『images』フォルダーを指定する方法です。
しまいましょう)
③『images』フォルダーを相対パスで表す
『images』フォルダーを指定する方法です。
図2から相対パスで『images』フォルダーを
指定するには下記のように指定します。
前回記述した<img>タグにsrc属性を使い、
相対パスを使うことで『images』フォルダーを
指定することが出来ます。
※ドット(.)が『ドキュメントフォルダー』を指し
スラッシュ(/)で下の『images』フォルダーを
指定できます。
④『images』フォルダーの下に
更に『logo』フォルダーを作って相対パスで参照する
『images』フォルダーまで作っているので、
『images』フォルダーをクリック
→フォルダー内で右クリック→『新規作成』
→『フォルダー』→『logo』の順で新しいフォルダーを
作ってみましょう。
この『logo』フォルダーを相対パスで指定すると
下記のようになります。
※スラッシュ(/)を入れることで下の『logo』フォルダーが指定できます。
更に『logo』フォルダーにlogoの画像を入れ、
スラッシュ(/)でつなぐことで画像を指定することが出来ます。
2.画像を相対パスで指定する
1.④で相対パスで『logo』フォルダーまで
指定しているので、あとはlogo画像を用意しましょう。
①logo画像を用意する
logo画像を用意する方法はいろいろありますが、
個人で利用するならmyfreelogomakerがおすすめです！
URL:https://myfreelogomaker.com/
無料でバリエーションが多いので一見の価値ありです！
②logo画像を『logo』フォルダーに保存し、相対パスで
指定する
logo画像を『logo』フォルダーに保存しましょう。
下記のように保存できているか確認してみましょう。
(ご自身のお好きなlogo画像を保存してくださいね(*'ω'*))
保存が出来ていれば相対パスで指定可能なので
下記のように指定します。
※スラッシュ(/)を入れることでlogo画像『logo.jpg』が指定できます。
③拡張機能『Go Live』でlogo画像を表示確認する
VSCode画面右下の『Go Live』をクリックして
logo画像とナビゲーションメニューが表示されているか
確認してみましょう！
logo画像とナビゲーションメニューが表示さていれば成功です(^_-)-☆
3.<a>タグでリンクを飛ばす
皆さんはどこかのWEBページを見ている時
文字や画像をクリックして別のページに飛んだ経験はありませんか？
ここからは<a>タグを使ってWEBページ同士を
リンクさせる方法を見ていきます。
①logo画像にリンクを設定する
前回記述した<div class="header-inner">タグの
横をクリックしエンターを押して改行し、
<a>タグを下記のように記述する。
href属性で飛ばしたい先の相対パスを指定することで
リンクを飛ばすことが出来ます。
(index.htmlはcommon.htmlと同じディレクトリに
これから作成します)
index.htmlはcommon.htmlと同じディレクトリに
あるので、相対パスで指定する際は
href="./index.html"と指定します。
②<a>タグにclass属性で名前をつける
<a>タグに名前をつける事でCSSでスタイリングできるようにします。
下記のように名前をつけましょう。
<a>タグは<img>タグを囲っていて、
<img>はインライン要素というそのままでは
CSSで大きさの変更などが出来ない要素になるので、
<a>タグに名前をつけます。
③</a>タグの位置を<img>タグに下に置く
<a>タグを入力すると自動で</a>も
一緒に記述されますがこのままではリンクが
作動しないので、<img>タグを囲むように
</a>タグの位置を修正しましょう。
<img>タグの横をクリックしエンターを押して改行し、
<a>タグを下記のように貼り付ける。
貼り付けた時、</a>タグの位置が<a>タグの位置と
ずれている時は、『左クリックで範囲を選択』
→『右クリック』→『選択範囲のフォーマット』
の順で位置を調整する。
④<a>タグでナビゲーションメニューにリンクを設定する
logo画像と同様にナビゲーションメニューも
<a>タグで囲むとリンクを飛ばすことが出来ます。
<li>タグの横をクリックし、<a>タグを下記のように記述する。
href属性で飛ばしたい先の相対パスを指定することで
リンクを飛ばすことが出来ます。
(私の場合は『adjustment-disaster.html』・・・
としましたが、ご自身のつけたいファイル名にして
くださいね)
このまま、フッターもやってしまいたいところですが
パスの指定方法、<a>タグの使い方を整理してほしい
ので、今回はこれで終わりにしましょう(^^)/
4.本日の文法まとめ
- パスには絶対パスと相対パスがあり、相対パスがよく使われる
- 相対パス：
ドット(.)が同じ位置のディレクトリを指し
スラッシュ(/)を挟んで下のディレクトリが指定できる。
- リンクは<a>タグを使って飛ばす
- <a></a>の間に飛ばしたい要素を挟むことで
リンクを飛ばすことが出来る
次回はパスの指定や<a>タグの使い方を復習しながら
フッターを作っていきましょう(^^♪
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
WEBページの作り方－<header>タグの使い方－
皆さん、こんにちは🌞
観測史上最速で梅雨が明けてしまい、長い夏が
始まりましたね(*´Д｀)
水分補給をしながら、体調管理に気を付けて
暑い夏を乗り切りましょうね！
前回は、WEBフォントの導入方法と簡単なSEO対策を
解説しました。
もう一度復習をしたい方や、SEO対策を確認したい方
など下記URLより前回の記事をぜひ見てみて下さいね！
URL：WEBページの作り方－WEBフォント・SEO対策－ - ゆるゆるWEBブログ
今回は、実際に作りたいデザインを確認しながら
<body>タグ内を書いていきましょう(^^)/
この記事で学べること！
-
<body>タグ内で<header>と入力すると
ヘッダー領域が作成される
- <div>タグで要素を入れる領域を作ることが出来る
- <nav>タグでナビゲーションメニューを作ることが出来る
- <ul>・<li>タグで箇条書きのリストができる
- 拡張機能『Go Live』で作ったものをリアルタイムで確認できる
それでは、始めていきましょう(^^)/
目次
- 1.【復習】<body>部分とは
- 2.作るWEBページを確認する
- 3.<body>タグ内にヘッダー領域を作る
- 4.<header>タグ内に<div>タグで要素を入れる領域を作る
- 5.<nav>タグでナビゲーションメニューを作成する
- 6.本日の文法まとめ
1.【復習】<body>部分とは
HTMLでは、<head>部分と<body>部分に分けて
コードを書くとお話しました。
それぞれの部分の役割ですが
- <head>部分・・・Google Chromeなどのクローラーに認識してもら部分
(検索した際、上位表示するのに大切な部分に
なります)
- <head>部分・・・私たち人が見る部分を表現する部分
2.作るWEBページを確認する
ここからは実際に作るWEBページを確認しながら、
<body>部分を書いていきましょう。
①作るWEBページを確認する
まずはシングルカラムレイアウトを作っていきます。
(全体が分かるように表示倍率30％で貼り付けています)
丸ごと1ページ作りたところですが、
デザインの調整がしやすいように下記の羽の画像のある
上部(ヘッダー)と下部(フッター)を作っていきましょう。
今回の記事ではヘッダーのみ作っていきます。
フッターは次回の記事で作っていきましょう。
3.<body>タグ内にヘッダー領域を作る
ここからはVSCodeを開いてヘッダー領域の作り方を
見ていきましょう！
下記の手順に従って実際にヘッダー領域を作ってみましょう。
①『common.html』を開く
『VSCode』を立ち上げる
→前回作成した『common.html』を開く
もし『common.html』が自動選択されていなければ、
画面上部の『ファイル』→『フォルダーを開く』
→『デスクトップ』→『common.html』の順で
前回作成したhtmlファイルを選択する。
②<body>タグ内にヘッダー領域を作る
<body></body>タグの間をクリック、
エンターを押して改行し、<header>タグを
下記のように記述する。
<header>と入力するとヘッダー領域が作成され
その中に要素を入れていくことでヘッダー部分が出来上がっていきます！
③ヘッダー領域に名前を付ける
ヘッダー領域に下記のよう名前をつけましょう。
(名前を"header"とするとわかりやすいです)
class属性を使って名前をつけることがポイントです(*'ω'*)
今後、CSSでスタイルを調整する際に領域を指定する
必要があり、その為に名前をつけています！
4.<header>タグ内に<div>タグで要素を入れる領域を作る
『ヘッダーとフッター部分』の画像を見るとヘッダー領域には
『羽のロゴ』と『はじめに』・『適応障害とは』・・・と
4つのナビゲーションメニューが表示されています。
タグ内に要素を配置するとき、それぞれ要素を入れる
領域を作ることがポイントです！
(<header>が土地だとすると、中のそれぞれの要素が家のイメージです)
それでは、<header>タグの中にロゴを入れる領域と
ナビゲーションメニューの領域の2つを作り、
更にそれを囲む領域の3つを作っていきましょう。
①<div>タグでロゴを入れる領域を作る
<header class="header"></header>タグの間を
クリック、エンターを押して改行し、
<div>タグを下記のように記述する。
(名前は"header-inner"とします)
divはdivision(分割)の略で、領域を作るときは
<div>タグでそれぞれの領域を作っていきます。
②<img>タグで領域内にロゴを指定する
<div class="header-inner"></div>タグの間を
クリック、エンターを押して改行し、
<img>タグを下記のように記述する。
パスを使って画像を指定するのですが、
画像保存用のフォルダを作ったり、パスの指定方法を
解説する必要があるため、先にナビゲーション
メニューを作成していきます。
5.<nav>タグでナビゲーションメニューを作成する
ナビゲーションメニューはヘッダー領域右側の
『はじめに』・『適応障害とは』・・・の部分になります。
クリックするだけで見たいページに飛ぶことが出来ます！
下記の手順に従って実際にナビゲーションメニューを
作ってみましょう。
①<div>タグでナビゲーションメニューの領域を作る
<img>タグの横をクリックしエンターを押して改行し、
<div>タグを下記のように記述する。
<div>タグを使ってheader-inner領域の中に
ナビゲーションメニュー領域のheader-site-menuが
出来ました。
②<nav>タグでナビゲーションメニューを作る
<div class="header-site-menu"></div>タグの間を
クリック、エンターを押して改行し、
<nav>タグを下記のように記述する。
③<ul>・<li>タグでナビゲーション項目を記載する
<nav class="site-menu"></nav>タグの間を
クリック、エンターを押して改行し、
<ul>・<li>タグを下記のように記述する。
○○の部分はご自身の好きな項目にしてみて下さいね(^_-)-☆
④拡張機能の『Go Live』で作ったものを確認する
最初の記事でVSCodeに拡張機能の『Go Live』を入れました。
『Go Live』はリアルタイムで作ったものを確認する機能です。
『Go Live』をクリックしてナビゲーションメニューを
確認してみましょう！
今回は<div>タグの使い方に絞って解説をしました。
キリがいいので今回はこれで終わりにしましょう(^^)/
6.本日の文法まとめ
-
<body>タグ内で<header>と入力すると
ヘッダー領域が作成される
- <div>タグで要素を入れる領域を作ることが出来る
- <nav>タグでナビゲーションメニューを作ることが出来る
- <ul>・<li>タグで箇条書きのリストができる
- 拡張機能『Go Live』でリアルタイムで作ったものを確認できる
次回はパスを使った画像の指定や
<a>タグでリンクを飛ばす準備をしていきます(^^♪
(本来なら<img>タグの所で続けて解説したいのですが
パスの説明や画像格納フォルダの作成・フリーの
画像取得サイトの紹介など長くなるため、
今回は<div>タグで領域を作ることを優先に
解説しました。)
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
WEBページの作り方－WEBフォント・SEO対策－
皆さん、こんにちは！
沖縄地方の梅雨明けが発表され、
全国の梅雨明けも迫ってきましたね⛅
既に暑い日が続いていますが、水分補給をしながら
健康に気を付けて過ごしていきましょうね！
<head>部分に<meta name>タグを記述することを解説しました！
前回の記事をご覧になりたい方は下記URLより読んでみて下さいね！
URL：WEBページの作り方－コメントアウトからスマホ対応－ - nikusukixのブログ
今回はWEBフォントの使い方や<meta name>タグを
使った簡単なSEO対策について解説していこうと
思います！
この記事で学べること！
- WEBフォントの導入方法と記述箇所が分かる
(https://fonts.google.com/からコードを
コピーして<head>部分に貼り付ける)
- <title>タグでタイトルを<meta name>タグで
ページ概要を記載することでGoogleなどの
クローラーにWEBページを認識してもらうことが出来る
- SEOとは検索エンジン最適化といい、
<head>部分にページタイトルや概要を記載し、
更にキーワード選定も行うと上位表示されやすく
なる
それでは、始めていきましょう(^^)/
目次
1.WEBフォントとは
以前はWEBページを表示する際、パソコンによって
文字フォントが崩れてしまうという事が起きていました。
それを解決してくれるのがWEBフォントになります！
コードをHTMLファイルに記述することで、
WEBページを表示する際に文字フォントも一緒に
パソコンにダウンロードすることで、どのパソコンでも
フォントが崩れないようになっています(*'ω'*)
2.<head>部分に文字フォントのコードを記述する
ここからは、WEBフォントの導入方法について見ていきましょう。
下記の手順に従って実際にWEBフォントを導入してみましょう。
①『common.html』を開く
『VSCode』を立ち上げる
→前回作成した『common.html』を開く
もし『common.html』が自動選択されていなければ、
画面上部の『ファイル』→『フォルダーを開く』
→『デスクトップ』→『common.html』の順で
前回作成したhtmlファイルを選択する。
②Google FontsからWEBフォントのコードをコピーする
下記URLからGoogle Fontsにアクセスし、
WEBフォントのコードをコピーする。
画面左上の『Search fonts』と書かれた検索窓にお好きなフォントを入力する
(ここでは『Montserrat』で検索し、Bold700を選択する)
→画面右下の<link rel=・・・rel="stylesheet">までをコピーする
③<head>タグ内にWEBフォントのコードを貼り付ける
前回記述した<meta name>タグの横をクリックし、
エンターを押して改行する。
キーボードの『Ctrl』キーと『V』のキーを同時に押して
WEBフォントのコードを張り付ける。
(もし、貼り付け位置が<meta name>タグと
ずれている時は『左クリックで範囲を選択』
→『右クリック』→『選択範囲のフォーマット』
の順で調整できる)
3.<title>タグでタイトルを<meta name>タグで記事概要を記載する
①<title>タグで記事にタイトルをつける
前回記述した<meta charset>タグの横をクリックし
エンターを押して改行する。
<title></title>の間をクリックし、記事のタイトルを記載する。
(ご自身で作るWEBページのタイトルを記載してくださいね！)
②<meta name>タグでページ概要を記載する
<title>タグの横をクリックしエンターを押して改行し
<meta name>タグを下記のように記述する。
content属性でページ概要を記載することで、
WEBページの概要を認識してもらうことが出来ます。
4.SEOとは
『SEOって何？』 と思われた方もいらっしゃるかもしれません。
SEOとは
Search Engine Optimizationの頭文字を取ったもので
『検索エンジン最適化』と言います。
検索エンジンはGoogle Chromeが代表的です。
検索エンジンは定期的にWEBページを巡回して、
最適なWEBページを上位に表示する仕組みになっています。
クローラーは巡回した際に<head>部分で
WEBページの内容を認識するので、
タイトルやページ概要を記述しておかなければ
いけないのです！
キリがいいので今回はこれで終わりにしましょう(^^)/
5.本日の文法まとめ
- WEBフォントを導入することで、どのパソコンで
見ても同じフォントにする事ができる
- <head>部分に<title>タグと
<meta name>タグを記載することで
クローラーが巡回した際に最適なものが
上位表示される
- SEOとは検索エンジン最適化といい、
ページタイトルや概要を記載し、更に
キーワード選定も行うと上位表示されやすく
なる
次回は実際に作りたいデザイン確認しながら
<body>タグ内を記述いこうと思います(^^♪
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
WEBページの作り方－コメントアウト・スマホ対応－
皆さん、こんにちは(*'ω'*)
梅雨らしいお天気が続いていますが、
いかがお過ごしでしょうか？
沖縄地方の梅雨明けが発表され、
他の地域も梅雨明けまであと少し！
水分補給をしっかりしながら、体調管理に気を付けて
行きましょうね(^_-)-☆
さて、前回はHTMLを使う際は
最初にDOCTYPE宣言をすることや
<head>タグや<body>タグについて解説しました。
今回はコードを見やすくする方法(コメントアウト)や
文字コードについて解説していこうと思います！
DOCTYPE宣言や<head>、<body>タグの使い方を
知りたい方は下記URLより前回の記事を
ぜひ見てみて下さいね！
URL：WEBページの作り方－HTMLの書き方－ - nikusukixのブログ
この記事で学べること！
- キーボードの『Ctrl』キーと
『？・/め』のキーを同時に押してコメントアウト
- HTMLでは『UTF-8』という文字コードを指定する
- <meta name>タグにcontennt属性で
『width-device-width』と指定すること
でスマホ対応できる
それでは、始めていきましょう(^^)/
目次
1.コメントアウトとは
コードを書くにつれて量が多くなり、
後で見返した時や他の人に引継ぎをする時など、
見にくくなってしまいます。
そこで、部分ごとにコード内容をコメントで
記載しておくと見返した際にコードの構造が
分かりやすくなります！
コメントを記載することを
『コメントアウト』と言います。
ここで身に着けておくと便利です。)
2.コメントアウトのやり方
見ていきましょう！
下記の手順に従って実際にコメントアウトして
みましょう。
①『common.html』を開く
『VSCode』を立ち上げる
→前回作成した『common.html』を開く
もし『common.html』が自動選択されていなければ、
画面上部の『ファイル』→『フォルダーを開く』
→『デスクトップ』→『common.html』の順で
前回作成したhtmlファイルを選択する。
②コメントアウトする
<html>タグの横でエンターキーを2回押して
スペースを空け、3行目をクリックして
コメントアウトする。
キーボードの『Ctrl』キーと『？・/め』のキーを
同時に押すとコメントを入力する緑色の部分が現れる。
③コメント入力部分にコメントを入力する
コメント入力部分(緑色の部分)中央をクリックする。
コメント入力部分(緑色の部分)中央に、
『headここから』と『headここまで』を入力する。
(head部分の範囲を明確にするため)
④body部分も同様にコメントアウトする
<!-- headここまで -->と書いた横で
エンターキーを2回押してスペースを空け、
②、③の順で同様にコメントアウトする。
(9行目をクリックすることに注意！)
コメント入力部分(緑色の部分)中央に、
『bodyここから』と『bodyここまで』を入力する。
(body部分の範囲を明確にするため)
これで<head>部分と<body>部分の範囲が明確になりましたね(*'ω'*)
コメントアウトすることでコードの構造が分かり、
後で見たときにコードが見やすくなるので、身に着けてみて下さいね！
3.文字コードを指定する
『文字コードって何？』と思われた方も
多いかと思います。
文字コードとは文字をコンピュータ上の固有の数値に
置き換えるものを言い、HTMLで文字コードを
指定することで文字化けを防ぐことが出来ます。
HTMLでは『UTF-8』という文字コードが推奨されています。
4.<meta>タグで文字コードを指定する
①<head></head>タグの間をクリックして改行する
<head></head>タグの間をクリックし、エンターを押して改行する。
②<meta charset>タグで文字コードを指定する
<meta charset>タグで下記のようにUTF-8を指定する。
コード中の『＝』を入力すると、
自動でダブルクオーテーション『“”』が入力されます。
これで、文字コードの指定完了です！
5.スマホ対応にする
皆さん、ネットにアクセスする際は
スマートフォン・パソコンどちらを使っているで
しょうか？
スマートフォンとパソコン、両方を使っている方も
多いですがスマートフォンのみ使っている方も
少なくありません。
よって、スマートフォンからWEBページを見た際にも
きちんと表示されるよう調整する必要があるのです。
ここではその準備として、
<head>タグ内にスマートフォン表示に対応できる
タグを記述します。
①<meta name>タグを記述する
先ほど指定した文字コードの行でエンターを押して
改行し、<meta name>タグを下記のように記述する。
content属性で『width-device-width』とすることで
WEBページの表示サイズを各自のスマートフォンの
画面の幅に合わせて変えることが出来るように
なります！
(これをレスポンシブ対応と言います)
これで、WEBページを各自のスマートフォンの
画面の大きさに合わせる(レスポンシブ対応)の設定は
完了です(^^♪
今回はこれで終わりにしてゆっくり休みましょう(^^)/
6.本日の文法まとめ
- コメントアウトすることで後で誰が見ても
コードの構造を把握することが出来る。
-
<meta charset>タグで文字コードを
指定することで文字化けを防ぐことが出来る。
-
<meta name>タグとcontent属性を使うことで
スマートフォンの画面の幅に合わせて
WEBページの表示サイズを変えることが出来る
ようになる。
次回はWEBフォントの使い方やGoogleなどの
クローラーにWEBサイトの概要を認識してもらうための
<meta name>タグの使い方を見ていこうと思います(^^♪
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
