今日やったこと
- Udemyの「Web開発入門完全攻略コース - プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！」のセクション6の56~63
- セクション７の64~73
- セクション8の74~78
以下、パートごとにとったメモです。
セクション６CSSステップアップ編
56.イントロダクション-CSSステップアップ編-
セクション６の概要です。
57.フォント①
PCやスマホなどに入っているフォントはそれぞれ異なるため、こちらが指定したフォントで見てもらえない可能性があります。
なので、サイトを作るときにフォント指定をする時は、複数のフォントを指定する必要があります
58.フォント②
青空文庫の文章を用いて、フォントを指定する練習を行いました。
サイト全体のフォントを指定するときは、セレクターをbodyにします。
59.フォント③
フォントに関するプロパティ
- font-family
- font-size
- font-weight
- line-height
- text-align
- text-decoration
の解説動画。
60.Webフォント
Webフォントを使うと、どのユーザー環境でも同じフォントが表示されるようになります。
代表的なwebフォントはgoogle web fonts。
アイコンではFont Awesomeがよく使われます。
61.Google Webフォント日本語
Google webフォントの使い方の解説動画です。
Google Web Fontsの使い方はサルワカさんのブログ記事にもわかりやすく書かれています。
【2019年版】Google Fontsの使い方：初心者向けに解説！
（https://saruwakakun.com/html-css/basic/google-fonts）
62.ボックスモデル
ボックスモデル（padding、margin、border）の解説動画です。
これは実際に手を動かして、どのようなものかを体感するのが一番理解しやすいと思います。
63.フロートレイアウトの基本
floatとwidthを使って行うレイアウトの基本についての動画です。
セクション6CSSステップアップ編 全体の感想
ステップアップ編でしたが、特に理解できないところはありませんでした。
これまでのセクション同様に、Progateをちゃんとやってきた人にとっては簡単な内容です。
ということで、次のセクションに進みたいと思います。
セクション7実践：Webサイトのコーディング
64.イントロダクション-Webサイトのコーディング
セクション７の全体像の説明動画です。
65.補助教材：サンプルコード
Web開発入門のサポートサイトが紹介されています。
ありがたいですね。
https://programmingnavi.com/support-web-development/
66.ファイルの作成
セクションで使うファイルの準備をしました。
67.HTMLによるマークアップ1
ヘッダーとメインページのHTMLマークアップをしました。
これまでに解説されていなかったclearfixだったり、headerタグ、mainタグがいきなり出てきたので、本当の初心者の方は戸惑うのではないかと思いました。
Placeholder.com(https://placeholder.com/) を利用して、ダミー画像を使う方法を学びました。
68.HTMLによるマークアップ2
67の続きです。
asideやsection、dlなどのProgateでは出てこないタグも出てきます。
ですが、divの考え方を理解していれば特に問題ないと思いました。
HTMLで©と入力すると©︎マークが表示できるのは知らなかったです。
<small>© 2018 CSS Cafe</small>
Smallタグは著作権を表す時によく使うタグだそうです。
69.CSSによるスタイルの設定1
先ほど作ったHTMLをCSSで装飾していきました。
ここで初めて出てくる内容もあるのですが、1つ1つ解説しながら進んでいくので、特に問題なく理解できました。
ただ、僕の場合はテックアカデミー のフロントエンドコースを受講したこともあるので、理解できましたが、Progateしかやったことのない方は理解するのが少し大変かもしれません。
70.CSSによるスタイルの設定2
69の続きです。
特に問題ありませんでした。
71.CSSによるスタイルの設定3
70の続きです。
擬似クラスのlink、visited、hover、active全てを使いました。
72.メイン画像の設定
ダミー画像で埋めていた部分に画像を入れました。
73.メタデータの設定
引用させていただきます。
メタデータ・・・ページの付加的なデータ
・description：ページのコンテンツに関する簡潔で正確な概要【重要】
・keywords：ページのコンテンツに関連する単語をカンマ区切りの文字列
メタキーワードはそこまで重要じゃないようです。
Descriptionは、今までブログを書くときになんとなくいじっていたのですが、動画の解説を見て、ようやく理解できました。
metaはtitleタグの下に書いていきます。
セクション７実践：Webサイトのコーディング 全体の感想
今までのセクション1~6と比べると１番難しい内容だったと思います。
テックアカデミーのフロントエンドコースを受講し、自分でオリジナルサイトを作った経験があったので、すんなり進むことができました。
ですが、Progateしかやってない人には厳しめの内容に思えます。
このセクションで新しく出てくるタグの説明が割とあっさりしています。
理解が追いつかない方はもう２、３周した方がいいのかもしれません。
メタデータについてはあまり詳しく知らなかったので、知れてよかったです。
気を引き締めて、次のセクションに進みたいと思います。
セクション８Boostrap4入門
74.イントロダクション-Bootstrap4入門-
セクション８の概要。
75.bootstrapとは
Bootstrapの概要解説動画です。
Bootstrapを利用することでより早く、より簡単にレスポンシブ対応のサイトを作ることができます。
公式サイトを開きながら、主な機能について説明していただきました。
Bootstrapで実装したい時は公式サイトだけでなく、Bootstrap 4 Cheat Sheet （https://hackerthemes.com/bootstrap-cheatsheet/）も参照してみるといいです。
非常によくまとまっていて見やすいです。
76.はじめてのBootstrap1
Bootstrapの導入方法についての動画です。
手順は次の通りです。
1. Bootstrapの公式サイトに行く
2. Get Startedをクリック
3. CSS、JS、Responsive meta tagのコードをHTMLの指定された場所にコピペします
以下のように貼り付けるとBootstrapを使えるようになります。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
下準備はこれだけです。
77.はじめてのBoostrap2
ボタンやフォームの作り方の解説動画です。
CSSを書かずにいろいろな表現ができることを改めて確認しました。
78.ナビゲーションバー
ナビゲーションバー、ハンバーガーバーメニューの作り方を学びました。
Jqueryじゃないとハンバーガーメニューは作れないと思っていたので、bootstrapで作れることを知れてよかったです。
あとで思い出しやすいようにコードを貼っておきます。
navbar-◯◯とbg-◯◯の部分を変えると背景色を変えることができます。
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a href="#" class="navbar-brand">Navbar</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent" area-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">MENU1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">MENU2</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a href="#" class="navbar-brand">Navbar</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent" area-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">MENU1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">MENU2</a>
</li>
</ul>
</div>
</nav>
今日もだいぶ講座を進めることができてよかったです。
明日からも引き続きプログラミング学習頑張ります。
おわり