28日目 - プログラミング備忘録

今日の学習

今日の学習
- Ruby
  - メソッドの外で欲しい情報を定義する
CSS
- 基礎文法
セレクター
擬似要素
擬似クラス
詳細度
今日のやらかし
- ファイルをリネームしたのを忘れてrequireが使えない

Ruby

メソッドの外で欲しい情報を定義する

買い物をするプログラムなどで、お客さんが何の商品を買おうとしているか？という情報を受け取ることがある。

ただ単に、メソッドの中で選ばれたものを変数として定義すると、他のメソッドではその変数を取り扱うことができない。

（自分はよく、ゴリ押しで@をつけて動かしていることがあったので反省....）

買い物プログラムで言うと、お客さんが何の商品を買うか、入力を受け付けるメソッドがあったとする。

最後の部分が戻り値になることを利用して、メソッドをそのままメソッド外で使いたい変数に代入すればよい。

他のメソッドで使用したい変数 = 選ばれた情報を受け取るメソッド（戻り値に注意）

簡素な例だと分かりづらいかもしれないが、こんな感じ。

def select_number
  puts "番号を入力してね"
  selected_number = gets.to_i
  #最後に戻り値として受け取った値を設定
  selected_number
end

selected_number = select_number

メソッド外でこうすることにより、selected_numberという情報は他のメソッドで自由に使用することができる。

CSS

昨日から引き続きCSSの学習。

基礎文法

x-index

要素の重なる順番を決めることができる。数値が大きいほど上にくる。

特に何も指定しなければ、要素は後から書かれたものが上に来るため、この要素を上に持っていきたい...などがあればx-indexを活用する。

box-sizing

widthやheightに、paddingとborderを含めることができるようになる。

f:id:hasegawa_note:20210530174908p:plain

box2は、box-sizingを使用せずに青線をつけてみたが、要素の大きさからはみだしている。

一方で、box3はbox-sizing: border-box;と指定することで、borderの幅分を含めて指定width、height内に収まるように調整してくれる。

background

背景のスタイルを決められるプロパティ。

background-color ... 背景の色を設定
background-image ... 背景の画像を設定
background-size ... 要素の背景画像の寸法を設定
cover, autoなどのキーワード値で指定
background-position ... 背景画像の初期位置を設定
デフォルトでは左上が起点になっている

一括指定プロパティはbackground。

background - CSS: カスケーディングスタイルシート | MDN

background-sizeとpositionはまとめて設定する必要があり、スラッシュで区切って設定する。

 background-color: pink;
  background-image: url(イメージファイル);
  background-size: cover;
  background-position: center;

  background: center/cover pink url(イメージファイル);

どちらも同じ意味。

セレクター

詳解CSS セレクター編 (全12回) - プログラミングならドットインストール

セレクターには五種類ある。

要素型セレクター
要素をそのまま書く
classセレクター
.を先頭につけて、.classと書く
半角スペースで区切り、複数つけることも可能
例:class="info title" => .infoも.titleも使用可
idセレクター
#を先頭につけて、#idと書く
同じページ内で同じ値を使ってはいけない、一度に複数の値を指定することができない
属性セレクター
[属性]と書き、特定の属性がついた要素のスタイリングが可能
例: [href] [attr="value"]
全称セレクター
*をセレクターに使い、すべての要素にスタイルをつける

セレクターを組み合わせる

カンマで区切る

.title, p

titleに合致する要素と、pに合致する要素を選択できる。いくつでも指定できる。

セレクター同士をくっつける

h1.title

両方のセレクターを同時に満たす要素...h1であり、かつtitleクラスがついたものだけを選択できる。

要素型セレクター同士をくっつけることはできない。

❌　駄目な例

h1h2

>を使用

main > h1

h1直下のpという意味になる。

もしもmainの中にh1が複数あった場合でも、直下のものを指定するため、最初に該当するh1より下のh1には該当しない。

main h1

もし、全てのh1を含めたい場合は、半角スペースで区切ることで選択できる。

+

① + ②

①の直後にある②という意味。

隣接した要素の間に何らかのスタイルを差し込みたい場合に使えるセレクター。

<p>要素1</p>
<p>要素2</p>
<p>要素3</p>

こちらのHTMLに、以下のようなCSSを加えるとする。

p + p

<p>要素1</p>
<p>要素2</p>　//選択される要素
<p>要素3</p>　//選択される要素

このように、pの直後のpが選択される。

二つ目のpにしか適用されないような説明の仕方に感じたのだが、3つ目のpに対しても、「直前にpがあるp」と言えるので、適応されている。

擬似要素

要素の特定の部分をスタイリングすることができる。::が先頭についている。

擬似要素 (Pseudo-elements) - CSS: カスケーディングスタイルシート | MDN

指定するには、

セレクター::擬似要素　

例：h1::bedore

このように記述

以下、よく使用される::beforeと::afterのメモ。

::before　::after

contentプロパティが必須となり、追加したい内容をcontentプロパティで指定する。

<h1>見出し</h1>

h1::before {
  content: "★";
}

h1::after {
  content: "☆";
}

見え方としては、「見出し」から「★見出し☆」に変化する。

カスタムデータ属性

HTMLで、data-で始めることで独自の属性をつけられる。

これを利用することで、content属性の値を要素ごとに変更することができる。

<h1 data-decoration="★★">見出し1</h1>

<h2 data-decoration="☆☆">見出し2</h2>

h1::before,
h2::before {
  content: attr(data-decoration);
}

attrを使って()にある属性を取得する。

これで、それぞれの値が適応されて、見え方としては、

「★★見出し1」

「☆☆見出し2」

というようになる。

なぜ擬似要素を使うのか？

★見出し☆と表示したい場合であれば、単純に

<h1>★見出し☆</h1>

と書いてもいいのだが、HTMLが表すのは文書の内容なので、飾りの要素である星の記号はCSSで表現する方が適切だ、ということらしい。

確かに、「見出し」という文字に星があるかどうかで内容が変わるわけではない。この説明でけっこう納得した。

擬似クラス

Progateで、ボタンにマウスカーソルが乗っているときにボタンの色を変えてみよう、とかを習ったときにさりげなく使っていた:hoverだが、これは擬似クラスと呼ばれるものらしい。

要素の状態に応じてスタイリングするためのものを擬似クラスという。

btnクラスにマウスが乗っているとき、少し要素を透明にする
.btn:hover {
   opacity: 0.8;
}

:nth-child()

同じ階層にあるものの順番を指定することができる擬似クラス。

  <main>
    <p>HTML</p>
    <p>HTML</p>
    <p>HTML</p>
    <p>HTML</p>
    <p>HTML</p>
    <p>HTML</p>
  </main>

要素の3番目が赤くなる
main > :nth-child(3) {
  color: red;
}

3の倍数を選択
main > :nth-child(3n)

奇数もしくは偶数を選択
main > :nth-child(odd)
main > :nth-child(even)

最初もしくは最後の要素を選択
main > :first-child
main > :last-child

:nth-of-type

nth-childは、どの要素かに関係なく、n番目の要素を指定していたが、:nth-of-typeは、n番目の要素を指定することができる。

以下のHTMLの、2番目のh2だけを選択したい場合。

  <main>
    <h1>見出し</h1>
    <p>HTML</p>
    <h2>見出し</h2>
    <p>HTML</p>
    <h2>見出し</h2> ここ！
    <p>HTML</p>
  </main>

nth-childでは、指定することができない。

main > h2:nth-child(2)

main直下のh2を指定したいが、main直下の2番目の要素はpになっていて、本来選択したい部分を選択できていない。

しかし、

main > h2:nth-of-type(2)

このようにすることで、main直下の2番目のh2を選択することができる。

:nth-of-typeの前に、どの要素かどうかを指定する必要があることに注意。

否定の擬似クラス

:not()を使い、セレクターを渡す。

例として、:emptyという要素が空のものを指定する擬似クラスを利用する。

li:not(:empty) {
  color: red;
}

:notがあるので、:emptyではない要素、つまり空ではないリストの要素の色を赤にするという意味になる。

詳細度

CSSには、詳細度というものがあり、同じ要素を修飾している場合でも、詳細度がより高いものが優先されて反映される。

ドットインストールの解説が分かりやすかったが、そのまま丸写しするしかなさそうなので、分かりやすい記事を貼っておく。

エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita

CSSの詳細度を学ぼう | ZeroPlus Media

今日のやらかし

ファイルをリネームしたのを忘れてrequireが使えない

require ***でファイルを読み込んでいたが、***のファイル名を少しだけ変更した。

requireのファイル名を同時に変更することを忘れていたので、気をつけたい。