More than 3 years have passed since last update.

Railsで架空のCafeのHPを作ってみよう!【2日目】

Posted at 2021-07-08

概要

基本Railsの記法に則り書いていきます！
１から全ての説明ではなく
その中であれ？どうやるの？と
疑問に思った点や実装に困った箇所を
ピックアップして紹介していきます♩

・Rails
・HTML
・CSS
・Javascript(jQuery)

↑上記の言語とフレームワークを使い
架空(自分で考えたテキトーなもの)のCafeの
HPを作っていこうと思います！

・トップページのレイアウトとCSS

z-indexで要素の順番を指定しようとしたが
うまく指定した順番になってくれない！

index.html.erb


<body>

  <div class="a">
    <div class="b">sample</div>
  </div>

</body>

index.css


.b {
  z-index: 1;
}

この状態で要素aより要素bを浮かせようと思っても全然できなかった。

z-indexは同じ階層の中でなければいけなかった。

index.html.erb


<body>

  <div class="a">sample</div>

  <div class="b">sample</div>
  
</body>

index.css

 
.b {
  z-index: 1;
}

このようにすることで
要素aよりも要素bの方が浮いて表示される。