もりけん塾生になって12日目のねこらのん(@nekoranon256)です。
今日のタスクはコレ。
目次
寿司打スタート
ここ2日目標で手つかずになって寿司打をやってませんでした。
2日やっていないだけで結構タイピングスピードが落ちるんだという事がわかったのでなにがあってもタイピングだけは毎日時間などを意識しながらやっておく必要があるなと思いました!
10,000円コースのような長い文章がまだ得意ではないので5,000円で慣れてからやっていきます。
HTML&CSSで作るHP制作の手順
昨日、LP作成で模写に取り掛かろうと思いましたが、Progateでわかった気になっていたということが判明。
デベロッパーツールでみると、
これはなに?
というものが多くありました。
それがhtmlの最初のほうに多くあったので今一度Progateの道場コースをしつつHTMLの流れもあわせて理解していこうと思います。
HP制作①HTMLのファイルと作成と保存しブラウザで表示する
まず最初にファイルを作成し保存。
フォルダ名はわかりやすいもにし、その中に「.hrml」のファイルを作成。
テキストエディタを起動して以下のソースコードを記述で。これはHTMLにとって必要不可欠なもの。
コードの中身の意味は、
- <!DOCTYPE html>はHTMLの記述バージョンを指定するための設定。この宣言をせずにいるとブラウザが誤認する可能性がある。
※SEOにも関係あり - <meta>はWebページ情報を検索エンジンやブラウザに伝えるタグ。
<meta charset="utf-8">は文字コードの1つ - <head>は文章のタイトルなどの上部に表示される情報を記載する場所。
- <titile>はページタイトル部分の場所
- <body>はページコンテンツでブラウザで実際に表示される場所のこと
でした。
<!DOCTYPE html>は1つだけではないようです。
引用:作りながら学ぶHTML/CSSデザインの教科書p016
バージョンやDTDによって異なるようです。
DTDとは
「このXMLファイル(とかSGMLファイルとか)は、こんな構造になっていますよ」を書いておくファイルを書く際の書き方ルールのひとつ
です。
XMLは「マークアップ言語のひとつでHTMLの親戚みたいなもの」です。
よく分からなければ「文章に対する目印の付け方ルール(のひとつ)」くらいに解釈してください。スキーマ言語(XMLファイルとかの構造を示すときの書き方ルール)
ここにはないですが、
<html lang="ja">~</heml>
この表記があることでhtml要素の中身の言語(lang)が日本語(ja)ですよという意味を表しています。
英語の場合は(en)です。
HP制作②ページの作成手順
トップページからの作成ではなく、いくつかのブロックに分けることが先。
ブロック
- メインカラム
- サブカラム
- ページヘッダー
- ページフッター
メインカラムから作ることがわかりやすいそうです。
メインカラム、サブカラムから作成
<body>内にメインカラム部分の文章を入力する。
上記のものは作りながら学ぶHTML/CSSデザインの教科書をみて作成しています。
次に
- リスト表示
- 表の作成
を作成していく。
<table>は表を作成しますが、Progateではなかったので実際にコードをかいてみました。
また上記にはない<thead>や<tbody>、<tfoot>、<td rowspan="2">が入った表は以下のものになります。
rowspanは表の縦の結合のことで、colspanは表の横の結合のこと。
ページヘッダーとページフッター
メインカラムとサブカラムが終わってからページヘッダーとページフッターを作成。
header セクションの見出しや導入部分、ページのロゴやタイトル、目次、検索フォームなど footer 記事を書いた人の名前や関連リンク、コピーライトなど 引用:作りながら学ぶHTML/CSSデザインの教科書p030
HP制作③HTMLのアウトラインを理解「セクションタグ」を挿入
セクションとは区切りのことで文書のひとまとまりです。
セクション
- article:内容が単体で完結するセクション、ブログの1つのエントリー、新聞や雑誌の1つの記事など
- aside:前後の内容と関連はあるが、本筋からは外れる内容を表すセクション。そのページの補足情報や広告。
- nav:サイトの主要なナビゲーションを表すセクション
- section:上記にあてはまらないもの
引用:作りながら学ぶHTML/CSSデザインの教科書p027
HP制作④CSSファイルの作成
引用:作りながら学ぶHTML/CSSデザインの教科書p038
上記のようにCSSファイルを作成。
そのあとHTMLファイルに
<link rel="stylesheet" href="../common/css/style.css">
上記を<title>下に追記すること。
HP制作⑤CSSで装飾
CSSでHPを装飾していきます。
- 文字サイズ変更 font-size
※pxを忘れないこと
※ブラウザの基本は16pxで文章部分は13~16px。10px以下はサイズが小さい
CSSの記述ルール。
引用:作りながら学ぶHTML/CSSデザインの教科書p044
Progateだと分かった気になっていた部分。
HP作成手順からProgate理解しながら作成
Progateの初級編、道場の完成品はこれ。
HTML&CSSを理解せずに作成したものと今回では違うことが、「なんでこうなるんだろう?」と自分で考えることができたこと。
これが完成品。
最初<h1>や<list>のみでProgateを囲ったため完成品を異なる文字の太さになりました。
ここでなぜ?が浮かんで答え合わせ。
<class>をつけなかったことが原因だったようです。
クラス名の付け方
<h1 class="◯◯">の「◯◯」に記述するクラス名は、半角英数字、「-(ハイフン)」「_(アンダースコア)」を使って任意につけることができます。大文字・小文字を混在させてもかまいません。ただし<h1 class="1 example">のように数字ではじめることができません。
任意の名前をつけることができますが、わかりやすい名前を付けておくことが大切です。ここでは、このページの主コンテンツのタイトルが入るh1のクラスを「page Title」とし、その他の見出しはデザインの違いによって区別することとして「heading-typeA」「heading-typeB」「heading-typeC」と名付けました。引用:作りながら学ぶHTML/CSSデザインの教科書p043
classは任意でつけることができると記載があったのでHPを作成し修正依頼があったときに「自分でみてすぐに分かるものにすべきもの」と解釈。
Progateではクラス名をheader-logoとheader-listとHTMLで名付け、CSSで装飾するという形にしていました。
もりけんさん修正ロードマップ
学習 | 内容 期限7/15まで |
HTML&CSS |
<HTML> ・サーバーから送られてきたファーストバイトをブラウザが受け取ってから描画されるまで ・解析、DOM構築、レンダリング、レイアウトフローなど ・SEO ・アクセシビリティ <CSS> ・flex, or gridで横並びができるようになる ・position absolteとrelativeの違いを理解できて、2つのwidthが違う要素で中央配置ができるようになる ・擬似属性とボーダーだけでアイコンを作ることができる ・media queryでスマホ対応できる ・display blockとinline-block, inlineの違い、できることを理解 を一旦目指す |
git(github) |
<git>
・リモートブランチからpullで変更を取り込むことができること <Linux> ・cd, pwd, cp, rm, ls, chmod, cat, ・パスを通すとは何か ・権限の読み方 ・ログインシェルとは何か |
JS |
Arrayのメソッドとfor文、Stringのメソットに重点をおいて勉強 |
お問い合わせ フォーム |
Googleフォームを使うことを検討 |
フォトショ |
・画像をスライスできる ・簡単な加工ができる ・バナーが作れる ・パスを自由に操れる ・バッジ処理ができる |
ちょっと今Xmindでまとめて期限に落とし込んで作成中です。
もりけんさんがアドバイスくださったこちらを意識して深堀りしていきます。
「分からない」と思ったら「自分は何が分からないのだろうか」紐解いてみると
言葉の意味、何故これを使うのか、そもそもこれは何なのか、それとこれがどう関連しているのかなど思うと思います
が
素直に何が分からないか全部列挙してみてください
関連するページ10ぐらい調べれば分かってくるはずです— フロントエンドエンジニア (@terrace_tech) July 6, 2020
調べる量を圧倒的に増やすことと
調べる記事を英語も横断することと
決して10分じゃ理解できない調べても調べても、
丸々2日掛けても
理解できないこともあるといい聞かせること— フロントエンドエンジニア (@terrace_tech) July 6, 2020
自分が何が分からないのか具体的にする事で絡まった糸の先を掴めます。
掴んだら一つ一つ解決できますが、何が分からないのか分からないと
絡んだ糸の玉を見ているだけの呆然とした状態です多数の分からないことで「分からない」が構成されていることに気付きます
素直に一つ一つ列挙、ノートする
— フロントエンドエンジニア (@terrace_tech) July 6, 2020
そしてこれhttps://t.co/KYRj5c9e1c https://t.co/w8D6JDI9HZ
— フロントエンドエンジニア (@terrace_tech) July 6, 2020
よく使う英語検索する際のキーワード
「〇〇 〇〇 〇〇」
それぞれ「言語、ライブラリや困っている箇所、解決したい事」例えば JavaScript setTimeout usecase
1. usecase
2. error
3. what
4. how to use
5. understanding
6. overview
7. example
8. settimeout vs cleartimeout
9. doesn't work— フロントエンドエンジニア (@terrace_tech) July 3, 2020
おわりに
昨日環境の良い場所に移動したので、今日は落ち着いて勉強がすすみました。
PC上においても環境構築って大切だと、プログラミングを勉強して分かったけど現実世界においても環境構築って大切だと感じました^^!
人と比較せず自分と闘ってすすめるために勝手にライバルは作っておこ!
夜はまだまだこれからだから頑張ろ〜
もりけん塾(@terrace_tech)