【3日目】ドットインストールでHTML学習
引続きプログラミング学習を続けていきます。
使用している教材は以下のドットインストール。
【ドットインストールURL】
本日学習した内容は以下3回分の動画です。
初めてのHTML（全15回）
#05 全角文字に気をつけよう
#06 文書全体につけるタグを見ていこう
#07 文書に関する情報を設定しよう
#05 全角文字に気をつけよう
要するに、コードを書く際に大文字が混ざっていないか気を付けましょう、、、ということです。
例えば、“J”と“ｊ”の違い、“ ”と“ ”の違い、“＜”と“<”の違い、を誤るとWebページに正しく表示されなくなるのです。
#06 文書全体につけるタグを見ていこう
コードの一番最初に“HTMLを開始しますよ！！”という宣言をコンピュータにする必要があります。
それが
<!DOCTYPE html>
です。
とりあえず必ずつける決まり文句のようなものなのでとりあえずコードの先頭に書いておきます。
次に、記述するのが
<html lang="ja">.....</html>
です。
<html>.....</html>はこっからここまでがHTML文書だよというタグです。
さらに“日本語の文章だよ”と同時に宣言してあげるために属性として
lang="ja"をつけておきます。
次に<html>.....</html>の間に
<head>.....</head>を入れていきます。
<head>タグは、検索エンジンやWebブラウザに向けた情報を定義するコードを記述し、画面上に表示されない部分全体を囲うタグです。
「表示されないなら何のために記述するのか?」という疑問が浮かぶかもしれませんが、冒頭でも言った通り検索エンジンやWebブラウザに向けてWebサイトの情報を示しているのです。なので、見えないからといって適当な記述をしているとSEO上で大きな損失となり、最悪の場合では正常にWebページを表示できなくなります。
次に<head>.....</head>のすぐ下に
<body>.....</body>を入れていきます。
<body>タグは、直接ユーザの目に入るコンテンツを記述するエリアです。今、皆さんが見ているこのページの文章や画像は全てbodyタグの中に記述されているものです。
ここら辺の詳しい説明は以下のリンクを参照してください。
かなりわかりやすかったです。
最後に、bodyタグの間に、今まで作成したコードを移してあげれば作業完了です。
現時点のコードは以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
<img src="img/momo5.jpeg" width="140" height="140" alt="太郎のアイコン">
<h1>山田太郎</h1>
<p>UI/UXデザイナー見習いです</p>
</body>
</html>
#07 文書に関する情報を設定しよう
headタグに色々な情報を付け加えていきます。
まずmetaタグを書いていきます。
<meta charset="utf-8">
<meta>タグとは、検索エンジンに対して「このWebページの概要はこんな感じです」と伝えるものです。イメージとして、metaタグは検索する人への道標のようなものだと思ってください。直接SEOに関わるわけではありませんが、検索した人がまず目にする部分です。
クリックしたくなるような文章を書いておけば、クリック率が上がるので、間接的ですがSEOに効果があるかもしれません。
今回はmetaタグの属性として charset="utf-8"を記載しています。
charsetとは「character set」の略でcharacter（キャラクター）は、コンピュータ上で、文字（数字、記号も含む）のことです。
もし、HTMLソース中に上記の指定が無い場合、ウェブページが文字化けしてしまう可能性があります。
理由は「UTF-8」は Win、Mac、Linux、Unix、どんな OSでもOKなのと、2バイト文字（漢字や仮名などの日本語・中国語・ハングル・アラビア語など）も含めた、世界中の言語の文字を表示できるから、、、だそうです。難しい、、、
詳細は以下ページ参照
次にWebページタブ上に表示するタイトルを設定してあげます。
<title>太郎のポートフォリオサイト</title>
metaタグ内にtitleタグを入れてあげると、Webページを開いた時のタブ名が表示されます。要するに、Webページの表札みたいなものだと思います。
次にWebページタブ上のアイコンを設定してあげます。
<link rel="icon" href="favicon.ico">
linkタグとは、検索エンジンやブラウザに対して、「このページは、別のこのファイルとこんな関係があるよ」と伝えるものです。
rel="icon"とは、hrefで指定したファイルはアイコン（=icon）ですよ！！
（relはrelation=関係性の略です。）
href="favicon.ico"とはファイルのURLはfavicon.icoというファイルに入ってますよ！
（hはhypertext、refはreference=参照、fabvicon=favorite iconの略らしい。）
詳細は以下ページ参照
次に文章の説明をしてあげます。
<meta name="description" content="太郎のポートフォリオサイトです。">
meta descriptionは、検索エンジンと検索ユーザーへ、ページの概要を伝えるためのタグです。Googleは、そこに書かれたテキストの内容を読み取り、検索結果画面に表示するサイト概要文、もしくはページ概要文に利用します。
上図の赤枠部分が、meta descriptionから読み取られた部分です。この中に検索キーワードと同じ言葉が入っているときは、検索結果上で太字で強調表示されます。そのため、ユーザーのクリック率を高めるために非常に重要です。
name="description"について、description=説明の意味です。
content="太郎のポートフォリオサイトです。"とは説明（=description）の内容（=content）は"太郎のポートフォリオサイトです。"という内容です。
詳細は以下ページ参照
現時点のコードは以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>太郎のポートフォリオサイト</title>
<link rel="icon" href="favicon.ico">
<meta name="description" content="太郎のポートフォリオサイトです。>
</head>
<body>
<img src="img/momo5.jpeg" width="140" height="140" alt="太郎のアイコン">
<h1>山田太郎</h1>
<p>UI/UXデザイナー見習いです</p>
</body>
</html>
以上で全3回の講義は終了です。
ちょっとずつ難しくなってきました、、、
ひとつひとつGoogle検索しながらタグの意味を調べていっているので、結構時間がかかってしまいました。
復習も兼ねているのでいいのですが、、、
最初は大変だと聞きますし、引続き頑張っていきます。
【2日目】ドットインストールでHTML学習
引続きプログラミング学習を続けていきます。
使用している教材は以下のドットインストール。
【ドットインストールURL】
本日学習した内容は以下4回分の動画です。
初めてのHTML（全15回）
#01 プロフィールサイトを作ってみよう
#02 ブラウザに名前を表示しよう
#03 タグでマークアップしてみよう
#04 imgタグで画像を表示しよう
本日から本格的にＨＴＭＬ学習を開始していきます。
#01 プロフィールサイトを作ってみよう
プロフィールサイトの完成イメージの確認と、フォルダの準備をしました。
特に説明が不要な講義でした。
次回から本格的にコードを書いていくようです。
#02 ブラウザに名前を表示しよう
今回から実際に 、Atomエディタを使用してコードを書いていきます。
まず、“山田太郎”と打ち込んだ後、一旦ファイルを保存しておきます。
次にGooglechrome（ブラウザ）状にドラッグ&ドロップしてブラウザ上に表示させます。
実際にGooglechrome上に自作のWebページが表示されると感動します。
#03 タグでマークアップしてみよう
今回は2種類の“タグ”と“マークアップ”について学びました。
<h1>.....</h1> → .....をヘッダーheader（見出し）として表示したいときに使うタグ
<p>.....</p> → .....をパラグラフparagraph（文節）として表示したいときに使う
そもそもタグとは、、、
タグというマーク（命令）を使って、HTML文書の構造（ここは見出しでここからは段落など）を指定したり、文字の大きさや色を変えるとか、画像を表示することなどが出来ます。
そしてマークアップとは、、、
文書を理解させるために、ルールに従ったタグを記述していくこと、これを「マークアップする」と呼びます。
実際に打ち込んだコードは以下の通りです。
<h1>山田太郎</h1>
<p>UI/UXデザイナー見習いです</p>
Googlechrome上で表示させてみると、“山田太郎”が大きくなり、説明文章として“UI/UXデザイナー見習いです”が表示されました。
いちいち感動します、、、！！
#04 imgタグで画像を表示しよう
今回はimgタグを使ってWebページに画像を挿入する作業を行いました。
<img>
イメージタグ単体では画像は挿入できません。なぜならソース（画像元）が指定されていないからです。
<img src="img/taro.png">
ソース（画像元）を指定してあげます。
src="....."の.....部分に画像場所を指定してあげると表示させることができます。
src="....."は<img>タグの“属性”と呼ばれます。コードを記入することでパソコンに対して、色々な注文を行うことができます。
今回はimgフォルダ内にある、taro.pngファイルを表示させます！！と注文しているわけです。（※ “ / ”を使うことでフォルダの区切りですよ、と指示してあげることができます。）
<img src="img/taro.png" width="140" height="140">
今度は属性を二つ追加しています。
width="....."は横幅を.....にしますという注文
height="....."は縦幅を.....にしますという注文
<img src="img/taro.png" width="140" height="140" alt="太郎のアイコン">
最後にalt属性の解説です。
『alternate：代用』という単語を略した言葉で、画像を言語化したもの、というと少し分かりやすいかもしれません。つまり、『画像が表示されないときに画像の代わりに表示されるテキスト』がaltタグの役割といえます。
alt="....."は画像がエラー等で表示されない場合に.....を表示しますという注文
つまり、
<img src="img/taro.png" width="140" height="140" alt="太郎のアイコン">
は
imgフォルダ内にある、taro.pngという画像ファイルを横幅140、縦幅140で表示させてください。ただし、何らかの理由で画像が表示されない場合は“太郎のアイコン”という文字を表示させてください。
というコードになります。
参考までに、現時点のコードは以下の通りです。
<img src="img/momo5.jpeg" width="140" height="140" alt="太郎のアイコン">
<h1>山田太郎</h1>
<p>UI/UXデザイナー見習いです</p>
以上で4回分の動画でした。
動画自体は10分程度なのでサクッと終わります。
次回も頑張って学んでいきます。
【1日目】ドットインストールでHTML学習
本日からWebプログラミング学習を始めます。
これからプログラミング学習を始める方々の参考になればと思います。
学習ツールは“ドットインストール”を使用しています。
有名ブロガーまなぶさんがおススメしている無料プログラミング学習サイトです。
【ドットインストールURL】
【まなぶさんのブログ】
本日学習した内容は以下4回分の動画です。
HTML/CSSの学習環境を整えよう[Windows編]（全4回）
#01 Chromeブラウザを導入しよう
#02 Atomエディタを用意しよう
#03 プログラミング用フォントを導入しよう
#04 ファイルの拡張子を表示させよう
まず、全4本分の動画を見終えた感想としては、、、
動画1本分の動画が非常に短い！！！（約2分半）
すぐ終わる！！！サクサクいける！！
実際に4本分の動画を観終えるまでに20分もかかかりませんでした。
これならストレスなく学習していけそうです。
さて、各動画についてもコメントしていきます。
#01 Chromeブラウザを導入しよう
パソコンを立ち上げる
→インターネット検索画面を立ち上げる
→“Google Chrome”で検索
→ダウンロード
これだけです！！簡単です。一瞬で終わりました。
どうやらGoogle Chromeで学習していくようなので、とりあえず従いました。
#02 Atomエディタを用意しよう
＃1同様にアプリをダウンロードするだけです。
パソコンのスペックが低いせいか、ダウンロードに時間がかかり10分ほどかかってしまいました、、、早くＭａｃＰｒｏ買おう、、、、
Atomというアプリを使ってプログラミングを学習していくようです。
詳しく調べてみると、Atomはプログラミング初心者から上級者まですべての方にオススメできるテキストエディタのようです。
テキストエディタとは、文章（テキスト）を編集するためのアプリで、例えばプログラミングでは、プログラム（コンピュータへの命令）をテキストで書きますので、プログラマーにとっては、テキストエディタの選択はプログラマー人生を決定づけるほどと言えます。
#03 プログラミング用フォントを導入しよう
Atomを立ち上げて、設定画面で“Ricty Diminished”というフォントを登録しました。
調べてみると、Ricty Diminishedは、混同しやすいフォントを見分けやすいように作成されたフォントのようです。要するにプログラミングする際のおすすめフォントのようです。
#04 ファイルの拡張子を表示させよう
ＰＣの拡張子設定を変更しました。
拡張子とは、拡張子とはファイルの末尾に付いている「．（ピリオド）+英数字3文字」で表す記号のようなもので、ファイルの種類を示すのに使われます。つまり、この拡張子を見るだけでそのファイルが何のファイルかを特定することができるわけです。
例えば、、、以下のような英数字のものが拡張子と呼ばれるものです。
.jpg
.txt
.xls
以上で前四回の学習を終了です。
