IT知識ゼロ広報の業界勉強奮闘メモ⑪：HTML/CSSについて～実際にシミュレーションもしました😎～

皆さんこんにちは！Marvel株式会社で広報をしている渡邊です🌸

さて今回も勉強したことをアウトプットしていきます😎😎
今回はHTMLとCSSについて！
この二つに関してはIT企業に入社する前から聞いたことはあったのですがあまり詳細は知らなかったので落とし込むためにも今回記事にしてみました👀

今回ご紹介する内容は簡単な概要となります！

≪ 目 次 ≫＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

１｜HTMLとは？
・概要
・基本用語
・タグの種類
２｜CSSとは？
・概要
・CSSでできること
３｜HTMLとCSSの関係性は？？
まとめ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

１｜HTMLとは？

概要

HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」の略で、Webページを制作するためのマークアップ言語です。

マークアップ言語
Webページ内のテキスト情報の構成（タイトル・段落など）や役割をコンピュータが構造的に理解できるようにするための言語
（引用：https://schoo.jp/matome/article/1635）

HTMLの役割は、Webページの内容や構造を定義することです。文字や画像、動画、リンクといった要素をどのようにWebページ内に配置するかを記述します。

HTMLの基本用語

タグ：表示形式と範囲を指定する
要素：タグとテキスト情報を合わせたページ上部の部品
属性：タグに性質を与える

HTMLタグの種類（一部）

今回、実際にこちらのシミュレーションサイトを使ってHTMLタグのテストも行ってみました😎😎

■h1～h6タグ

「h」とは「heading（ヘディング）」の略で、見出しを作成する際に使用します。
<h1>が大見出しで1番大きく、サイトのメインとなる見出しに使われます。<h2>〜<h6>となるにつれ、小さな見出しになっていきます。

（入力例）

<h1>見出し</h1>

<h2>見出し</h2>

<h3>見出し</h3>

<h4>見出し</h4>

<h5>見出し</h5>

<h6>見出し</h6>

（テスト）

ちなみにWantedlyでは<h2>と<h3>が対応できます🙌🏻

<h2>こんにちは</h2>

こんにちは

<h3>こんにちは</h3>

こんにちは

■Pタグ

「p」とは「paragraph（パラグラフ）」の略で、テキストの段落を作成する際に使用します。
pタグで囲ったテキストの前後に1行の改行が生まれますが、改行の目的で使用することはありません。文章中に改行する場合はbrタグを使用します。

（入力例）

<p>こんにちは</p>
<p>お元気ですか？</p>

（テスト）

■imgタグ

「img」とは「image（イメージ）」の略で、画像を表示する際に使用します。
「src=」の次に画像のURLを指定します。<img>タグには終了タグは存在しません。

（入力例）

<IMG SRC="URL">

（テスト）

■アンカータグ（リンク）

他ページへ飛ぶ指示を出すためのタグです。
ウェブサイトでよく「リンクはこちら」と書くのに使うタグになります。
「<a href=\”URL\”>」ではじまり、最後は必ず終了タグの</a>を入力します。

（入力例）

<a href="URL" target="_blank">リンクを貼るテキストや画像</a>

（テスト）
補足：「Marvel株式会社のWantedly」というテキストにWantedlyページのリンクを貼りました🔗

テキストをタップすると正しくWantedlyのページに繋がりました💡

その他にも種類はたくさんあるため、是非下記の引用元等からチェックしてみてください👀✅
（引用１｜https://zero-plus.io/media/html-tags-and-usage/）
（引用２｜https://www.logix-service.com/column/beginner_html_190318/）

２｜CSSとは？

概要

CSSとは、「カスケ―ディング・スタイルシート（Cascading Style Sheets）」の略で、Webページを制作する際に欠かせないスタイルシート言語です。

スタイルシート言語
プログラミング言語とは違い、Webページの見た目を整えるための言語のこと
（引用｜https://www.sejuku.net/blog/41972）

CSSでできること

• 文字を太字にする
• 文字の色を指定する
• フォントを指定する
• 背景色を指定する
• ボタンを配置する
• アニメーションの作成
• 外部ファイルの活用で媒体に合わせて読み込みの負担を軽減する　など

文字の色、背景色変更を以下のサイトを使ってシミュレーションしてみました🔥

今回は以下の画像の文字を「Marvel株式会社」に変えて、文字の色と背景色も変えてみます！

（テスト１）文字を「Marvel株式会社」に変える（早速HTMLの復習ですね！）

👇<h1>の文字を変えることで…

無事Marvel株式会社に変わりました💪

（テスト２）背景色と文字の色を変える

👇background:の後に背景色、color:の後に文字の色 それぞれに設定したいカラーコードを入力すると…

無事背景色と文字の色が変わりました🙌😎（配色のセンス👀）

３｜HTMLとCSSの関係性は？？

よく「HTML/CSS」といった表記がありますが、その理由は前述したように、
HTMLでWebページの骨格、構成を作り、CSSはHTMLを装飾する関係であるため、セットで用いられることがほとんどであるためです。

Wantedlyには文字への色付けなどはありませんが、太字にすることで重要事項や伝えたいメッセージをより視覚的にわかりやすく伝えることができるため必要不可欠です。

まとめ

今回はWebページの画面表示を構成するHTML/CSSについて簡単にではありますが調べたことをまとめてみました👀🔎

名前と「画面のレイアウトに大きく関係すること」というなんとなくの認識はありましたが調べてみることで

• HTMLはWebページの内容や、文章、画像、リンクをどのように配置するかなど、骨格となる部分を定義する言語
• CSSはHTMLを装飾し、より視覚的に見やすくするために整える言語

という事がわかりました💡🙌🏻🙌🏻

Web開発の基本部分を少し学習することができたので、また今度さらに深堀してJavaScriptについても調べたいなと思いました🤭🤭

最後までご覧いただきありがとうございました🌸🌸
また次回の投稿もお楽しみに✨