HTMLとかCSSって何ですか？

（AⅠ美女出典：pixabayより）

●HTMLとかCSSって何ですか？

ごきげんよう、

癒し系Webデザイナー×イラストレーター
Nsレイです。

誰でも聞いたことのある

HTMLとか、CSSとか

よくわからない専門用語。。

起業はじめてさんには

何ことだか、さっぱりこん。

ということで超簡単に説明します♪

HTMLとかCSSって
IT業界ではソースコードを略して
通称【コード】と呼んでいます。

いつも見ている
▼ブログの通常表示モード

初めてさんはたまに見る（？）
▼ブログのHTML編集モード

この暗号のような摩訶不思議な文字は

すべてプログラミング言語で書かれています。
これを「ソースコード」と呼びます。

↓普通の人が見たら恐怖。。こんな風に見えちゃうｗ

出典：なんと！マトリックスはコードは日本語の寿司のレシピだったエエッ

HTMLとCSSは、Webページを
作成するときに使う言語で

Webページを構築する
Webページ作成の基本となるものです。

プロが使う専門用語なので

起業はじめてさんは知らなくても全然OK♪

でも、ちょろっと説明すると（覚えなくていいよ）

HTML　エイチティーエムエル

「HyperText Markup Language

（ハイパーテキスト・マークアップ・ランゲージ）

→文書構造を定義する、骨組み・構造、
という意味。

＼身体なら骨とか筋肉？うん

CSS　シーエスエス

「Cascading Style Sheets」

（カスケーディング・スタイル・シート）

→見た目や装飾を整える、という意味。

＼ 身体ならドレスとか
メイクUP？うん

コードはそれぞれが指示を
されています。ひとつずつ

文で説明するとこんな感じ

＼例えば囲み枠の場合 ／

ピンクさん「７色♡綿菓子系ふんわり囲み枠」より

ここに文字を入力。
改行はshift＋エンター

▼

Webページの裏から見ると
こんな感じ。

▼
<div style="padding:10px; margin: 15px; background: #fdeff2; box-shadow: #fdeff2 0 0 10px 10px;">ここに文字を入力。<br>
改行はshift＋エンター</div>

▼

これはHTMLとCSSを
組み合わせて特定のデザインを持つ
囲み枠を作成しています。

それぞれの部分の指示を解説します。

▼

<div> タグ: HTML要素の開始タグで、
コンテンツを囲むための要素を定義します。
この場合、テキストと囲み枠のコンテンツが
この <div> 要素で囲まれています。

style 属性: HTML要素に直接スタイルを
適用するための属性です。

この属性内には、CSSのスタイルルールが
含まれています。

padding スタイル: コンテンツとボーダーの

間の余白を設定します。

この場合、上下左右すべてに10ピクセルの
余白が設定されています。

margin スタイル: 要素の外側の余白を設定します。

この場合、上下左右すべてに15ピクセルの余白が
設定されています。

background スタイル: 要素の背景色を設定します。

この場合、背景色は #fdeff2 というピンク色です。

box-shadow スタイル: 要素に影を付けるための
スタイルを設定します。
影の色、位置、ぼかし効果などが指定されています。
この場合、ピンクの背景にピンクの影が
付けられています。

コンテンツ: <div> 要素内のテキストコンテンツや
HTMLタグが表示されます。ここに文字を入力したり
改行を挿入したりできます。

このコード全体は、HTML要素とそれに対する