vertical-align を使ってインライン要素またはテーブルのセル要素で垂直の位置の指定をします。

css

vertical-align : 値;

インライン要素での指定

インライン要素には　aタグ spanタグ などがあります。
MDNでインライン要素を確認する

• baseline　親要素のbaseline に揃えます。(初期値)
• top 行全体の上端に揃える
• middle　親要素の中央に揃える
• bottom　行全体の下端に揃える
• text-top　親要素のフォントの上辺に揃える
• text-bottom　親要素のフォントの下辺に揃える
• super　上付き文字にする
• sub　下付き文字にする

テーブルのセル要素での指定

• baseline
• top
• middle
• bottom

参考にしたサイト

MDN

どうも7noteです。最近よく見かける離脱防止用のバナーの作り方

たとえばこんなやつですね。

これと同じようなものを作ってみます。

どんっ！！

画面いっぱいを暗くして、バナーを表示する方法

index.html

<!-- body直下に設置 -->
<div id="overview">
  <div class="bnr"><img src="sample.png" alt=""><span class="close">×</span></div>
</div>

style.css

#overview {
  width: 100%;       /* 幅いっぱい */
  height: 100vh;     /* 高さいっぱい */
  background: rgba(0, 0, 0, 0.5); /* 背景を薄暗くする */
  display: none;     /* デフォルトは非表示 */
  position: fixed;   /* 表示位置を絶対指定して固定 */
  top: 0;            /* 表示位置を上から0pxに指定 */
  left: 0;           /* 表示位置を左から0pxに指定 */
}

#overview .bnr {
  position: absolute; /* 相対位置とする、かつcloseの基準値になる。 */
  top: 50%;           /* 表示位置を上から50%に指定 */
  left: 50%;          /* 表示位置を左から50%に指定 */
  transform: translate(-50%, -50%); /* 上下中央にするため要素の半分分だけ左上に戻す */
}
#overview .bnr .close {
  font-weight: bold;  /* 太字にする */
  padding: 0 6px;     /* 左右の余白を適当に調整 */
  background: #fff;   /* 背景色を白に指定 */
  position: absolute; /* 相対位置とする */
  top: -28px;         /* いい感じの位置に指定 */
  right: 0px;         /* 同様 */
  cursor: pointer;    /* hover時にカーソルを指の形にする */
}

script.js

/* ページ読み込み完了時にバナーのブロックを表示 */
window.onload = function(){
  $("#overview").show();
}

/* ×ボタンが押されたとき、バナーブロックを非表示 */
$("#overview .close").on("click", function(){
  $("#overview").hide();
});

解説

CSSの解説ですが、ポイントがいくつか。overflowの幅は100vwにしてしまうとpcの縦スクロールバー分の計算をしないといけなくなってしまうので、body直下に設置し、width: 100%;を指定しています。

一番後ろのoverflowに半透明の背景を入れるため16進数での背景指定ではなくbackground: rgba(0, 0, 0, 0.5);と書き、色の透明度で調整。opacityで透明度を指定してしまうと、バナー画像も半透明になってしまうので注意。
詳しくは過去の記事「【初心者でもわかる】cssで使われる透明3種類の使い方」をご覧ください。

あとはバナー画像を上下中央に設置したり、×ボタンをいい感じのところに配置したら完成！
×ボタンは押せることがわかるようにcursor: pointer;を入れておくのがベスト！

まとめ

見た目の体裁についての解説になります。記述しているjsはおまけ程度にお考えください、実運用できるようなレベルのjavascriptではありません。
このままだと、1回バナーを見たユーザーに何度も表示することになりますし、ページリロードする度にバナーが出てくる等、使いにくさが出てくきます。

離脱時（戻るボタンを押したとき）にバナーを出すなどは意外と手間がかかるのでjs初心者の方はあまりお勧めしないかも。。。そういうツールもあるので、ちゃんと運用したいのであればそのようなツールを導入することを検討するといかも

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ

それでは次に変数についてです！！
ここで『変数』とはなんぞやって方！！　一緒に振り返っていきましょう?

①変数とは？？

変数は名前を代入して使います。
例えば、fruits = りんご　みたいな感じです。
イメージとしては、左側のフルーツが箱でその中に品物を入れていく感じですね?
ただ、変数はその名の通り値が変わリます！！
ですから、優柔不断にあーでもないこうでもないってやってても怒られません笑
反対に代入したものを変えてはいけなものを定数と言います！これはもう絶対に変えられないので、fruitsの中にりんごを入れたらそのままお会計に行きます?

では！！変数を理解できたとこで（できましたよね？）

Scssで使っていきましょう！！

main.scss

section {
  background-color: royalblue;
  .case1 {
    font-size: 40px;
    .case2 {
      font-size: 15px;
    }
  }
}

これが前回までの記述内容になっていますが、これを少し変えていきます！！
今、フォントサイズを指定してますが、これをベースは20pxで使ってね、でももし嫌だったら変えてねって意味で
変数を指定します！！
更に今回はわかりやすいように背景カラーも代入していきたいと思います！！

main.scss

$basefontsize:20px;
$background-color:orange;
section {
  background-color: royalblue;
  .case1 {
    font-size: $basefontsize;
    background-color: $background-color;
    .case2 {
      font-size: $basefontsize;
    }
  }
}

代入のときには"$"これを使います? 代入はじめますよー！の合図です?
あとは、コピーしてペタペタしていく感じですね?
ブラウザで表示するとこうなります！

ちなみにエラーが起きるとこうなります?

でも優しいから、９行目のscss間違えてませんか？って教えてくれます?

scssを使うメリットはいくつかありますが代表的なものに入れ子がありますね。
それではみていきましょう！！

index.html

<link rel="stylesheet" href="sample.css">
<section>
  <div class="case1">あいうえお</div>
  <div class="case2">かきくけこ</div>
</section>

cssの読み込みを忘れないように！！

さて！それでは、scssを書いていきましょう！！

main.scss

section {
  background-color: pink;
  .case1 {
    background-color: rebeccapurple;
    .case2 {
      background-color: royalblue;
    }
  }
}

いつもだとこれでブラウザ表示するのですが、これではまだ反映されません?

ここでターミナルを開きます?

% sass scss/main.scss:css/main.css
% less css/main.css

この流れでしたね！！それぞれはどのような意味があるのかは
▶https://qiita.com/akari_0618/items/14f53a8b3586785f15b3
こちらの記事を参照してください?

ブラウザで開いてこうなれば大丈夫です！！
完璧ですね?

必要最小限の３カラムレスポンシブ

<div class="wrapper">
  <div class="third-clm"></div>
  <div class="third-clm"></div>
  <div class="third-clm"></div>
</div>

.wrapper {
  text-align: center;
  width: 1080px;
}
.third-clm {
  width:33%;
  padding: 1%;
  display:inline-block;
}

@media only screen and (max-width: 640px) {
  .third-clm {
    width:100%;
    padding: 1rem;
    display: block;
  }
}

まずscssを使うにはrubyをインストールする必要があります。
rubyをまだ導入していない場合はまずはそちらから導入していきましょう！
導入が終わったという体で進めていきます?

scssフォルダを作りましょう！

私はVSコードを使っているのでそちらを使って進めていきます?

①saccフォルダを作る

vsコードをダウンロード終わったら、フォルダを作成していきます。
作成が終わったら、index.htmlファイルを作り、cssフォルダ、scssフォルダを作ればとりあえず終わりです?

②ターミナル

次にターミナルを使っていきます。

% cd Documents
% ls
% cd Sass

この状態にしておきましょう。（scssフォルダの中にいる感じ）

③cssファイルの中に記載して行きます！

style.scss

main {
  width: 90%;
  p {
    font-size: 14px;
  }
}

前回の記事でも説明したように、index.html の親要素と子要素の関係のようにそれに伴って、入れ子のように記述していきます。
ちなみに拡張子はstyle.scssです。

④再びターミナル

ではではターミナルをいじっていきます！前回のターミナルですでにsassファイルの中にいますのでそのまま進めていきます！！

% sass scss/main.scss:css/main.css #scssをcssに変換する
% less css/main.css #main.cssに展開されていく
% sass ---style expanted scss/main.scss:css/main.css  #構造がわかりにくい場合に使うようです。
% less css/main.css #再び展開

*less~を行うとターミナル上にend文字出てきてうち込みできなくなるので、[;qw]を押すと画面がまた入力状態に戻ります！！
ただこのやり方なかなかめんどくさいなと思ったかた、省略しちゃいましょうか?

% sass --style expanted --watch scss:css

これで完了です！
終了する場合はコントロール＋cです！！?

やりたかったこと

hover時に子コンポーネントのcssを変更する

結論

通常はopacityを0にしておいて、hover時に1に変更する。
makeStylesを使った場合はちょっと特殊な書き方だったので、makeStylesを使いたい人は参考にしてください。

const useStyles = makeStyles({
  ...
  image_item_bar: {
    opacity: 0,
  },
  image_item: {
    '&:hover': {
      cursor: 'pointer',
      "& $image_item_bar": {
        opacity: 1.0,
      }
    }
  },
});

export default function GridImageList() {
  const classes = useStyles()

  return (
    <div className={classes.root}>
      <ImageList variant="masonry" cols={3} gap={8}>
        {itemData.map((item) => (
          <ImageListItem key={item.img} className={classes.image_item} >
            <img
              srcSet={`${item.img}?w=161&fit=crop&auto=format 1x,
                ${item.img}?w=161&fit=crop&auto=format&dpr=2 2x`}
              alt={item.title}
              className={classes.img}
            />
            <ImageListItemBar
              title={item.title}
              actionIcon={
                <IconButton
                  aria-label={`info about ${item.title}`}
                  className={classes.icon}
                >
                  <DeleteIcon />
                </IconButton>
              }
              className={classes.image_item_bar}
            />
          </ImageListItem>
        ))}
      </ImageList>
    </div>
  );
}