text-shadow使ってますか

文字に影をつけるためのCSSプロパティ。
以前は使ってみても影が付いてるのかどうかはっきりしないくらい効果が薄かったので編み出した方法なのですが久しぶりに使ってみたらはっきりくっきり出ている。記憶違いかな。

See the Pen GRJogEp by sphenisc (@sphenisc) on CodePen.

これはどういう時に使うかと言うと写真背景の上に白い文字を表示しなければいけないような状況で読みにくさを緩和するためのものです。
text-shadow を12回重ねがけして効果を増強しています。

バリエーション

SCSSで影の色と濃さを調整できるようにしたもの

See the Pen
rNVxazr by sphenisc (@sphenisc)
on CodePen.

• $sha: #fff;　が影の色を設定する項目で
• $opa: 0.4;　で影の濃さを調整できます。

text-shadow: 2px 2px 2px rgba($sha, $opa)
パラメータの意味は　影のX座標をいくつずらすか／Y座標を～以下略／ぼかす範囲／影の色

• 影を強く、濃くする　→　同じ範囲の影を十数個重ねる
• くっきりさせる　　→　影のぼかす範囲(3つ目のパラメータ)を狭くする(0.4em → 0.1em等)
• ぼやけさせる　　　→　影のXとY座標をバラけさせたりランダムにする

画面端まで中身を伸ばす

前回innerより横幅の広い要素を中央揃えにする方法を紹介しました。
今回は幅が決まっていない場合はどうすればいいのかを紹介します。

元の状態

See the Pen
WNvrNRe by sphenisc (@sphenisc)
on CodePen.

画面幅いっぱいまで広げると

See the Pen
WNvrNpe by sphenisc (@sphenisc)
on CodePen.

こうなります。
中身の領域を変えずに背景だけ広げたいならその要素に

padding: 0 calc(50vw - 50%);
margin: 0 calc(50% - 50vw);

をつけます。何をしているかというと
例えばディスプレイの画面幅が1920px　広げたい要素の横幅が980pxだとすると

• margin： 980pxの50%で490px - 1920pxの半分の960px = -470px　左右に470pxのマイナスマージンをとる。つまり横幅が470px×2 だけ広くなる
• padding： 960px - 490px = 470px　左右に470pxの余白ができる (NormalizeCSSの影響で box-sizing: border-box; が適用されている)

→中身の領域は変えず、背景だけを画面幅いっぱいにすることができるわけです。
中身も含めて画面幅いっぱいにしたい場合は padding: 0 calc(50vw - 50%); を消すだけで修正できます。

活用例

タイトルの装飾を左端または右端まで伸ばす

See the Pen
OJVMJpG by sphenisc (@sphenisc)
on CodePen.

ブロック要素とインライン要素について

ブロック要素：
見出し・段落など一つのブロックとして主にページ全体のレイアウトを行うために使う要素。
（div,p,tableなど）

インライン要素：
主にブロック要素の中身として用いられる要素。文章の一部を装飾するときなどに使われる。
（a・strongなど）

classセレクタ・idセレクタについて

class：
種別名を割り当てるもので、 同じclass名を、1ページ中に何度でも使うことができる。

id：
固有の名前を割り当てるもので、 同じid名は、1ページ中に1度しか使えない。

webフォントとは

webサーバー上で提供されているフォントファイルのこと。
どの端末からアクセスしたときでも、同じフォントを表示させることができる。

100日チャレンジの238日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

238日目は

おはようございます
238日目
・youtubeで、portfolio模写
・udemyで、css講座#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) February 12, 2020

CSSの中央寄せはややこしい

CSSの縦横センタリングについて調べると、

• text-align: center; で中央揃えする
  • ただし目的の要素をinline要素にする必要がある
• margin: auto; で中央寄せをする
  • ただし目的の要素の大きさを指定する必要がある
• line-height を親要素の height と同じにして縦方向の中央寄せをする
  • ただし親要素の高さを指定する必要がある
• position: absolute; で50%指定して transform で中央にずらす
  • 色々する必要がある

など様々な方法が紹介されているが、それぞれ条件があり使い分けがめんどくさい。
そんなわずらわしさを解消してくれる（気がする）のが、今回のネタ CSS Flexible Box Layout による中央寄せである。よくサイトでは最後にあたりに紹介されているやつ。

中央寄せにはFlexboxを使う

以下のCSSを中央寄せしたい要素の親要素に指定する。
コンテナをFlexboxにし、水平方向と垂直方向に対し子要素を中央に持ってくるように指定している。

css

.parent {
    display: flex;            /* Flexboxを指定 */
    justify-content: center;  /* 水平方向の中央寄せ */
    align-items: center;      /* 垂直方向の中央寄せ */
}

だいたいこれをすれば条件などを気にすることなく素直に中央に寄ってくれるのだ。
いちいち3行書くのも面倒なので、SCSSを導入して関数にしてあげれば1行で指定できて楽。

scss

@mixin flexCentering($justify: center, $align: center) {
    display: flex;
    justify-content: $justify;
    align-items: $align;
}

.parent {
    @include flexCentering();
}

基本的な中央寄せの例

とりあえず例に使う要素とスタイルは以下のようにする。

html

<div class="parent">
    <div class="child">袋井宿</div>
</div>

css

.parent {
    width: 300px;
    height: 200px;
    background: lightblue;
}
.child {
    margin: 10px;
    padding: 10px;
    background: lightgreen;
}

ど真ん中に中央寄せ

先ほどのFlexboxのCSSを親要素に指定する。

css

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

これが中央寄せのベースになる。

横方向の中央寄せ

垂直方向の配置を指定する align-items に flex-start を指定する。

css

.parent {
    display: flex;
    justify-content: center;
    align-items: flex-start;  /* 垂直方向は上に寄せる */
}

align-items に flex-end を指定すれば下に行く。

縦方向の中央寄せ

水平方向の配置を指定する justify-content に flex-start を指定する。

css

.parent {
    display: flex;
    justify-content: flex-start;  /* 水平方向は左に寄せる */
    align-items: center;
}

justify-content に flex-end を指定すれば右に行く。

応用的な中央寄せの例

丸の真ん中に文字

大きさのない要素を border と border-radius を使い円弧で囲うことによって丸形を作り、その中に入れる文字を中央寄せする。
white-space: nowrap; を指定すると狭い幅でも文字列が折り返しされない。

html

<div class="parent">袋井宿</div>

css

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0;
    height: 0;
    border: 50px solid lightblue;
    border-radius: 50px;
    white-space: nowrap;
}

複数要素の中央寄せ

Flexboxなので複数要素でもラッパーをつけたりせずにいける。

html

<div class="parent">
    <div class="child">掛川宿</div>
    <div class="child">袋井宿</div>
    <div class="child">見附宿</div>
</div>

css

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 200px;
    background: lightblue;
}
.child {
    margin: 10px;
    padding: 10px;
    background: lightgreen;
}

縦方向に並べて中央寄せしたい場合は、新たに flex-direction プロパティを追加して colmun （縦方向）を指定してあげればOK。

ただし、これを指定すると配列方向を変えることになるので、justify-content と align-items の役割は逆になることに注意。
というか、本来 justify-content は主軸方向、align-items は交差軸方向の配置を指定するプロパティなので、自分で言っといてなんだが「水平」や「垂直」と呼ぶのはあまり良くない。デフォルトでの flex-direction の値は row （横方向）である。
深掘りはもはやFlexboxの説明になってしまうので割愛。

css

.parent {
    display: flex;
    justify-content: center; /* 主軸方向に中央寄せ */
    align-items: center;     /* 交差軸方向に中央寄せ */
    flex-direction: column;  /* 縦方向に並べる */
}

蛇足だが、flex-direction プロパティに row-reverse を指定してあげると逆順になる。
東海道の起点は日本橋なので掛川宿は袋井宿の東にある。

メリットとデメリット

他の中央寄せの方法と違って親要素や子要素の大きさを指定するすることなく中央寄せができるところがメリット。
たとえば、CSS Gridの各要素は基本的にセルごとにストレッチされるため、大きさを直接指定することがない。よってこの中で中央寄せをしたいとなると、子要素の大きさを指定して margin: auto; を指定することになるだろうが、その子要素が文字列で可変なので大きさを指定するのはなんかやだ！みたいなときに使える。

html

<div class="container">
    <div class="parent">
        <div class="child">掛川宿</div>
    </div>
    <div class="parent">
        <div class="child">袋井宿</div>
    </div>
    <div class="parent">
        <div class="child">見附宿</div>
    </div>
</div>

css

.container {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
    column-gap: 10px;
    width: 300px;
    height: 200px;
    background: lightgray;
}
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
    background: lightblue;
}
.child {
    margin: 10px;
    padding: 10px;
    background: lightgreen;
}

また、基本的なFlexboxの機能はIE11を含め、現行のブラウザではすべて -ms- や -webkit- などのベンダープレフィクスをつけることなく使用できる。接頭辞をつければ全ユーザの97%、つけなくても95%をサポートする。
ただし、IE9以下などの古いバージョンは対応していないため、そのあたりを考慮に入れるなら他の方法を考えるしかない。
また「基本的な」Flexboxの機能といったように、「複数要素の中央寄せ」で出てきた flex-direction などは別枠である。

詳細は以下のリンクからどうぞ。
Can I use... Support tables for HTML5, CSS3, etc

なお、中央寄せといっても以下のような複数行の中央揃えはできないので、素直に text-align: center; するしかない。というかこっちのほうが楽。

html

<div class="parent">
    中央揃えは<br>
    text-align: center;を<br>
    やるしかない
</div>

css

.parent {
    width: 300px;
    height: 200px;
    background: lightblue;
    text-align: center;
}

また、値を center から flex-start へ変えるなどの変化にアニメーションは適用されないようなので注意が必要。ここは margin の操作で代用できる。

おわりに

自分はめんどくさがり屋なので深く考えずにこの方法を使ってしまうが、ほかの一般的な方法と比べていくらか冗長になるわけですっきりしないかもしれない。人によるものなので参考程度にどうぞ！

nth-childとは

ある要素の隣接している子要素を最初から数えて、n番目にあたる要素にスタイルを当てることができる！

擬似クラス :nth-child()の使い方まとめ

nth-child(n)　　n番目

nth-child(３n)　　３の倍数

nth-child(３n-1)　　３の倍数-1番目に適用

nth-child(n-４)　　４番目以降に適用

nth-child(even)，　 :nth-child(2n)　　偶数

nth-child(odd)， :nth-child(2n-1)　　奇数

n番目

:nth-child(n)

例えば、3の倍数の場合 :nth-child(3) になります。
以下の記述で３の倍数のリストの文字色だけ赤色に変えることができます。

sample.css

li:nth-child(3n) {
  color: red;
  font-weight: bold;
}

3の倍数-1番目に適応

:nth-child(3n-1)

sample.css

li:nth-child(3n-1) {
  color: red;
  font-weight: bold;
}

例えば３つ横並びにしたとき、真ん中のみスタイルを適用したい時に便利!

---

nth-child(n)を使えばhamlのクラス名を変えて都度scssを書く必要がないので便利ですね！！！

はじめに

例のごとく、実装は自己責任でお願いします。

説明しないこと

• 楽天GOLDの契約手順
• FTPへのアップロード方法
• HTMLやCSSの基礎

前回と同じですね。

前提

今回も、以下の前提の上に説明を進めます。

• ショップURL & GOLDアカウント名: myshop

手順

本当は理解してほしいんですが、早く手順だけ教えろという方向けに、まず手順だけに絞って説明します。
そのあと、ソースコードの要点を説明しますから、是非そちらも読んでみてください。

RMS側の設定

まずは全商品ページに下記パーツを追加します。

店舗設定 > 2 デザイン設定 > スマートフォンデザイン設定 > 商品ページ共通パーツ設定

<!-- hamburger button -->
<input id="navcheck" type="checkbox" ="">
<label class="ham-btn" for="navcheck" =""><span =""></span =""><span =""></span =""><span =""></span =""><span ="">menu</span =""></label ="">

<!-- navigation drawer -->
<div class="sp-drawer" ="">
  <iframe frameborder="0" src="https://www.rakuten.ne.jp/gold/myshop/iframe/navigation-drawer.html" width="100%" frameborder="0" =""></iframe ="">
</div ="">
<label class="close-btn" for="navcheck" =""><span =""></span =""><span =""></span =""></label ="">

<link rel="stylesheet" href="https://www.rakuten.ne.jp/gold/myshop/iframe/css/hamburger.css" ="">

FTPサーバ内のファイル構成

FTPサーバ内のファイルはこういった構成で作りました。
これは必ずこの構成でなければならない訳ではなく、href属性やsrc属性といったファイルの参照場所の記述と合致していれば、ファイルは好きな場所に置いてOKです。

myshop/
└── iframe/
    ├── navigation-drawer.html
    └── css/
        ├── drawer.css
        └── hamburger.css

※ /で終わるものはディレクトリ名（=フォルダ名）です
※ myshop/はFTPのroot（一番上のフォルダ）で、新規作成の必要はありません

各ファイルのソースコード

navigation-drawer.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>sp navigation drawer</title>

  <!-- Fontawesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >

  <!-- bootstrap4 css -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <!-- my style -->
  <link rel="stylesheet" href="css/drawer.css">

</head>
<body>

<div class="main-content">
<h3>Header 1</h3>
<ul>
  <li><a href="#" target="_top"><i class="fas fa-gem"></i>menu 1</a></li>
  <li><a href="#" target="_top"><i class="fas fa-list-ul"></i>menu 2</a></li>
  <li><a href="#" target="_top"><i class="fas fa-bell"></i>menu 3</a></li>
  <li><a href="#" target="_top"><i class="fas fa-crown"></i>menu 4</a></li>
</ul>

<h3>Header 2</h3>
<ul>
  <li><a href="#" target="_top"><i class="fas fa-hands-helping"></i>menu 5</a></li>
  <li><a href="#" target="_top"><i class="fas fa-map-marker-alt"></i>menu 6</a></li>
  <li><a href="#" target="_top"><i class="fas fa-shipping-fast"></i>menu 7</a></li>
  <li><a href="#" target="_top"><i class="fas fa-calendar-alt"></i>menu 8</a></li>
  <li><a href="#" target="_top"><i class="fas fa-comments"></i>menu 9</a></li>
  <li><a href="#" target="_top"><i class="fas fa-shopping-cart"></i>menu 10</a></li>
  <li><a href="#" target="_top"><i class="fas fa-question-circle"></i>menu 11</a></li>
</ul>

<h3>Header 3</h3>
<ul>
  <li><a href="#" target="_top"><i class="fas fa-envelope"></i>menu 12</a></li>
  <li><a href="#" target="_top"><i class="fas fa-rss"></i></i>menu 13</a></li>
  <li><a href="#" target="_top"><i class="fab fa-twitter"></i>menu 14</a></li>
  <li><a href="#" target="_top"><i class="fab fa-facebook-f"></i>menu 15</a></li>
  <li><a href="#" target="_top"><i class="fab fa-instagram"></i>menu 16</a></li>
</ul>
</div><!-- .main-content -->

<!-- bootstrap4 js -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

hambutger.css

@charset "utf-8";

/* -------------------------------------
check button
------------------------------------- */
#navcheck {
  display: none;
}

/* -------------------------------------
sp navigation drawer
 - style in rakuten product page
------------------------------------- */
.sp-drawer {
  position: fixed;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  width: 70vw;
  height: 100vh;
  top: 0;
  left: -70vw;
  z-index: 10000;
  transition: all .4s ease;
}

.sp-drawer>iframe {
  width: 100%;
  height: 100%;
}

#navcheck:checked~.sp-drawer {
  left: 0;
}

/* -------------------------------------
close button [x]
------------------------------------- */
.close-btn {
  display: none;
  width: 30px;
  height: 30px;
  position: fixed;
  top: 50px;
  left: calc(70vw + 15px);
  z-index: 9999;
}

#navcheck:checked~.close-btn {
  display: block;
}

.close-btn span {
  display: block;
  position: absolute;
  left: 0;
  top: 25px;
  height: 2px;
  width: 30px;
  background-color: white;
  z-index: 9999;
}

.close-btn span:first-child {
  transform: translate(0, -10px) rotate(45deg);
}

.close-btn span:last-child {
  transform: translate(0, -10px) rotate(-45deg);
}

.close-btn::after {
  display: none;
  content: '';
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,.5);
}

#navcheck:checked~.close-btn::after {
  display: block;
}

/* -------------------------------------
hamburger button
 - three lines and 'menu' text
------------------------------------- */
.ham-btn {
  position: absolute;
  top: 150px;
  right: 10px;
  z-index: 9999;
  width: 36px;
  height: 38px;
  border: 1px solid #4a4a4a;
  border-radius: 5px;
  background-color: white;
}

.ham-btn span {
  display: block;
  position: absolute;
  height: 2px;
  width: 22px;
  left: 6px;
  background-color: #4a4a4a;
}

.ham-btn span:first-child {
  top: 6px;
}

.ham-btn span:nth-child(2) {
  top: 13px;
}

.ham-btn span:nth-child(3) {
  top: 20px;
}

.ham-btn span:last-child {
  width: 36px;
  left: 0;
  background-color: transparent;
  text-align: center;
  font-size: 10px;
  top: 22px;
}

drawer.css

@charset "utf-8";

/* -------------------------------------
enable scroll
------------------------------------- */
html::-webkit-scrollbar {
  display: none;
}

body {
  overflow-y: scroll;
  padding-bottom: 71px;
}

/* -------------------------------------
style in iframe
------------------------------------- */
.main-content {
  padding: 15px;
}

h3 {
  font-size: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid dimgray;
  margin-top: 20px;
}

h3+ul {
  list-style: none;
  line-height: 32px;
  padding-left: 12px;
  font-size: 14px;
}

h3+ul li {
  border-bottom: 1px solid dimgray;
}

h3+ul a {
  color: inherit;
}

h3+ul a:hover {
  text-decoration: none;
}

h3+ul i {
  margin-right: 10px;
  color: indianred;
  width: 18px;
  text-align: center;
}

結果

解説

RMS設定

以降、説明しない部分を適宜省いたり、見やすく改行したりしています。
先に紹介したソースコードと異なりますのでご了承ください。

店舗設定 > 2 デザイン設定 > スマートフォンデザイン設定 > 商品ページ共通パーツ設定

<input id="navcheck" type="checkbox">
<label class="ham-btn" for="navcheck">
  <span></span>
  <span></span>
  <span></span>
  <span>menu</span>
</label>
<div class="sp-drawer">
  <iframe src="navigation-drawer.html"></iframe>
</div>
<label class="close-btn" for="navcheck">
  <span></span>
  <span></span>
</label>

チェックボックスとラベルの関係

チェックボックスはinput[type="checkbox"]の部分、ラベルはlabelの部分です。
それぞれ1個と2個記述してあります。

チェックボックスはみなさんご存知の通り、本来はこんな見た目のやつ（）です。
をクリックすることで、チェックが付いたり外れたりしますよね。

ラベルはfor="ID名"の属性を付けることで、チェックボックスをON/OFFする遠隔スイッチみたいな役割をもたせることができます。
つまりを直接触らなくてもラベルを触ればON/OFFができるってことです。

今回はこのが見た目的に要らない子なので、後述するCSSで非表示にしています。ラベルさえ触れればいいわけですから。

でラベルが2個ある理由ですが、これは単純にONスイッチとOFFスイッチです。
label.ham-btnを触った時にONにするので、これは例の3本線パーツにします。中にspanタグがいくつもあるのは、上3つで3本線を作り、最後の1つで「menu」という文字を作るためです。
一方、label.close-btnを触った時はOFFにするので、これはXボタンにするわけです。中のspanタグ2個についてはもう説明不要ですよね。

ONスイッチとOFFスイッチを分けずに1つのlabelで作る方法もあるのですが（というかそちらがメジャー？）、今回はややこしくならないように2つのパーツで作りました。

チェックボックスの状態とその他パーツの関係

ラベルをクリックするとチェックボックスがON/OFF可能であると理解しましたか？
次はチェックボックスの状態についてお話します。

ところで、CSSでは下記の様な記述が可能です。

input[type="checkbox"]~div {
  display: none;
}

input[type="checkbox"]:checked~div {
  display: block;
}

最初のCSSセレクタは「チェックボックスより後ろにあるdivタグ」という意味です。
次のCSSセレクタは「チェックボックス（ON状態）より後ろにあるdivタグ」です。

そしてこの記述をすると、上記のdivはこんな挙動を見せます。

• チェックボックスがONの時だけ見える

そう、これが意味するのはチェックボックスのON時とOFF時で、後ろにあるパーツのスタイルを別々に指定できるということです。

このテクニックもだいぶ使い古されたものではありますが、これが今回一番大事なポイントになります。
こうしてON/OFF別々の指定ができるから、CSSだけでハンバーガーメニューが実現できるわけです。
要はチェックONの時だけ、見せたいパーツを見せれば良いわけですから。

そしてこの事を理解したあなたは、CSSがどんな感じになるか想像できますね。こんな感じのCSSになると思いませんか？

左からでてくるやつ {
  display: none;  /* OFFの時に見えない */
}

input[type="checkbox"]:checked~左から出てくるやつ {
  display: block;  /* ONの時に見える */
}

CSS解説

HTMLについては、特に説明すべきことがないので説明しませんよ。ただのulリストです。

CSSですが、各ファイルで次のようなことをしています。

hamburger.css

• チェックボックスを非表示
• 各パーツの表示・非表示をコントロール
• 3本線ボタンやXボタンの形を作る
• Xボタンの疑似要素 (::after) で、暗い背景を作る

drawer.css

• navigation-drawer.htmlにおけるスタイルを記述
• ドロワーの中身が縦長ではみ出る時に、スクロール可能にする

ここで特に説明しなければならないのは、ナビゲーションドロワー.sp-drawerについてでしょうか。
ナビゲーションドロワーは、左から出てくる例のアイツのことです。この部分です。

hamburger.css

.sp-drawer {
  position: fixed;
  width: 70vw; /* 幅はデバイス幅の70% */
  height: 100vh;
  top: 0;
  left: -70vw;
  transition: all .4s ease; /* 変形するときに、0.4秒かけてスムーズに動く指定 */
}

コイツだけはdisplay: none;で非表示にしておらず、width: 70vw; left: -70vw;とすることで画面の左側に追い出しています。
結果的に見えないわけですが、チェックONになった時はleft: 0;と画面内に持ってくることで、transition: all .4s ease;の指定と合わせて考えると、結果的に左からニョキッと出てくるわけです。

まとめ

実は私もCSSでこういったメニューを作るのは初めてだったんですが、理解して作ったことで今後できることが広がった気がします。

特にCSSセレクタ~の存在です。存在自体は知っていましたが、この様な使い方までは思いつきませんでした。

実際、CSS勉強中に「~は、後ろにあるものを指定します」とかいう説明を見ても使い方まではピンと来ないでしょう。多くの人が「へぇ～」で終わったり、ただの暗記対象としてしか捉えないと思います。

やっぱ知識は使ってナンボじゃい！

あと、こういう投稿を続けることで自店舗をカスタマイズできる店長が少しでも増えればいいなと思っています。
「外注にページ作ってもらったは良いけど、自分で修正できなくて困っている」という人が絶滅しますように。

innerとはなんぞ

Webサイトでよく使われるinnerは横幅が1920とか4kとかある大型ディスプレイでサイトを開いてもページが横にびろーんと伸びすぎないようにするためのものです。
名前はwrapとかcontainer等のバリエーションもありますが目的は同じです。

.inner {
  width: 980px;
  margin: 0 auto;
}

幅はサイトによってまちまちですがだいたいこんな感じのことが書いてあります。

どうすればいいのか

元の状態

See the Pen
BaNjaZe by sphenisc (@sphenisc)
on CodePen.

例えば「これをinnerの外にはみ出させたい」の部分をinnerから出して幅1200pxで表示したいとします。
しかし普通に幅1200px ＆ margin:0 auto;を指定すると右にだけはみ出すので以下のようにします。

See the Pen GRJoRvz by sphenisc (@sphenisc) on CodePen.

margin: 0 calc((980px - 1200px)/2);

の部分がわかりにくいと思いますが左右に 1200pxと980pxの差の半分である110pxのマイナスマージンをとっています。

はじめに

なんかQiita投稿したいな〜と思いつつ何も書いてなかったので書いてます。
別に記事にするほどのことではありません。日記です。ｎｉｋｋｉ。
ありふれた記事を参考にありふれた記事を書きます。

ポートフォリオってなんぞ

ポートフォリオ(portfolio)とは、自分の作品集のことを言います。
いわゆるクリエイターの自己紹介ですね。
主にデザイナー界隈で使われる言葉らしいです。（知らんけど）

デザイナーやエンジニア、その他クリエイターをはじめ、
就職時やクライアントへの売り込みなどで自己アピールを行うための重要なツールとなります。

ポートフォリオ作りたくね？

Qiitaに訪れているということはプログラミングしてるorしたいってことですよね？
でもローカルで動かしたり、ただネットに置いただけで満足ですか？
もっと自分の成果見てもらいたくないですか？
ビジネスにつなげるためにも、ポートフォリオを作りましょうよ！！！

めっちゃ簡単に作れるやないか〜い

今回の方法にたどり着くまでの僕
「WixとかJimdoでサイト作ったことはあるけど、それはもう卒業したい。
AWS EC2とwordpress使ってみようかな〜でも永続的に使うと課金必要だしな〜」

大学の友人
「GitHub Pages＋Jekyllの組み合わせが一番いい」

その後いろいろ調べた僕
「なんかAWSめんどくさそうだからGitHub Pages使ってみよ〜〜......」
「え、めっちゃ簡単！！！」
って感じです。

GitHub Pagesってなに？

GitおよびGitHubについては適当にググってください。
簡単に言えばソースコード公開所です。少なくとも僕はそう思ってます。
GitHubPagesはGitHubを利用してHPを公開できる機能です。

・GitHubのアカウントがあれば誰でも使えます。
・サーバーが必要なく課金も必要ありません。
・GitHubの練習にもなる（ソロだけど）
・コードが公開される点は注意

どうやって使うべや

手順は簡単、以下の通りです。
1. GitHubのアカウントを作成
2. [自分のID].github.ioでリポジトリ作成　(IDで作るのは慣習？理由あり？)
3. ローカルにクローン作っていじる
これだけです。

1,2は説明するほどのことではないと思うので割愛します。

ローカルにクローンを作っていじる

一応GitHub上でも編集はできますが、編集のしやすさやGitの練習のことを考えてローカルにクローンします。

僕の環境はMacOSです。今回はターミナルではなくSourceTreeというGitクライアントを利用します。
↓ここからダウンロードしてインストールしましょう。
・SourceTree公式

インストールできたら起動します。

↓起動したら[新規]より[URLからクローン]を選択します。

↓URLのところに2で作成したリポジトリのリンクを貼り付けます。保存先は好きなところにどうぞ。(Gitフォルダ作るのがオススメ)

ちなみにリポジトリのリンクはGitHubのリポジトリにアクセスして画像右下のボタン押すとコピーできます。

↓クローンを押し、以下のようになれば完了です。
（名前変えてますが上の画像通りにやるとyuuto1228になります）

※実際の編集は保存先のディレクトリで行います。

これで環境はできた！簡単でしょう？

環境はできたのであとはファイルをいじいじしてリポジトリにプッシュプッシュするだけです。
僕はGit初心者なのでSourceTreeの使い方含め使いながら覚えたいと思います。
その辺の手順も追い追い備忘録として書きます。

次回

次回はJekyllについて書こうと思います。これはWebサイトを構成するHTMLファイル一式を出力するツールだそうです。

次回→

プログラミング用語の読み方「HTML / CSS」

英語表記の用語達

プログラミングを始めたばかりの自分は覚えなければいけないことが毎日大量にふってきます。
おそらく、かのムスカ大佐であれば
「情報量がゴミのようだ」
そう例えるほどだと思います。

にも関わらず

英語が全くな私は覚えなければいけない用語の読み方が分からない。
そのためスペルで覚えようとして効率が本当に悪い。
しかも、人に説明しようにも自分だけ、スペルを１文字づつ伝えるという手段しかない。

ということで

英語で表記された各用語をカタカナで表現し、まとめました。

Before アフター

Before	アフター
height	ハイト
width	ウィズ、ウィトゥス
justify	ジャスティファイ
margin	マージン
padding	パディング
align	アライン
calc	キャルク、キャルキュ
required	リクワイヤード
opacity	オパシティ
radius	レイディアス(ラディウス)
absolute	アブソリュート
relative	レラティブ

問題

Webサイトを作っているとこんな感じの横3列のリストを作りたい状況が結構あります。
しかし、フレックスボックスで

justify-content:space-between;

を使ってに並べると

このように10と11の間に隙間が空いてしまいます。

対策

.hoge::after{
  content: "";
  width: 30%;
}

このように疑似要素で11の後にリストをもう1つ追加してやればいい。
widthの数値はリストの幅と同じにする。
Q. リストが12個になった時 次の行にはみ出たりしないの？
A. 疑似要素は高さ0なので見た目上は何の影響もない。

完成版のコード例

<div class="inner">
  <ul class="list_anchor">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
  </ul>
</div>

.inner {
  width: 90%;
  margin: 0 auto;
  padding: 1em 0;
}
.list_anchor{
  display: -webkit-box;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  flex-wrap:         wrap;
}
.list_anchor::after{
  content: "";
  width: 30%;
}
.list_anchor li{
  width: 30%;
  margin-bottom: 1em;
}
.list_anchor li a{
  display: block;
  line-height: 1;
  position: relative;
  color: #0063cc;
  background: #dff0ff;
  text-decoration: none;
  padding: 10px 15px;
  font-weight: 500;
}
.list_anchor li a::after{
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid #0063cc;
  border-right: 3px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 3px solid transparent;
  position: absolute;
  right: 10px;
  top: calc(50%);
}

https://jsfiddle.net/sphenisc/fgLxyhwu/14/