見出し画像
Photo by sono_note

iT:⌘ + study; -8- {html✖️cssについて]

MRich

未経験ながら、少しずつ勉強をしようというプロジェクトを立てました。
私は、全くの未経験・無知ですが・・・。もし、この投稿で誰かしらのお役に立てれば幸いだと思います。（まず、その前にみなさんに教えていただくことが多いかと思いますが。）もし、オススメのサイト、アドバイスなどどんなことでも、気軽にコメントをいただけると幸いです。さまざまなことを、勉強したいと思っています！！！頑張ります！

♡☆♧　HTML　♢☆♤

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="box.css" />
    <title>BOX</title>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>

・Webページの構造

  • ヘッダー

  • メインビジュアル

  • メイン

  • フッター

・入れ子構造

要素を囲っている要素を、親要素といいます。囲まれている要素は、子要素と呼ぶそうです。このように、まずは領域を作り、その中に入れていく形です。

<div>　

<div>

特に意味を持ちません。つまり、言い換えれば、いろいろな用途で使うことができます。「何もしない人」が売れているのは、そういうことなのかなぁと思います。
あとは、空気中にたくさんある、窒素N。特に性質を持たない空気なので、酸化させたくない場合に使える便利。そんな気体（期待）があります。

ちょっと、これを見てください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <!-- CSSファイルの読み込み -->
    <link rel="stylesheet" href="box.css" />
    <title>BOX</title>
  </head>

  <body>
    <!-- box1用のdiv -->
    <div class="box1"></div>
  </body>
</html>

これは、<div>要素で、classを作っています。　その名前はbox1という名前になっています。

<div class = "box1"></div>

ここの部分です。また、この上のテキストをcssで装飾していきます。
例えば、

widthとheight

width（ウィズ／ウィドゥス） は横幅で、
height （ハイト）は、高さになります。

px
%
auto

・px

画面を構成する最小単位のことを「px」（ピクセル）と呼ぶそうです。
古いディスプレイでは１ドット = 1pxでした。
現在では、特にスマートフォンなどのディスプレイや4Kディスプレイ等ではドットが高密度化しており、
複数のドットが1pxに対応することも多くなっています。
pxで指定するとセンチメートルで大きさを指定するのと同じように、画面幅によらずに絶対的なサイズを指定できます。

・%

「％」を使うと、画面幅や親要素などに対して相対的な幅で設定できるそうです。例えば、パソコンで作ったものをスマホでも表示させたいときには、％で指定しておくと、見栄えが良くなるそうです。

・auto

初期値は「auto」
widthの場合、親の要素と同じ横幅になります。親要素がないと、widthは画面の横幅いっぱいに広がります。
heightの場合、子要素と同じ高さになります。子要素がないと、heightは０になります。

♪▲♢　CSS　♪▲♢

・CSSの歴史

htmlの歴史については過去にお話しました。でも、実はこのCSSもCERNで生まれているのですね。オペラ・ソフトウェアの最高技術責任者であるホーコン・ウィウム・リーさんによって開発されました。

・CSSは何ができるのか

CSSの登場によってHTMLで作成されたWebページ上での表現をより高度に装飾ができるようになりました。
htmlが家を建てる骨組みだとしたら、CSSは、その外壁や屋根などになるのではないでしょうか。家の中に明かりをつけることもできます。
ただ、その明かりを点滅させたり、オートロックの家にするのはちょっとまだ先のようです。でも、CSSは、「おしゃれ」テクニックの一つだと考えられそうです。
つまり、
「HTMLで書いた内容をCSSで装飾する」ことだと理解しました。

・書き方

セレクタ {
  プロパティ: 値;
}

まず、拡張子.htmlというものを前に作りましたが、今回は拡張子は.cssになります。つまり、お尻の部分をこれに変えることで、.css用の脚本が出来上がり、そこにcssの言葉を記載していくようになります。
つまり！！！
htmlで作るスクリプトと、cssで作るスクリプトは別！！
ということになります。少なくとも、２つは必要なのです！
さて、↑のコードに書かれている言葉はなんでしょうか。

  • セレクタ：CSSを適用したい場所（どの場所を変えたいの？段落とか）

  • プロパティ：変える部分を指定する （何を変えたいの？色とか）

  • 値：「どのように変えるか？」を指定する （赤にするとか）

ざっくりとこんな感じで、セレクタとかよくわかりませんが、ただ、正直な話、この３つがなければ、どうやったっておしゃれになるはずがないです。

セレクタ：　　お父さんの
プロパティ：　トップスを
値：　　　　　　赤に
できちゃうんです！つまり、どれがなくても困りますし、必要最低限のことなんです。はい。上半身裸じゃ困りますので。

p {
  color: red;
}

これが１例ですが、<p>タグは、段落のタグを表しています。これをすると、<p>タグで囲んだコンテンツの内容の色が赤に変わることを意味しています。カラーって書いてあります。レッドって書いてあります。
なんかよくわからないけど、多分色が赤に変わるんだなって、理解できました。

今日は、ここまでです。ご拝読いただき、ありがとうございました。

⌘ これまで ⌘
こちらをご拝読していただけると、　　　　　　　　メッサありがたいです。

https://note.com/benkein/n/n0019620960e5

https://note.com/benkein/n/n3dcef72ff6d1

https://note.com/benkein/n/n6a0c0f136461

https://note.com/benkein/n/n2dfa9f296cef

https://note.com/benkein/n/n8ab47c6455cd

https://note.com/benkein/n/n48a7d33a7fbb

少しずつですが、投稿をしております。 ｎｏｔｅで誰かのためになる記事を書いています。 よろしくおねがいします。