LoginSignup
0
1
@kohki_takatama(Kohki Takatama)

最近学んだことリスト【主にCSS】

Last updated at Posted at 2024-01-10

はじめに

今更Progateをやり始めたマンです。（HTML/CSS）
RUNTEQのカリキュラムでやってるんですが、意外といいですね。
きれいに書ける。

そんな独学だったマンが知らなかったこと、あたらめて調べたことを箇条書き的に残しておきます。
気になる見出しがあればご覧ください。

01/11 第２弾記事投稿しました。CSSはいったんこれで終了です。

メモず

<head>要素内に記述した内容はWebページには表示されません。

<head>と<body>の違い。
シンプルだけど、なんとなくで言語化されてなかった部分。

list-style プロパティは親要素から適用されない。
    <div class="header">
      <div class="header-list">
        <ul>
          <li>プログラミングとは</li>
          <li>学べるレッスン</li>
          <li>お問い合わせ</li>
        </ul>
      </div>
    </div>

.header {
  list-style: none;
}

この時の表示は、

・プログラミングとは
・学べるレッスン
・お問い合わせ

つまり、list-style: noneが適用されていない。

ちゃんとliに対して書かないといけない。

li {
  list-style: none;
}

ただし、ulに対して書いても適用される。

ul {
  list-style: none;
}

表示

  プログラミングとは
  学べるレッスン
  お問い合わせ
他の「直接適用する必要がある」リスト

ChatGPT

  1. margin と padding: これらはボックスモデルの一部で、要素の外側の余白（margin）と内側の余白（padding）を設定します。これらは子要素には継承されません。

  2. border: 枠線のスタイル、幅、色を設定します。これも子要素には継承されません。

  3. width と height: 要素の幅と高さを設定します。これらは子要素に継承されないため、子要素に特定のサイズを適用したい場合は個別に設定する必要があります。

  4. background 関連プロパティ: 背景色や背景画像の設定は継承されません。各要素で個別に指定する必要があります。

  5. position: 要素の配置方法（static, relative, absolute, fixed, sticky）を指定します。これも継承されません。

css 省略形は「上」「右」「下」「左」の順で適用される。もしくは「上下」「左右」あるいは「上」「左右」「下」

例

.logo {
  padding: 20px 10px 20px 10px;
}

.logo {
  padding: 20px 10px;
}

どちらも同じ。

froatの語源

ChatGPT

CSSのfloatプロパティの語源は、文字通り「浮かぶ」や「浮遊する」といった意味から来ています。このプロパティは、元々はテキストを画像の周りに「流れるように」配置するために作られました。画像がテキストの中に「浮いている」ように見えることからこの名前が付けられたと考えられています。

floatプロパティを使用すると、指定された要素が通常の文書の流れから「浮き上がり」、その要素の周りに他の要素（通常はテキスト）が流れるように配置されます。例えば、float: left; は要素を左側に浮かせ、右側にテキストや他のコンテンツが流れるように配置されることを意味します。

この用語は、CSSの初期の頃から使用されており、ウェブデザインにおいてレイアウトを構築するための基本的な手段の一つとして長い間使われてきました。ただし、最近ではFlexboxやGrid Layoutなどの新しいレイアウト技術が登場し、floatの使用はレイアウト構築目的では減少傾向にあります。それでも、floatは特定の文脈や小さなレイアウト調整において依然として有用です。

ブロック要素とインライン要素

前後で改行が入り、親要素の幅一杯に広がる要素をブロック要素といいます。これまで勉強してきた<div>要素や<h1>要素、<p>要素はブロック要素です。それに対して、<span>要素や<a>要素のように改行されない要素をインライン要素といいます。

  • インライン要素にはwidthやheight、上下のmarginが指定できない
    →display: inline-block;"でインラインブロック要素"に変更する。
  • （横方向）中央揃えの方法
    • ブロック要素：margin: 0 auto
    • インライン要素・インラインブロック要素・テキスト：text-align: center
mergin、border、paddingの違い（使い分け）
marginは要素の外側の余白、borderは要素の周囲を囲む線、paddingは要素内の余白をそれぞれ管理します。

  1. margin: これは要素の外側の余白を指します。marginは要素とその周囲の他の要素との間の空間を作成します。これは透明な領域であり、背景色やボーダーなどは適用されません。

  2. border: これは要素の境界線を指し、コンテンツの四辺を囲む区切り線を作成します。
    ※初期状態では表示されません。
    borderは幅（太さ）、スタイル（実線、点線など）、色を指定できます。borderはコンテンツと padding の外側に配置されます。

  3. padding: これは要素の境界（border）とそのコンテンツ（テキストや画像など）との間の内側の余白を指します。paddingは背景色や背景画像に影響され、増やすことで要素内のコンテンツとその境界との間のスペースが広がります。

wrapperとcontentsのニュアンスの違い
wrapper: この用語は、通常、他の要素を含むコンテナーまたは親要素を指します。

wrapperは、ウェブページの特定の部分を囲むために使用され、その内部に配置される要素に共通のスタイリングやレイアウト特性を適用するためのものです。例えば、ページの主要なセクションを中央に配置するためのwrapperがあり、その中に複数のコンポーネントやコンテンツが含まれることがあります。wrapperは、内部の要素を構造的に整理し、共通のスタイルやパディング、マージンを適用するために使用されます。

contents: この用語は、wrapperや他の要素の内部に含まれる実際のコンテンツを指します。

これにはテキスト、画像、リンク、ボタン、フォーム、その他のHTML要素が含まれることがあります。contentsは、ウェブページの情報や機能を提供する主要な部分であり、ユーザーが直接対話する要素です。

要するに、wrapperは主にコンテンツを構造的に囲むための要素であり、contentsはそのwrapper内に含まれる実際の情報やデータです。

opacityのニュアンス："不"透明度

「不透明度」を意味するため、0が透明、1が不透明になる。

「Opacity」（オパシティ）という言葉の語源は、ラテン語の「opacus」から来ています。この言葉はもともと「影」という意味を持っていました。時間が経つにつれ、「opacus」は英語の「opaque」（不透明な、曇った）という形で取り入れられ、これが「opacity」（不透明度）という言葉に進化しました。

複数クラスの指定
<div class="btn blue">

この時、

.btn {

}

.blue {

}

の2つのクラスを指定している。

透明にする方法：opacityとrgbaの違い
opacity

要素全体の透明度

rgba

その色部分のみの透明度
バックグラウンドのみ透明、など。

アニメーションtransition: property sec

hoverと組み合わせて使う

縦方向 中央ぞろえテクニックline-height

本来行間調整に使うが、「高さの中心」に文字が配置されるため、height = line-heightにすると、文字が（縦方向の）中央に配置される

"重ねる"方法：position: absolute

親要素にposition: relativeを指定し、子要素でposition: absoluteを指定すると、親要素の左上を基準に配置することができる。

なお、position: relativeは混乱を招く

position: relative; は「自身の小さな位置調整」と「子要素の position: absolute; に対する基準点設定」という2つの主な用途があります。これらの機能が一つのプロパティに統合されているため、特定の状況で少し混乱を招くことがあります。

position: fixedでスクロールしても位置固定
重なり調整：z-index: num

大きいほど上、小さいほど下

終わりに

Progateなんだかんだ楽しいんですよね。
いろんなところでｵｽｽﾒされてるのも納得。
引き続き頑張ります。

記念

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1