模写学習 殴り書き日誌①（Codestep/カフェサイト）

コーディング学習サイト[Codestep](https://code-step.com/)を使用した模写学習での気づきを解説仕様でまとめた記事です。

完全に自分の振り返り用なので悪しからず、、、

# 【HTML/CSS コーディング練習】中級編：ストアサイト（カフェ）／LP

※元サイトは[こちら](https://code-step.com/store-menu/)

## 学び①: テキストに陰影をつける（drop-shadow）
＜完成イメージ＞
![IMG_6310.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2791726/0e2880f1-13eb-79fc-c297-c7a705dbad1a.jpeg)

＜実装方法＞
陰影をつけるには**filterプロパティの値に[drop-shadow関数](https://developer.mozilla.org/ja/docs/Web/CSS/filter-function/drop-shadow)を使用。**
書き方は以下の通り。


```css
drop-shadow(
offset-x /*必須：影の距離（水平方向）。プラスの値で右、マイナスの値で左に配置される*/
offset-y /*必須：影の距離（垂直方向）。プラスの値で下、マイナスの値で上に配置される*/
blur-radius /*任意：影をぼかす半径。値が大きくなるほど影は広く薄くなる*/
color /*任意:影の色*/
)
```

＜ソースコード＞
```index.html
<nav>
 <ul>
  <li><a href="#menu">MENU</a></li>
  <!-- 略 -->
</ul>
</nav>
```

```style.css
nav li a {
  filter: drop-shadow(1px 1px 2px #121212);
}
```
.


## 学び②：下線を文字列の長さに合わせる

＜完成イメージ＞
![IMG_0092.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2791726/fc41b48c-21f6-a639-65dd-af6a13b9ef87.jpeg)

＜実装方法＞
**displayプロパティをinline-blockに設定**
（ブロック要素だと、画面幅いっぱいに下線が引かれてしまうため）

＜ソースコード＞
```index.html
<h3 class="item-title">COFFEE</h3>
```

```style.css
.item-title {
  display: inline-block;
  border-bottom: solid 6px #e03131;
}
```
.

## 学び③：絶対配置でロゴを背景の左右中心に配置
＜完成見本＞
![IMG_0093.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2791726/c2002a7a-01a3-aec4-2c51-79707e765e06.jpeg)

＜実装方法＞
**①positionプロパティをabsoluteにする**
**②text-alignプロパティをcenterにする**
**③left、rightプロパティを0に設定する（※）**

※絶対配置を行うために参照するブロック（position:relativbeに設定した要素）のwidth,heightを同じにすると③の工程は必要なくなる。

＜ソースコード＞
```index.html
<header id="header>
<h1 class="site-title"><img src="img/logo.svg" alt="COFFEE"></h1>
</header>
```

```style.css
#header {
  width: 100%;
  min-height: 100vh;
  background-image: url(../img/mainvisual.jpg);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  position: relative;
}

.site-title {
  text-align: center;
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
}
```
.

## 学び④：スムーススクロール
＜完成見本＞
グローバルメニューをクリックしてジャンプする際に、スクロールしながら対象のリンクに移動するようにしたい
（詳細は[デモサイト](https://code-step.com/demo/html/store/)を参照）

＜ソースコード＞
```main.js
$(function(){
    //// ①ページ内のリンクをクリックした時に動作する
  $('a[href^="#"]').click(function(){
    // リンクを取得
    let href= $(this).attr("href");
    // ②ジャンプ先のid名をセット
    let target = $(href == "#" || href == "" ? 'html' : href);
    // トップからジャンプ先の要素までの距離を取得
    let position = target.offset().top;
    // animateでスムーススクロールを行う
    // 600はスクロール速度で単位はミリ秒
    $("html, body").animate({scrollTop:position}, 600, "swing");
    return false;
  });
})
```

### ソースコード解説

①<font color="red">要素[属性名^= "属性値"]</font>
　→CSSのセレクタの１種（属性セレクタ）
<font color="blue">　「属性名が属性値から始まる（属性名の頭の文字＝属性値となる）要素」</font>のこと

```javascript
$('a[href^="#"]').click(function(){
```
.
.

②「<font color="red">（条件式） ? （trueの場合の式）：（falseの場合の式）</font>」
　→[三項演算子](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)の構文
　「条件式」の部分がtrueの場合は、「trueの場合の式」、falseの場合は（falseの場合の式）を実行

```javascript
let target = $(href == "#" || href == "" ? 'html' : href);
```

＜詳細＞
・（条件式）の部分
　→「||」は演算子で、「or」の意。
```javascript
href == "#" || href == ""
//href属性が"#" または"空白”
```

・（trueの場合の式）：（falseの場合の式）の部分
 →クリックした要素のhref属性が「"#" または"空白”」の場合は、変数targetに'**html**'を代入
　そうでない場合は**href（＝クリックした要素のhref属性**）を変数targetに代入

```javascript
//$(function(){$('a[href^="#"]').click(function(){
//let target = ・・・略・・・
? 'html' : href
```
.
これで例えばグローバルナビの「MENU」をクリックした場合は、"#menu"というID名を取得することができる。
また、グローバルナビ以外のa要素（href属性にID名が入っていないもの）については、htmlタグを取得するようになる。

## 補足: 三項演算子について

>3つの被演算子を取る演算子で、条件に基づいて2つの値のうち1つを選択
標準的な演算子を使用できる場所ならどこでも使用できる。

「３つの被演算子」とは上で述べた（条件式）、（trueの場合の式）、（falseの場合の式）の３つのこと。

三項演算子は文法的にはif構文と同じ（＝条件式を評価してtrueの場合、falseの場合で実行式を分岐）
ただ、if構文よりコードが短くなるので、**if構文のショートカット**とも言われている。

ちなみに上記の三項演算子をif文章に書き換えると以下のようになる。

```javascript
if(href == "#" || href == ""){
 var target = $('html');
}else{
 var target = $(href);
}
```