Web プログラミング

【もりけん塾12日目】課題『JavaScript本格入門』とHP制作の手順

もりけん塾生になって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>は１つだけではないようです。

引用：作りながら学ぶHTML/CSSデザインの教科書p016

バージョンやDTDによって異なるようです。

 

DTDとは

「このXMLファイル（とかSGMLファイルとか）は、こんな構造になっていますよ」を書いておくファイルを書く際の書き方ルールのひとつ

です。

XMLは「マークアップ言語のひとつでHTMLの親戚みたいなもの」です。
よく分からなければ「文章に対する目印の付け方ルール（のひとつ）」くらいに解釈してください。

スキーマ言語（XMLファイルとかの構造を示すときの書き方ルール）

引用：「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

 

 

ここにはないですが、

<html lang="ja">~</heml>

この表記があることでhtml要素の中身の言語(lang)が日本語(ja)ですよという意味を表しています。

英語の場合は(en)です。

HP制作②ページの作成手順

トップページからの作成ではなく、いくつかのブロックに分けることが先。

ブロック

  1. メインカラム
  2. サブカラム
  3. ページヘッダー
  4. ページフッター

メインカラムから作ることがわかりやすいそうです。

メインカラム、サブカラムから作成

<body>内にメインカラム部分の文章を入力する。

上記のものは作りながら学ぶHTML/CSSデザインの教科書をみて作成しています。

作りながら学ぶHTML／CSSデザインの教科書／高橋朋代／森智佳子【1000円以上送料無料】
created by Rinker

次に

  • リスト表示
  • 表の作成

を作成していく。

 

<table>は表を作成しますが、Progateではなかったので実際にコードをかいてみました。

また上記にはない<thead>や<tbody>、<tfoot>、<td rowspan="2">が入った表は以下のものになります。

rowspanは表の縦の結合のことで、colspanは表の横の結合のこと。

ページヘッダーとページフッター

メインカラムとサブカラムが終わってからページヘッダーとページフッターを作成。

header セクションの見出しや導入部分、ページのロゴやタイトル、目次、検索フォームなど
footer 記事を書いた人の名前や関連リンク、コピーライトなど

引用：作りながら学ぶHTML/CSSデザインの教科書p030

 

 

HP制作③HTMLのアウトラインを理解「セクションタグ」を挿入

セクションとは区切りのことで文書のひとまとまりです。

セクション

  • article：内容が単体で完結するセクション、ブログの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)
Linux

＜git＞


・変更をpushすることができ、github上でぷるりくをmergeできること

・リモートブランチからpullで変更を取り込むことができること

＜Linux＞

・cd, pwd, cp, rm,  ls, chmod, cat,

・パスを通すとは何か

・権限の読み方

・ログインシェルとは何か

JS

Arrayのメソッドとfor文、Stringのメソットに重点をおいて勉強
お問い合わせ
フォーム

Googleフォームを使うことを検討

フォトショ
イラレ

・画像をスライスできる

・簡単な加工ができる

・バナーが作れる

・パスを自由に操れる

・バッジ処理ができる

ちょっと今Xmindでまとめて期限に落とし込んで作成中です。

 

もりけんさんがアドバイスくださったこちらを意識して深堀りしていきます。

 

 

おわりに

昨日環境の良い場所に移動したので、今日は落ち着いて勉強がすすみました。

PC上においても環境構築って大切だと、プログラミングを勉強して分かったけど現実世界においても環境構築って大切だと感じました^^!

人と比較せず自分と闘ってすすめるために勝手にライバルは作っておこ!

 

夜はまだまだこれからだから頑張ろ〜

 

もりけん塾（@terrace_tech）

Thanks：もりけんさん

 

もりけんさんの『武骨日記』へ

 

Post Views: 111

-Web, プログラミング

© 2020 Mayu_Yamada