この記事の技術的な目的は要素を横並び、高さを揃えてテキストを上下左右中央寄せにするです。

前半は理論的な事をグダグダ述べていますので興味のない方は「最後に」まで飛んで下さい！

本題

flexboxと言えばfloatと同様、横並びによく使うcssですね。floatの場合、clearを後続の要素に足さなくてはならないので、flexboxの方が人気が高いcssだと思います。

私もflexboxをよく使うのですが、そもそもflexboxって何者何だろうと思い調べたところいろいろ気付く事があったのでここを使って情報共有したいと思います。

そもそもflexboxとは？

引用元

通常フレックスボックスと呼ばれている Flexible Box Module は一次元のレイアウトモデルとして、またインターフェイス中のアイテム間でスペースの分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。

とあります。ポイントを抽出し、要約します。

・正式名称は「Flexible Box Module」
　→フレキシブル、つまり融通の利くということ。全然どうでもいい個人的な考え方だがflex自体が横並びな訳ではなくて、あくまでも融通が利くので縦並びの要素が横並びにも出来るのかなって思う。

・一次元レイアウトモデルである。
　→つまり縦なら縦、横なら横にしかレイアウト出来ない。

・スペースの分配をする機能と強力な位置合わせをする機能を提供する
　→横並べに加え、要素の中央寄せとかもセットで出来ますよーってこと。これから解説するjustify-content、align-itemsに繋がるところ。

flexboxの考え方

上記で出た「一次元レイアウトモデル」ですが、「ある一定の方向」でしか配置できませんよって事でした。
でこの「ある一定の方向」というのが、かなり重要で、ブロックが積み重なる「主軸」と、これと交差する「交差軸」の２つの軸が存在します。

でここで難しいのが、あくまで「ブロックが積み重なる」方向なので、縦にブロックが積み重なっていれば縦が主軸になるし、横にブロックが積み重なっていれば横が主軸になります。文章だけだと分かりずらいので以下に図を用意しました。

基本的には横を使うことが殆どなので、横のパターンを中心に覚えておきましょう。
で、ここまでのことを考えるとflexboxつまりdisplay:flex;を使って横並びにすることは、主軸を切り替えてると考えると面白いですね！

主軸、交差軸の調整方法

ここからが本題。
なんとなく2つの軸が存在することを知れたと思いますが、実際にコードを書いて行きたいと思います。
では以下のようなナビゲーションバーを作ったと仮定しましょう。

html

<nav>
  <ul>
    <li><a href="#">menu1</a></li>
    <li><a href="#">menu2</a></li>
    <li><a href="#">menu3</a></li>
    <li><a href="#">menu4</a></li>
    <li><a href="#">menu5</a></li>
  </ul>
</nav>

css

/* reset */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* main contents */
nav ul{
  display: flex;
  list-style: none;
}
nav ul li{
  width: 100%;
}
nav a{
  display: block;
  height: 100%;
  padding: 10px 5px;
  background-color: #d2691e;
  color: #ffffff; 
  text-align: center;
  border-width: 10px;
  border-color: #ff964b #b44b00 #783200 #ffc8a0;
  border-style: solid;
  text-decoration: none;
}

画面は以下のようになります。

ちょっとレトロなボタン風にしてしまいましたがｗまぁよくある横並びのメニューです。

では各メニューの文字数が変わってしまったらどうでしょうか？コードを変更してみましょう。

html

<nav>
  <ul>
    <li><a href="#">menu1</a></li>
    <li><a href="#">menu2</a></li>
    <li><a href="#">menu3. case by long text.</a></li>
    <li><a href="#">menu4</a></li>
    <li><a href="#">menu5</a></li>
  </ul>
</nav>

画面は以下のようになります。

画面をみてもらうとわかるのですが、navのaに当てたheight:100%;のおかげで各メニューの高さは揃っています。（確認したい場合はnav aのheight:100%;を外して確認してみてください）ですが中のテキストはどうでしょうか？長いテキストは真ん中に来ていますが、他のテキストは上寄せになっています。

主軸と交差軸という言葉を使って言い換えてみましょう。

navのulにdisplay:flex;を当てているので主軸は横となります。これは簡単ですね。そして交差軸はこの場合テキストの配置となります。現状テキストは上寄せになるので、これを交差軸方向の中央寄せにすればいいことになります。

ちょっと文章だけだと分かりづらいので画面に図を加えました。

なんとなく軸の区分けと、やりたいことが明確になったかと思います。
ではこの主軸と交差軸を変化させるためのcssを当てていきましょう。

justify-content, align-items

display:flex;とセットで使うことが多いCSSを２つご紹介します。
それぞれ、軸、使用用途、プロパティ、値を図にしています。
※値に関しては代表的な物のみ紹介します。

軸	使用用途の例	プロパティ	値
主軸	メニューを中央に配置	justify-content	center
↑	メニューを等間隔に配置(両端揃え)	↑	space-between
↑	メニューを等間隔に配置(真中揃え)	↑	space-around
交差軸	テキストを縦方向に中央寄せ	align-items	center

代表的な物を紹介しましたが、今回はとりあえずalign-items:center;を使えば良さそうです。
ただどこにcssを書けば良いでしょうか？

目的をもう一度整理しましょう。今回はaタグ内のテキストを縦方向（交差軸方向）に中央寄せにしたいですよね？

ならば簡単です。今回でいうnavのaの中にCSSを書けばいいですね。ですが実はこれだけでは思い通りには動きません。justify-content,align-itemsはdisplay:flex;とセットで使うことで効力を発揮するのでdisplay:flex;も一緒に追加します。

ここで勘のいい方なんかは思うかも知れません。「横並びにする必要もないのでdisplay:flex;を使うべきではない」と。でも物は使いよう、発想の転換ですし、実際にこのような実装をしているのを見たことがあるので、そこまで気にすることはないと自分は思います。

少し話がそれましたが、実際にコードを書いていきます。

css(追加分のみ記載)

nav a{
  display: flex;
  align-items: center;
}

画面を確認します。

見てみると、確かに縦方向（交差軸方向）に中央寄せになりましたが、横方向(主軸方向)が左寄せになってしまいました。これはdisplay:flex;を使ったことが原因で、これを使うと子要素が１つの要素のような認識をされてしまうからです。text-align:center;はテキストに対して有効なので要素そのものには効きません。

ではどうすれば良いでしょう？
やりたいことをまとめます。流れ的になんとなくわかると思いますが、今度はaタグ内のテキストを横方向（主軸方向）に中央寄せですね。

ここで使うのがjustify-content:center;です。aタグにコードを追加しましょう。

css(追加分のみ記載)

nav a{
  justify-content: center;
}

画面を確認します。

どうでしょうか？これで目的の縦横中央寄せのナビゲーションバーの完成です。お疲れ様でした！

最後に

最後に完成系のコードを載せておきます。説明していない部分としては、もとから当ててあったdisplay: block;を消してあります。理由はdisplay:flex;を後から当てたので、displayプロパティの重複で不要になったからです。

css(完成形)

/* reset */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* main contents */
nav ul{
  display: flex;
  list-style: none;
}
nav ul li{
  width: 100%;
}
nav a{
  text-decoration: none;
  background-color: #d2691e;
  color: #ffffff; 
  text-align: center;
  padding: 10px 5px;
  /* 不要になったので削除↓ */
  /* display: block; */
  /* メニューの高さを揃える */
  height: 100%;
  /* 各メニューのborderデザイン */
  border-width: 10px;
  border-color: #ff964b #b44b00 #783200 #ffc8a0;
  border-style: solid;
  /* テキストを上下左右中央に配置する */
  display: flex;
  align-items: center;
  justify-content: center;
}

以上です。最後までご静聴ありがとうございました。

１．top:0を忘れがち

a.css

position: -webkit-sticky;
position: sticky;
top: 0;

２．background-colorを指定しないことでcontentが上を通っているように見えるので
background-colorを指定することを忘れない。

a.css

background-color: red

1. たまにそれでもstickeyの上を通る時があるのでそういう時はz-index

a.css

z-index: 99

VScodeショートカットキー紹介

VScodeでコーディングに全集中できるショートカットキーを紹介します！！

Zenモード

command + K を押して、間を開けてからZを押すとコードの画面のみにできます！

通常の画面に戻すときも上記と同じです。

?VScodeショートカットキー紹介

✨Zenモード

コーディングに全集中したい時は、

『cmd + K』 を押してから 、間を空けて、『Z』を押すとコードの画面のみで作業できます?戻す時も同じです。

参考：https://t.co/hvd5jWFQsJ#プログラミング初心者 pic.twitter.com/9ZAF68n3Qg

— ミキ?@プログラミング (@mikiprogram) November 18, 2020

参考

• ムーザルチャンネル：VSCode 便利テクニックの紹介 作業効率100倍?を目指す

はじめに

こんにちは。
11月より未経験からのエンジニア転職を目指すべく、プログラミング学習をスタートし始めたものです。
学習記録を残していければと思っております。

自己紹介

地方国立大学卒業後、大手学習塾に新卒で就職して約1年半経ちます。
理想と仕事内容のギャップで転職を決意しました。

高校はかなり勉強には力を入れた記憶があります。
が第一志望には受からず...。

プログラミング自体は、大学の講義でおそらくC言語は軽く触れましたが
難しすぎて断念しました（笑）

ただ「学力の規定要因分析―都道府県別のクロスセクションデータを用いて―」というテーマで卒業論文を制作し
このときにＲ言語を使用して、統計分析などを行いました。
1日のほとんどを分析や分析結果の執筆に費やしていた時期で大変でしたが、楽しかったですね。

ですので今Progateを中心に学習を進めておりますが、まだ勉強が嫌という感じではないです。
多分ここから大変になってくるのだと思いますが...。

ここまでの学習記録

11月の初週からまずはProgateを中心に学習をスタートしました。
最初はスマホ版でやっていましたが、パソコンでやってみたいと思い、先述の卒論制作に使っていたパソコンを使ってProgateに取り組んでおります。
ひとまず19日現在でHTML&CSS,Sass,Command Line,Git,Rubyを一周終わらして、Web開発パスのruby on railsコースのrails Ⅰに取り組んでいる最中です。

最後に

逃げ道の無いよう、新型Mac Book Airを購入致しました。今使っているパソコンが動作モッサリしていてイライラなのとWindowsだからですね。
学習していく中での気づきや、学習記録を定期的に更新していけたらと思いますので、よろしくお願いいたします。

はじめに

個人的にかわいいと思うCSSのfont-familyの日本語のランキングを発表します！
自作のwebサイトを作るにあたって文字をかわいくしたかったため調べてみました。

font-familyとは

• フォントを指定するプロパティのこと。
• 指定したフォントはブラウザが動作している環境にインストールされているものが使用されるため、指定したフォントが必ず使用できるとは限らない。
• フォントは複数指定することができる。フォントを複数指定した場合、ユーザ環境に存在するフォントが適用される。その際、前方にあるフォントが優先される。

記述例

HTMLファイル

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="sample.css" type="text/css">
  </head>
  <body>
    <p class="sample">ここに文章を表示</p>
  </body>
</html>

CSSファイル (ファイル名：sample.css)

.sample { 
     font-family: -apple-system, "Segoe UI", "Helvetica Neue", "Hiragino Kaku Gothic ProN", メイリオ, meiryo, sans-serif;
}

※Qiitaではこのようなfont-familyが設定されていました。

かわいいランキング

1位　Hannotate SC

特徴：こちらが１位に輝きました！！手書きで書いたかのような文字がゆるくてかわいいです！
　　　かわいくありつつもちょっと味のあるWebページにしたい時に使えそう

2位　TsukuARdGothic-Regular

特徴：文字の角がなくへにゃって感じが特徴。文字に少し癖のある感じがかわいいです！
　　　シンプルな感じのWebサイトに使えそう

3位　HanziPen SC

特徴：THE手書きって感じの文字です。中学生の時とかこんな感じの字を書いている子がいたような気がします
　　　手書き風にしたい！！というWebサイトに使えそう

4位　ヒラギノ丸ゴ Pro

特徴：とにかく文字が丸っこくて角なんてひとつも存在しません！
　　　ポップな感じのWebサイトに使えそう

5位　Wawati SC

特徴：ちょっと癖のあるポップな感じの文字です。「こ」の下の部分の曲がり具合の感じの癖がかわいいですね！
　　こちらもポップな感じのWebサイトに使えそう

※いずれもOS：Mac、ブラウザ：Chromeでは動作することは確認できています。

まとめ

個人的には丸っこい文字が好きなのでこのようなランキングになりました！！
ブラウザやOSの違いによっては読み込めない可能性もありますが、かわいい文字の参考にしてみてください！

参考サイト

https://saruwakakun.com/font-family

【CSS】グラデーションを使った感触を記録（基本と線形）
【CSS】グラデーションを使った感触を記録2（放射と扇形）
【CSS】グラデーションを使った感触を記録3（反復と合成）

放射グラデーション

放射グラデーションは線形グラデーションと似ていますが、中心点から放射状に広がる点が異なります。中心点をどこに置くかは決めることができます。円形や楕円形を作成することもできます。

radial-gradient([option, ]color1, color2)

option = [[(circle) ][(size) ][at (central point)], ]

中心点の指定[at (central point)]

既定はat center centerまたはat 50% 50%

参考画像を載せておきます。白点が中心点です。

box1-default

.box1 {
    background:
        radial-gradient(white 2px, navy 2px, skyblue, navy);
}

キーワード

top/bottom/left/right/centerを組み合わせ、９箇所指定

at top	at top	at top right
at left	既定	at right
at bottom left	at bottom	at bottom right

数値（%値、px値）

左上at top leftを(0, 0)座標とし、数値を増やすと右下at bottom rightへ向かう。

グラデーションサイズの指定[(size) ]

始点は中心点固定ですが、グラデーションの終点をどこに設定するかのオプションです。
4種類用意されています。

	終点
closest-corner	中心点から最も近い角
farthest-corner	中心点から最も遠い角　既定
closest-side	中心点から最も近い辺
farthest-side	中心点から最も遠い辺

画像で見たほうが理解しやすいと思います。
白線は始点と終点で結ばれた線で、この線上のグラデーションを指定してます。
終点を超える範囲は終点の色で埋めます。

closest-sideの時に、中心点がボックスの端（0%/100%）上に指定されているとグラデーションは生じず終点の色で埋められます。

形状[(circle) ]

楕円・正円を指定します。

ellipse	楕円　既定
circle	正円

既定は楕円ですが、ボックスが正方形且つ中心点が対角線上の時は正円が描かれます。
この事から、ボックスの形状と中心点の位置が楕円の形状に影響する事が分ります。

画像を見てもらえばわかりやすいと思います。

一枚目は中心点の指定の参考画像と同じです。（グラデーション部分は全て同じ）
右二つが対角線から外れているのでやや楕円になっています。

ここにボックスを縦に伸ばした画像も載せます。（設定は全て同じ）
正円だったものでも、楕円になっています。

circleを指定することで、常に正円を保ち続けます。

.box {
    background:
        radial-gradient(circle at 60% 25%, white 2px, navy 2px, skyblue, navy);
}

扇形グラデーション

(中心から広がるのではなく) 中心点の周りを回りながら色が変化するグラデーションから成る画像を生成します。

中心点を置き、基準線の角度を決めて、その線を始点に扇を開くように時計回りに360度展開します。

conic-gradient([option, ]color1, color2)

option = [[from (angle) ][at (central point)], ]

中心点の指定[at (central point)]

放射グラデーションと同じです。

基準線の角度[from (angle) ]

中心点から、基準となる線を引く角度を決めます。
既定は0degで、真上に線を引きます。

色経由点の配置

px値での指定が不可、[0-360]degによる角度の指定となります。
基準線から傾いた角度を指定します。

.box3 {
    background:
        conic-gradient(from 180deg, white, navy 90deg, khaki);
}

参考サイト

CSS グラデーションの使用 - CSS: カスケーディングスタイルシート | MDN

環境

Mac OS

やりたいこと

Sassで擬似要素を使いたい

やったこと

::afterの前に&をつけた

.body {
  position: relative;
  width: 80%;
  margin: 90px auto;
  text-align: center;
  &::after{
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    bottom: 0;
    background-color: black;
  }
}

要素の下側に線を引きたかったのでこのような記述にしました
クラス名のところを＆に変えるだけで良いんですね?

aタグを使ってリンクボタンを作る時に気をつけたいところを書いておきます。
たまーに、このようにボタンになっているのに文字部分だけしかリンクとして機能していないボタンを見ることがあります。

See the Pen buttonNG by TakahiroOkada (@okalog) on CodePen.

MOREにカーソルを当てると、リンク先に飛ぶようになっています。
問題ないと言えば問題ないのかもしれませんが、ユーザーは青色の範囲もリンクとして機能していると期待しているはずですよね。

なので、ボタン全体をリンクボタンとして機能させるためにはこのように書いてあげましょう。

See the Pen qBNGWmG by TakahiroOkada (@okalog) on CodePen.

と書きながらも実はこれが最適解なのかわかっていなかったり。
もっと良い書き方あれば教えて頂きたいです。