(AⅠ美女出典:pixabayより)
●HTMLとかCSSって何ですか?
ごきげんよう、
癒し系Webデザイナー×イラストレーター
Nsレイです。
誰でも聞いたことのある
HTMLとか、CSSとか
よくわからない専門用語。。
起業はじめてさんには
何ことだか、さっぱりこん。
ということで超簡単に説明します♪
いつも見ている
▼ブログの通常表示モード
初めてさんはたまに見る(?)
▼ブログのHTML編集モード
この暗号のような摩訶不思議な文字は
すべてプログラミング言語で書かれています。
これを「ソースコード」と呼びます。
↓普通の人が見たら恐怖。。こんな風に見えちゃうw
出典:なんと!マトリックスはコードは日本語の寿司のレシピだったエエッ
HTMLとCSSは、Webページを
作成するときに使う言語で
Webページを構築する
Webページ作成の基本となるものです。
プロが使う専門用語なので
起業はじめてさんは知らなくても全然OK♪
でも、ちょろっと説明すると(覚えなくていいよ)
HTML エイチティーエムエル
「HyperText Markup Language
(ハイパーテキスト・マークアップ・ランゲージ)
→文書構造を定義する、骨組み・構造、
という意味。
\身体なら骨とか筋肉?
うん
![まじかるクラウン](https://stat100.ameba.jp/blog/ucs/img/char/char3/472.png)
「Cascading Style Sheets」
(カスケーディング・スタイル・シート)
→見た目や装飾を整える、という意味。
\ 身体ならドレスとか
メイクUP?うん
\例えば囲み枠の場合 /
ピンクさん「7色♡綿菓子系ふんわり囲み枠」より
ここに文字を入力。
改行はshift+エンター
Webページの裏から見ると
こんな感じ。
▼
<div style="padding:10px; margin: 15px; background: #fdeff2; box-shadow: #fdeff2 0 0 10px 10px;">ここに文字を入力。<br>
改行はshift+エンター</div>
▼
これはHTMLとCSSを
組み合わせて特定のデザインを持つ
囲み枠を作成しています。
それぞれの部分の指示を解説します。
![コーヒー](https://stat100.ameba.jp/blog/ucs/img/char/char3/258.png)
▼
<div>
タグ: HTML要素の開始タグで、
コンテンツを囲むための要素を定義します。
この場合、テキストと囲み枠のコンテンツが
この <div>
要素で囲まれています。
style
属性: HTML要素に直接スタイルを
適用するための属性です。
この属性内には、CSSのスタイルルールが
含まれています。
padding
スタイル: コンテンツとボーダーの
間の余白を設定します。
この場合、上下左右すべてに10ピクセルの
余白が設定されています。
margin
スタイル: 要素の外側の余白を設定します。
この場合、上下左右すべてに15ピクセルの余白が
設定されています。
background
スタイル: 要素の背景色を設定します。
この場合、背景色は #fdeff2
というピンク色です。
box-shadow
スタイル: 要素に影を付けるための
スタイルを設定します。
影の色、位置、ぼかし効果などが指定されています。
この場合、ピンクの背景にピンクの影が
付けられています。
コンテンツ: <div>
要素内のテキストコンテンツや
HTMLタグが表示されます。ここに文字を入力したり
改行を挿入したりできます。
このコード全体は、HTML要素とそれに対する
スタイルの組み合わせで、
ピンクの背景色を持つ囲み枠を作成します
※この囲み枠内にテキストを
挿入することができます
は?何が何だか。
意味不明。
吐きそうです。。
ごめんね。人間のようにセリフにします!
分かりやすく文字の色も付けるから
それなら伝わるかな~?
ピンクさん「7色♡綿菓子系ふんわり囲み枠」より
ここに文字を入力。
改行はshift+エンター
▼
指示ごとに文字の色を分けた。
▼
<div style="padding:10px; margin: 15px; background: #fdeff2; box-shadow: #fdeff2 0 0 10px 10px;">ここに文字を入力。<br>
改行はshift+エンター</div>
10代男子風セリフ形式
<div>~</div>ここからここまでの指定な。
style:おッ、ここからはデザインの話だぜ!
padding:10px:内容と周りの余白のことだよ、
10ピクセルずつな。
margin: 15px:それから、外側の余白も
15ピクセルね。
background: #fdeff2:こっちは背景のカラー、
ちょい薄いエロピンクだぜ!
box-shadow: #fdeff2 0 0 10px 10px:
このシャドウ、すげえピンクの背景に
ドピンクのシャドウをかけるやつだよ!!
ここに文字を入力:<br>:そっからは、
テキストの部分だな。うんうん。
テキストの改行は「shift+エンター」で
やればいいってことだ。へっへ~
(使わないと何個も箱ができてびっくりするぜ!笑)
※: (コロン) → ここからが指定範囲で
※; (セミコロン) → 指定範囲はここまでだ。
え?何が何だか。
意味不明。
あのー分かんないけど、、、
面白いですか?
ごめんね。全部忘れて下さい。。わーん
つまりHTMLは
「HyperText Markup Language
(ハイパーテキスト・マークアップ・ランゲージ)
HTML=文書構造を定義する
人間なら骨と筋肉。
そしてCSSは
「Cascading Style Sheets」
(カスケーディング・スタイル・シート)
CSS=見た目や装飾を整える
人間ならドレスとメイクup♪
こんなイメージができれば
それでOK!わーん
いいのか?
しっかりヒアリング×カウンセリング致します
私のデザインメニューです
ふんわりとした綿菓子系の可愛い囲み枠
初めてのWebデザインガイドでは
あなたの理想ビジョン×あなただけの
ブランド力を引き出して
あなた自身の発信するメッセージを
視覚的に伝えることで
コンテンツの魅力を最大限に発揮して
フォロワーさまとの絆を深め
集客につながるブランディングを
させて頂きます。
▼直接メール送れます
*⸜クリックするとフォームが出ます⸝*.
あなたの素敵な未来とオンライン
プレゼンスをサポートします
起業はじめてさんのWebデザインガイド
癒し系webデザイナーNsレイ
(AⅠ美女出典:pixabayより)
★⋆⸜お願い⸝⋆★
当サイトの内容やテキスト(ブログ)
画像や文章の無断転写、無断使用を
固く禁じます。