【職業訓練記⑪ HTML／CSS編】 「デザイナー入門: 初めてHTML／CSSに挑戦してみて消化不良した話💦」

前々回と前回までが初めてPhotoshopを使ったバナー制作、LP制作でした👇

職業訓練　Week18 〜 Week19　（４ヶ月目後半）の試練・難関

「HTML/CSS 基本演習」

今回の学習は楽しみでもあり、同時に不安でもありました。

「直接タイムリーに対面で質問ができないからです」

Slackで質問をすれば良いのですが、自分が何を理解できて、何が理解できていないか整理するのが不安だったので「とにかく挑戦」という意気込みでした。

私が通ったe-ラーニングでの職業訓練では、
ノーコードツール「STUDIO」を使用したポートフォリオ制作がメインでしたが、今回は２週間HTML／CSSの基礎知識を学習した時に感じたこと、学んだことを整理していきます。

不安だったので、週１でのWeb面談で講師に質問をしてみました。

自分：
「初心者ですが、HTML/CSSは二週間で課題を完成させるイメージで取り組んだら良いのでしょうか？」

講師：
「正直、今回の課題は二週間で理解して完成するのは厳しいと思います。完成させなくても大丈夫です。HTML/CSSの基礎・基本的な知識を理解して頂ければと考えています」

はあ、なるほど🧐💭 とにかく目の前の課題に取り組もう！

HTMLとは

HTML（エイチティーエムエル）は、「Webページを作るための骨組み（言語）」のこと。

HTMLは略語。正式名称は「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」といいます。

HTMLの役割（できること）：

Webサイトに表示されている見出し、本文、画像、リンクなどが「これは見出しですよ」「これは画像ですよ」とコンピューターに伝える役割を持っています。つまり、コマンダー（司令部）的な役割を担っていると言える。

端的に表現すると、HTML：「骨組み」（文章や構造を作る役割）となる。

CSSとは

CSS（シーエスエス）とは、「Webページのデザインやレイアウトを整えるための言語」のこと。

CSSも略語。正式名称は「Cascading Style Sheets（カスケーディング・スタイル・シート）」といいます。

HTMLの役割（できること）：　HTMLで書かれたテキストや画像に対して、以下のような指示を出せます。

• 色を変える（文字の色、背景の色）

• サイズを変える（文字の大きさ、画像の幅）

• 配置を決める（真ん中に寄せる、横に並べる）

• 余白を作る（文字と文字の間を空ける）

端的に表現すると、CSS：「装飾」（色やデザインを整える役割）となる。

例：

家で例えると、HTMLが柱や壁、ドアなどの「構造」を作る役割となり、一方でCSSは壁紙を貼ったり、カーテンの色を選んだりする「インテリア」の役割を担うイメージ。

【インプット】 職業訓練で学んだこと

一週間はひたすら動画のインプットを数十時間行い、メモを取ったりしていました。

HTML基本演習では、テキストを<>で囲った「タグ」という記号でサンドイッチして記述する構造理解です。

例：

• <h1>見出し</h1> → 大きな見出しになる

• <p>本文</p> → 段落になる

• <a href="...">リンク</a> → 他のページへ飛ばす

上記の例のように＜h1＞タグで囲むと「大きな見出し」の指示を出すことができ、＜p＞タグで囲むと「段落」、＜href=""＞属性でリンク先を載せると「他のリンク先へページを飛ばすことができる」などの基礎、基本的な概念をインプットしました。

一方でCSS基本演習では、HTMLでの骨組みに装飾すること、指示の書き方を中心にインプット。

例：「見出し（h1）を赤色にして、サイズを30ピクセルにする」という指示の例🔽

HTMLで指示を出したh1の見出しを装飾する内容を{ }内に記述しています。配色は「赤色」、フォントのサイズは30ピクセルと指示の例になります。

とにかく、インプットしただけでは頭は混乱。。

「なんとなくこうやってWebサイトやLPが構成されいるんだ〜」的な感覚のみが残りました。

【実技】  課題内容

【実技】 HTML／CSS 「FV ( ファーストビュー) 実装課題演習」

以上の流れでインプットした知識をアウトプットしました。今回はVSC＝Visual Studio Codeというソフトウェアを使用しての課題の取り組みでした。初めて使用したソフトだったので不慣れでしたが、コードを書きながらアウトプットしている間は没頭できました♪

アウトプットした課題が以下🔽　　
⚠︎🟥は隠された情報になります

＜HTML／CSS実技：FV実装課題＞

実際にInternetで開いてみると、

簡単なFV（ファーストビュー）が完成しています。
なるほど🧐💭

「HTMLだけだと味気ない骨組みだけだけど、CSSで装飾することによって彩りが出てサイト感を演出できるんだね」

とインプットした知識がアウトプットすることによって繋がった瞬間でした。

今回、消化不良を起こした分は独学で補っていければとポジティブに捉えています☺️

💡まとめ💡

短い二週間ではあるが、

サイト制作の仕組みを学んだ。

二週間だけでは整理できていない。

しかし、

HTMLが骨組み（骨格・外装）

CSSが装飾（インテリア）

調べていくうちに

JavaScriptが「動き」（ボタンを押した時のアニメーションなど）の役割を担うのか、など

世の中で必要なWebサイトの大枠に触れた瞬間だった

HTMLで指示を出している時の没頭感、

まるで「コマンダー（司令部）」であり、

CSSで指示を出している（想像している）時の高揚感

まるで「インテリアデザイナー」である。

そこにJavaScriptで「動き」があると「生命」が宿る。

Webサイトは無機質なものではなく、

意図＝設計された「生き物」のような気がした。

また次の記事で会いましょう！

最後まで読んでいただき、ありがとうございました🙇

#職業訓練
#コーディング
#HTML
#CSS
#骨組み
#装飾
#VSC
#VisualStudioCode