【RaiseTech】超初心者が1から学ぶプログラミング記〜その6〜

公開日:2020/7/22 最終更新日:2021/2/20

こんにちは!ナガタロックです!

このブログでは2020年6月より

RaiseTech 〜WordPress副業コース〜

を受講し、プログラミング超初心者の著者の成長の記録や感じた事を記録して行ってます。

このブログでは

・学習の記録

RaiseTechの学習内容

RaiseTechを受けて感じた事

をまとめています

第6回目講義内容は「HTMLによるWebサイトの構造構築」についてです!

内容としては第4回の続きです。

Webサイトデザインをマークアップ

そもそも「マークアップ」とは・・・

コンピューターに文章構造を認識させること

とあります。

HTMLの「HyperText Markup Language」の

「M 〜愛すべき人がいて〜」の部分ですね!

文書構造とは、見出し(h1,h2)とかメニュー(ul,li)の事。

スマホファースト

コーディングをする上で

スマートフォン→タブレット→PC

の順で進めて行くこと。

ナガタロック)今の時代に則したやりかたですね。

確かに今の若手社員とかに聞くと

パソコンは大学の授業で使うくらいで

日常のツールとしては、もっぱら

スマフォ

パソコンは所持しておらず

入社してすぐはパソコンに慣れることから

って人材が多いです。

Webサイト マークアップ手順

①まずサイト全体を見て共通化するコンポーネント単位を認識してまとめる

コンポーネントとは、最小限の機能として動く固まりのこと。

記事一覧とかメニューとか

各ページで共通で使用するコンポーネントをまとめること!

②どこにどの見出しタグを使うか考える

h1〜h6を割り振っていく

h1は1ページに1つ。ページタイトルだったりロゴが入る事が多い。

h2〜h6は、サイト内の構成の細分化によって使用していく。

③その他パーツもタグを決めていく

formタグ=検索フォーム

ul>liタグ=リスト

などなど、使用するタグを

あくまで仮決めで、だいたいのイメージをまとめておく!

※注意※

コーディングしていく際は、

  1. header
  2. body(コンテンツ)
  3. sidebar
  4. footer

の順でしていくこと!

〜グルーピングタグの使い分け〜

.article …内容が単独で完結するもの

.section …文章の中で単独の区間を表す。見出しが必要。

.div …意味を持たないかたまり

ナガタロック)マークアップとは文章に意味を持たせる事なので、

各タグにどういう意味を持たせる役割があるのか?

を理解して割り振っていく事が重要!!

命名規則を決める

ファイル名、id名、class名を決める。

それなりに自分ルールを持っておくほうが効率が良く割り振れる。

〜命名の原則ルール〜

半角英数字のみを使う …超基本!

記号は「-」か「_」のみ使う …OSによって認識出来ない物がある為

機種依存文字を使わない …①とか②も機種依存文字なので使用しない

スペースを使わない …正常処理が出来なくなる。idやclassは別の物として認識してしまう

英字から開始する …数字から始まるidやclassは認識されない!

ファイル名は小文字で統一 …大文字小文字を区別するシステムもある為

〜画像データのファイル名ルール〜

ページ名_部位_種類:必須_詳細番号_状態.拡張子

の構成ルールで名前をつける

【例】news_ttl01.png =ニュースページのタイトル画像の1番目の意

命名規則の考え方 参考サイト クロノドライブ

class 命名リスト 参考サイト Qiita

パーツのマークアップ

スマフォでタップする場合とPCでクリックする場合

どこをタップすればいいか?

わかりやすくしておく必要がある(ボタンの形にしておいたり、下線をひいておくなど)

ナガタロック)ユーザー目線に立ったサイト作り

という考え方を念頭に置く事を忘れないように!

自分はエンジニアでありユーザーである。

コンポーネントはそれ単体で機能するように作る

コンポーネント単位で作っておくことで、他ページでも使いやすくする。

その際ネストをしすぎないようにする事!

コンポーネントの中にコンポーネントを作らない!

ページごとに若干見た目が違う場合、クラスをつける

作成したコンポーネントを他ページで使う際に、

若干装飾を変えたい場合は、クラス名をつけて区別させる。

フォームのマークアップ

フォームとは

HTMLにおいて、ユーザーが入力して送信する部分の事。

最もユーザビリティを考えて構築する必要がある部分である!

inputタグは様々な用途に合わせた種類があるので、適切な物を使用する。

参考サイト

※フォーム構築は、工数も多くなるので見積もりの際は注意が必要。

ユーザビリティ

あくまでWebサイトは、ユーザーの為に存在している

そのユーザーがストレスを感じてしまう内容やページ構成だと

ユーザーが離れてしまいWebサイトとしての意味を持たない。

JavaScriptやhtmlタグには様々な意味を持たせる機能がある。

それを効果的に使用して、

ユーザーが使いやすいサイト構築

をすることが重要である!

今日の感想

今回の講義は、割と言っている事がなんとなく理解が出来る内容でした。

htmlは1番学習にしているから、多少の成果が出ている感はあります。

ただ実際にWebサイトを構築していくのとは話がまったく別!!

今は身体に叩き込む!!

今回からの課題のハンバーガーサイトの構築を

スタートして、サイト作成の数をこなして実践しながら学習していく

事が必要だと実感した次第です!!

身体を動かす前に頭で理屈をひねってても、

なかなか前に進んでいる実感もないので、

しばらくはこの課題と向き合う学習をしていこうと思います。

また今回は質疑応答の時間が長く割り当てられたのだが、、

あまり質問が出来ずに講義時間を30分も余らせてしまった😪

前回の講義から1週間の間に、

いくつか質問を用意していたのですが、

今回の講義内容で詳しい解説がありました😂

講義の中での質問を浮かべばいいのですが、

まだまだわからない内容も多いので、

即座に質問が思い浮かばず・・・

みたいな状況に陥ってます。

RaiseTechに入っている意味

現役エンジニアに直接質問をぶつけられる

という内容が全く活かせていない

なんか新宿歌舞伎町への行き方を知りたいはずなのに、

「東京へはどうやって行くのですか?」

という質問をするレベルに今はまだある。

こうしてブログを書きながらだと、

わからない言葉を調べながらなので、

いくつか疑問点は湧いてくるのですが、

まだまだ基礎の経験と知識が足りないということ。

今の学習時間では追いつくどころか、離されていく一方なので

この4連休は「Go Toキャンペーン」を利用せず

自習時間にしっかりあてこみたいと思います!!

それにしても、授業を受ける人数が減ってきているような・・・

皆様時間が合わないのか、離脱していってるのか・・・

周りを特段気にする必要もないですが、

自分自身はしっかり継続し続けるということ

を最低限の目標として取り組んでいく次第です。

今はRaiseTechの講義が週イチであるので、

必然的に学習をする環境を作っている状態ですが、

RaiseTechのカリキュラムが終わっても

継続する環境を作るという事も考えながら日々を過ごして行く

事が必要です。

新しい自分との出会い、ひとりじゃないよ!

そしてRaiseTechが気になるという方は

是非公式サイトより無料体験会or受講のお申し込みを(●´ω`●)


ABOUT US

この記事を書いた人

ナガタロック

このサイト作成者の写真

アパレルメーカーに勤める30代男
2020年より「RaiseTech」にてプログラミング学習を開始
講義内容の学習記録
副業に関する情報を発信しています

  • カテゴリー