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

コーディング学習サイトCodestepを使用した模写学習での気づきを解説仕様でまとめた記事です。

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

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

※元サイトはこちら

学び①: テキストに陰影をつける（drop-shadow）

＜完成イメージ＞

＜実装方法＞
陰影をつけるにはfilterプロパティの値にdrop-shadow関数を使用。
書き方は以下の通り。

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);
}

.

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

＜完成イメージ＞

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

＜ソースコード＞

index.html

<h3 class="item-title">COFFEE</h3>

style.css

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

.

学び③：絶対配置でロゴを背景の左右中心に配置

＜完成見本＞

＜実装方法＞
①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;
}

.

学び④：スムーススクロール

＜完成見本＞
グローバルメニューをクリックしてジャンプする際に、スクロールしながら対象のリンクに移動するようにしたい
（詳細はデモサイトを参照）

＜ソースコード＞

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;
  });
})

ソースコード解説

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

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

.
.

②「（条件式） ? （trueの場合の式）：（falseの場合の式）」
　→三項演算子の構文
　「条件式」の部分がtrueの場合は、「trueの場合の式」、falseの場合は（falseの場合の式）を実行

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

＜詳細＞
・（条件式）の部分
　→「||」は演算子で、「or」の意。

href == "#" || href == ""
//href属性が"#" または"空白”

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

//$(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文章に書き換えると以下のようになる。

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