本日の学習範囲

ドットインストール

・はじめてのCSS #05〜#07
（学習時間：1時間）

CSS学習メモ

background-colorプロパティ

背景色を指定する

ボックス

要素によって生成される領域
内から順に、content・padding・border・marginで成り立っている

content

widthプロパティとheightプロパティで指定する領域、要素内容が表示される

padding

paddingプロパティで指定する内側余白、背景が適用される

border

borderプロパティで指定する境界線、太さ・線種・色を指定できる

margin

marginプロパティで指定する外側余白

marginプロパティ

{margin-top: 幅;
margin-right: 幅;
margin-bottom: 幅;
margin-left: 幅;}
ボックスのマージンの幅を指定する
{margin: 上の幅 右の幅 下の幅 左の幅;}と記述することも可能
全て同じ値の場合は、{margin: 幅;}と記述できる

divタグ(HTML)

<div></div>
ひとかたまりの範囲として定義する

class属性(HTML)

<div class="class名">
要素に分類名を指定する

classセレクタ

.クラス名 {}
特定のclass名がつけられた要素にスタイルを適用する

auto

ユーザーエージェントによって自動的に算出される値
autoが適用されたプロパティ毎に効果は異なる
marginプロパティにおけるautoは、ブラウザが適切なマージンを選択する
{margin-right: auto;
margin-left: auto;
の場合、左右中央揃えになる

ユーザーエージェント

サイトにアクセスした際に送る、OSやブラウザ、機種などの情報

Vueバージョン確認

npm list vue

まずは上記コマンドでバージョンの確認

twinzlabo@0.1.0 /Users/twinzlabo

── vue@2.6.11

BootstrapVueの導入

BootstrapVueの導入がまだの方のために念のため導入方法書いときますね

とりあえずコピペして環境を整えてください

main.js

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

npm install vue bootstrap-vue bootstrap

以上でBootstrapVueの導入は完了です

では次はお待ちかねの実装です！

hoverすると画像が１００倍強調される超動きのある画像一覧をコピペだけで作成

すでに上の方で確認してもらったかと思いますが、

何の変哲もないBootstrapVueのイメージコンポーネントにスタイル修正を行うことで

そのうちの１つの画像をhoverすると他の画像が透過し選択したイメージだけが宙に浮いたように超強調される

超クールなアニメーション実装をしていきましょう

デフォルトの上のイメージコンポーネントをhoverしたら下の画像のように

hoverした画像だけが浮いているように強調されます

この感じプロが作ったようにクールですよね

でもこれがコピペだけで作れるんです

実装してみたら感動すること間違いなしです！

では早速コードをコピペしていきましょう

<template>
  <div class="do-animation pic-background">
    <div class="pic">
      <b-img src="https://source.unsplash.com/1000x800" fluid alt="Fluid image"></b-img>
    </div>
    <div class="pic">
      <b-img src="https://source.unsplash.com/1000x801" fluid alt="Fluid image"></b-img>
    </div>
    <div class="pic">
      <b-img src="https://source.unsplash.com/1000x802" fluid alt="Fluid image"></b-img>
    </div>
    <div class="pic">
      <b-img src="https://source.unsplash.com/1000x803" fluid alt="Fluid image"></b-img>
    </div>
    <div class="pic">
      <b-img src="https://source.unsplash.com/1000x804" fluid alt="Fluid image"></b-img>
    </div>
    <div class="pic">
      <b-img src="https://source.unsplash.com/1000x805" fluid alt="Fluid image"></b-img>
    </div>
  </div>
</template>

<style>
.do-animation {
  visibility: hidden;
}

.do-animation > * {
  visibility: visible;
}

.do-animation > * {
  transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms;
}

.do-animation:hover > * {
  opacity: 0.4; transform: scale(0.9);
}

.do-animation > *:hover {
  opacity: 1; transform: scale(1); transition-delay: 0ms, 0ms;
}

.pic-background{
  align-items:center;
  justify-content:center;
  margin-left: 55px;
  margin-top: 100px;
  width:100%;
}

.pic img {
  width:100%;
  height: 100%;
}

.pic{
  float: left;
  margin:0%;
  background:white;
  width:29%;
  height:250px;
  border:1px solid #d6d6d6;
  box-shadow:0 2px 3px 0px rgba(0,0,0,0.25);
  transition:.2s all;
}
</style>

いかがでしたでしょうか？

BootstrapVueのイメージコンポーネントにスタイル修正を行うことで

そのうちの１つの画像をhoverすると他の画像が透過し選択したイメージだけが宙に浮いたように超強調される

超クールなアニメーション実装ができましたか？

あんなに個性のカケラも感じなかったBootstrapVueのイメージコンポーネントが

いとも簡単にプロが作ったようなデザインに一変しちゃいましたね！(自画自賛)

こういうの実装できるとめっちゃ興奮しますよね

こちらに他にも面白いアニメーション実装記事があるので参考までに

下の記事ではより応用的で面白いCSSアニメーションの作成方法を掲載しているので是非挑戦してみてください

以上です

より応用的で面白いCSSアニメーションの作成方法学びたい方にはこちらの記事がおすすめです
現役フロントエンドエンジニアがおすすめするコピペで使えるアニメーション記事まとめ１２選

以下に注意して修正する

top → 上
bottom → 下のこと

padding→中身だけ動かしたい
margin→背景ごと動かす

margin: 0 auto; [左右]に対して中央に配置

ショートハンド指定
padding: ○px; 四方向共通
padding: ○px ○px; 上下　左右
padding: ○px ○px ○px; 上　左右　下
padding: ○px ○px ○px ○px; 上　右　下　左

計算する番
width : calc(100% - 20px) ;

< ブロックの位置指定を固定するために！>
絶対位置指定の仕方

position: absolute;で
スタート位置を指定。

position: relative;を親に記載すれば
親基準のスタート位置となる。

◆以下をCSSに記載

※子要素に追加
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin:auto;

※親腰輿に追加
position: relative;

ヘッダー

ヘッダーは上部に固定することが多い
その際には、下記をセットで記述する。

css

.header {
  position: fixed;
  width: 100%;
}

.header{
height: 60px;
width: 100%;
position: fixed; 
  z-index: 1;
}

・上部に固定
・横幅は画面いっぱい
・重なりの順序を一番手前に

上記と合わせて、コンテンツにて
下記を記載して回り込みを防ぐ。

padding-top: 60px;

※高さはヘッダーと同じに

フッター

最下層に絶対位置固定

css

position: absolute;
bottom: 0;

表題の通りです。

class名の先頭にハイフンはひとつまで。
マルチクラスでハイフン2つ指定すると、モダンブラウザでは指定どおり表示されますが、
IEでは無効なので、ご注意ください。

NG class名?

先頭にハイフン2つですと、IEでCSSが効きません。

css

<div class="hoge --fuga">

OK class名??‍♂️

先頭にアンダースコア（_）、ハイフン1つ（-）ですとIEでバッチリCSSが効きます。

css

<div class="hoge -fuga">

<div class="hoge _fuga">

CSS仕様について

W3CによるとIEの動作の方が正しいようでした。知らなかったです。

識別子は、数字、2つのハイフン、ハイフンの直後の数字で開始できない。

構文と基本データ型
https://momdo.github.io/css2/syndata.html#value-def-identifier

css

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  float: left;
  padding-right: 10px;
}

※ポイント※

①「margin: 0;」「padding: 0;」は
　ul がデフォルトで持っている幅を消すためのもの。

②「padding-right: 10px;」は文字間に幅をもたせる。

③「 list-style: none;」で黒点を消す！

こちらの記事に記載のコードは全て自由に使っていただいて大丈夫なので
どんどんあなたのプロジェクトに取り込んでより充実したデザインにしてください
＊動きだけ確認したい初学者の方はJSFiddle使ってみるといいですよ

それでは早速コピペで使えるCSSアニメーションの紹介をしていきましょう！
(ランキング形式ではありません)

---

１　hoverすると画像が１００倍強調される超動きのある画像一覧をコピペだけで作成

２　ダサいイメージコンポーネントでプロのような画像一覧を作成する方法

３　まるで車窓のような画像一覧にhoverのCSSアニメーションをつけてみる

４　個性のないBootstrapVueカードコンポーネントにクールなhoverアニメーションを実装

５　ナビゲーションバーをhoverすると他のタブがぼやけるアニメーション実装

６　hoverで動きのあるオシャレな画像一覧をBootstrapVueイメージコンポーネントの応用で実装

７　画像をhoverすると全体像がスーッと現れるアニメーション実装

８　画像をhoverすると背景が段階的に上から降ってきて文字を表示する実装

９　画像をhoverするとその画像がスーッと拡大されるアニメーションをコピペだけで実装

１０　画像をhoverすると右から階段のようにスーッと背景と文字が現れる実装をコピペだけ

１１　画像をhoverすると自動ドアのようにスーッと背景＋descriptionが現れるCSSアニメーション実装

１２　白黒画像をhoverすると色鮮やかな画像に変化するクールなアニメーション実装

---

いかがでしたか？
プロジェクトで使えるかは置いといても結構楽しんでもらえたかと思います

以上です

はじめに

スマホ用ページなどでよく利用される、「ハンバーガーメニュー」をCSSのみで実装して見ます。
あくまで機能面の実装を目的としているので、デザイン面でのCSSは省略しています。

基本のHTML構造

<header class="header">
  <h1><a href="index.html">TITLE</a></h1>
  <div class="menu-trigger">
    開く
  </div>
  <nav id="top-nav" class="nav-menu">
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </nav>
</header>

ハンバーガーメニューの実装イメージ

「開く」ボタンと「閉じる」ボタンを押すことでメニューの開閉をする簡単な構造になります。

titleとmenuを両端に配置

.header{
  display: flex;
  justify-content: space-between;
}

flexboxを使って、左右両端に配置します。

nav-menuを右上に固定

.header{
  position: relative;
}
.nav-menu{
  position: absolute;
  top: 0;
  right: 0;
}

position：absoluteを使って位置を固定しています。
その際、基準となるheaderにposition: relativeを設定します。

メニュー開閉の仕組みを作る

メニュー開閉の仕組みは、ｃｓｓのtarget属性にて実装します。

<header class="header">
  <h1><a href="index.html">TITLE</a></h1>
  <div class="menu-trigger">
    <a href="#top-nav">開く</a>
  </div>
  <nav id="top-nav" class="nav-menu">
    <a href="#!" class="menu-close">閉じる</a>
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </nav>
</header>

aタブを用いて、対象のid属性を指定しています。
閉じるボタンの href="#!" は、ターゲットを外す目的で指定しています。

.nav-menu:not(:target){
}
.nav-menu:target{
}

非表示のスタイルを　:not(:target)
表示スタイルを　:target に記述します。

nav-menuを非表示にする

.nav-menu:not(:target){
  opacity: 0;
  visibility: hidden;
}

opacityで透明度を０に、visibility: hiddenで非表示にしています。

メニュー表示時、nav-menuを表示させる

.nav-menu:target{
  opacity: 1;
  visibility: visible;
}

opacityで透明度を1に、visibility: visibleで表示しています。

開閉時のフェードイン・アウト

.nav-menu:not(:target){
  transition: 1s;
}
.nav-menu:target{
  transition: 1s;
}

transitionでプロパティ変化の時間を指定しています。

閉じるボタンを右上に固定する

.menu-close{
  position: absolute;
  top: 0;
  right: 0;
}

position：absoluteを使って位置を固定しています。

各要素の重なり具合を調整する

下から

• header(body)
• menu-trigger
• nav-menu

の順番で重なるようにz-indexを指定していきます

.menu-trigger{
  position: relative;
  z-index: 2;
}
.nav-menu{
  z-index: 3;
  background: white;
}

z-indexは、positionプロパティが設定されていないと適応されないため、position: relativeを追記しています。
nav-menuは、menu-triggerを隠すため、背景色をつけています。

ここまでのまとめ

<header class="header">
  <h1><a href="index.html">TITLE</a></h1>
  <div class="menu-trigger">
    <a href="#top-nav">開く</a>
  </div>
  <nav id="top-nav" class="nav-menu">
    <a href="#!" class="menu-close">閉じる</a>
    <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">CONTACT</a></li>
    </ul>
  </nav>
</header>

.header{
  display: flex;
  justify-content: space-between;
  position: relative;
}
.nav-menu{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  background: white;
}
.nav-menu:not(:target){
  opacity: 0;
  visibility: hidden;
  transition: 1s;
}
.nav-menu:target{
  opacity: 1;
  visibility: visible;
  transition: 1s;
}
.menu-close{
  position: absolute;
  top: 0;
  right: 0;
}
.menu-trigger{
  position: relative;
  z-index: 2;
}

レスポンシブ対応

PC版とスマホ版でCSSを切り替えます。

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
</head

cssにてメディアクエリを使用するため、headタグにてviewportを読み込みます。

PC版のスタイルは

.header{
  display: flex;
  justify-content: space-between;
  position: relative;
}
.nav-menu{
  display: block;
}
.nav-menu ul{
  display: flex;
  justify-content: space-between;
}
.nav-menu li{
  padding-left: 10px;
}
.menu-close{
  display: none;
}
.menu-trigger{
  display: none;
}

で作られているものとして話を進めます。

メディアクエリの実装

PCとスマホのCSSで異なる点を記述してみます。

-- 共通 --
.header{
  display: flex;
  justify-content: space-between;
  position: relative;
}

.nav-menu{
-- PC --
  display: block;
-- スマホ --
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  background: white;
}

-- PC --
.nav-menu ul{
  display: flex;
  justify-content: space-between;
}
.nav-menu li{
  padding-left: 10px;
}

-- スマホ --
.nav-menu:not(:target){
  opacity: 0;
  visibility: hidden;
  transition: 1s;
}
.nav-menu:target{
  opacity: 1;
  visibility: visible;
  transition: 1s;
}


.menu-close{
-- PC --
  display: none;
-- スマホ --
  position: absolute;
  top: 0;
  right: 0;
}


.menu-trigger{
-- PC --
  display: none;
-- スマホ --
  position: relative;
  z-index: 2;
}

今回はスマホ版をデフォルトとし、PC版をメディアクエリで変更していきます。

.header{
  display: flex;
  justify-content: space-between;
  position: relative;
}

.nav-menu{
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  background: white;
}
@media screen and (min-width: 1000px){
.nav-menu{
  display: block;
}
}

@media screen and (min-width: 1000px){
.nav-menu ul{
  display: flex;
  justify-content: space-between;
}
}

@media screen and (min-width: 1000px){
.nav-menu li{
  padding-left: 10px;
}
}

@media screen and (max-width: 1000px){
.nav-menu:not(:target){
  opacity: 0;
  visibility: hidden;
  transition: 1s;
}
}
@media screen and (max-width: 1000px){
.nav-menu:target{
  opacity: 1;
  visibility: visible;
  transition: 1s;
}
}


.menu-close{
  position: absolute;
  top: 0;
  right: 0;
}
@media screen and (min-width: 1000px){
.menu-close{
  display: none;
}
}

.menu-trigger{
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 1000px){
.menu-trigger{
  display: none;
}
}

ｐｃ版のスタイルに対して、@media screen and (min-width: 1000px)にてCSSを変更しています。

.nav-menu:not(:target), .nav-menu:target に関してはスマホ版のみのスタイルなので、@media screen and (max-width: 1000px) にて指定してあります。

以上にてレスポンシブ対応が完了しました。
ブレークポイントを増やす場合は、適宜追加してください。

はじめに

Railsでフォントを自由に変えたいのにどうしたら良いか良くわからないという人のために、簡単な設定方法をメモしておきます。
　かつて自分も少し苦戦しまして、というのも調べてもいろいろ情報が出てきて、「もっとわかりやすい記事ないんかー怒」となったので、特に初心者の方の一助になれば幸いです。

実装の流れ

簡単に流れだけ説明しておくと、
① Google FontsのWebページから使いたいフォントを探す
② インポートするURLとCSSに記述するプロパティをコピーする
③ コピーしたものをscssファイルに貼り付ける
みたいな流れになります。
一言で言えば探してコピペです。とっても簡単ですね

ではイメージを使って説明していきます

Google Fontsのページ

検索すればすぐ出てきますが、一応URLを以下に載せておきます。
https://fonts.google.com/

ここにアクセスして使いたいフォントを探してそのページに飛びます。
種類はかなり多いですが、日本語対応のものは少ししかありません。
キーワード検索やカテゴリー検索など探し方はいろいろ試してみると良いでしょう！
（ちなみに検索フォーム横のAlmost〜の部分はフォームになっていて、文字入力するとその文字のプレビューが表示されるようになっています。）

Google fontsのページ

今回は少しわかりやすいように「Kosugi Maru」というフォントを使おうと思います。
一覧から詳細ページにアクセスするとこんな感じです。（以下）

Google Fonts 詳細ページ

StylesとGlaphsの間にあるAlmost〜の部分の右側に青字で「＋ Select this style」とあるかと思いますのでそこをクリック
すると以下のようにサイドメニューが現れます

この中のEmbedタブをクリックし、中の＠import（青字）をクリックします。

そしたら使うのはグレーの背景の部分２つです。
＠import〜;まで（styleタグの中身）とfont-family〜;までをコピーしておきます。

ちなみにこのフォントではデフォルトのfont weightが400のものしか選べませんが、他のフォントではいろいろ選べたりします。（以下）

デフォルトで使用したい太さのフォントを選んで同じようにコピーすればOKです。

コーディング

それではcssファイルに記述していきましょう！
先ほどコピーしたものを貼り付けるだけです。

application.scss

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

使いたいscssファイル

セレクタ {
  font-family: 'Kosugi Maru', sans-serif;
}

実際の使い方としては、アプリ全体のフォントはapplication.scssに* { font-family〜 }と記述し、さらに個別に使いたいフォントがあればその都度cssファイルに書いていけば良いかと思います。
ちなみに＠importはscssファイルじゃないと使えないのでご注意ください。（.cssはNG）

ブラウザで確認

では実際適用されてるか見てみましょう！

ちゃんとフォントが変わってますね。

最後に

いかがでしょうか。
Google Fontsを使えばRailsで手軽にフォントを変更できるのがわかったかと思います。

凝ったフォントを使いたい場合は別のやり方になってしまうと思いますが、このやり方で十分きれいなデザインは可能かと思いますので、是非ご活用くださいませ。

間違いやその他意見ありましたらコメントいただけると幸いです。

tailwindcssとは

css設計などがまだなかった時代によく使われていた手法を使ったフレームワーク。

mb-10 {
margin-bottom: 10px;
}

こういう指定をpx数ごとに設計しておいて、HTMLでclassを付与するだけで必要な箇所に必要な時だけ指定できたもの。

いわゆるUtility FirstなCSS。
公式サイトは以下から。
tailwindcss

プロジェクトフォルダを作成

なんでも良いんですが、とりあえず作業フォルダを作成しましょう。

- tailwind/
    - assets/
        - css/
            - style.css
    - index.html

最低限必要なのは、index.htmlとstyle.css

Node.jsでのインストール

前提として、Node.jsが入っている想定。

% npm init

これでpackage.jsonが作成される。
インストールには、npm使います。yarnでもいけるみたい。

% npm install tailwindcss --save-dev

--save-dev使用でpackage.jsonのdevDependenciesに保存

公式サイト
tailwindcssをインストール

style.cssにtailwindのスタイルをひっぱる準備

以下のようにstyle.cssに記述する

style.css

@tailwind base;

@tailwind components;

@tailwind utilities;

公式サイト
tailwindcssの呼び出し

cssを書き出す（ビルドする）

% npx tailwindcss build assets/css/style.css -o assets/css/output.css

package.jsonに書くのなら

package.json

"scripts": {
    "build": "npx tailwindcss build assets/css/style.css -o assets/css/output.css"
  }

その上で

% npm run build

そうすると、style.cssと同じ階層にoutput.cssが作成される。

あとは、HTMLで好きなようにclassを付与していくだけでスタイルが適用してく。
classのリストなどは公式サイトから。

tailwindcss FontSize

要素ごとにページが分かれているのでリンク貼るにも膨大になります。
とりあえずFontSizeのURL貼っておこうかと。

ちなみに

% npx tailwindcss help build

buildする際のコマンドヘルプはこれで確認。

CDNでも可能、だけど

tailwindcssではCDNからの利用も可能になっています。

index.html

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

ただし

• デフォルトテーマのカスタマイズはできない
• @apply @variantsは利用できない
• Group-hoverを利用することはできない
• サードパーティのプラグインのインストールはできない

と、いろいろと制約がついてしまうので、わかるのならnpmやyarnから利用するのが良いかも。

まとめ

公式サイトみながらインストールしてたんですけど、使いはじめるまでよくわからないことが多かったのでメモに残しておこうと思った次第。

誰かが同じように悩んでいるならぜひ活用してもらえればと思います。

この投稿では見出しタグに連番をふったり、装飾したりして手順をいいかんじに表現する方法を紹介します。

実現したいこと

次のようななんの変哲もないHTMLにスタイルを当てて、

<h1>カレーライスの作り方</h1>

<div class="steps">
  <h2>野菜と肉を切る</h2>
  <p>いい感じの大きさに野菜と肉を切ります。</p>

  <h2>煮込む</h2>
  <p>切った具材を鍋に入れて煮込みます。</p>

  <h2>味付け</h2>
  <p>カレールーなど調味料を入れて完成です。</p>
</div>

下のように各ステップに1,2,3と連番がついた表示になるようにしたいと思います。

見出しに連番をつけたり、装飾したりして「手順」を表現する方法

いきなりですが、完成形のCSSを示します。細かい説明はコード内にコメントで書いてあるのでご覧ください。

.steps {
  /* 連番カウンター名の定義 */
  counter-reset: step-counter;
  /* 縦棒との位置関係に必要 */
  position: relative;
  /* 縦棒と連番のためのスペースを左に確保 */
  padding-left: 2rem; /* 連番(1.5rem) + 余白 */
}

/* 縦棒 */
.steps:before {
  content: "";
  /* 幅と色 */
  background-color: #d59533;
  width: 2px;
  /* 位置 */
  position: absolute;
  top: 0.7rem; /* 円のwidthの半分 */
  left: 0.7rem; /* 円のwidthの半分 */
  height: calc(100% - 0.7rem); /* 100% - top */
  /* 連番より後ろに表示するため */
  z-index: 0;
}

.steps > h2 {
  /* 連番カウンターを+1する */
  counter-increment: step-counter;
  /* 連番カウンターを垂直方向に中央揃えで表示する */
  display: flex;
  align-items: center;
}

/* ①②③など連番 */
.steps > h2:before {
  /* 連番カウンターの値を表示する */
  content: counter(step-counter);
  /* フォントと色 */
  background: #d59533;
  color: white;
  font-size: 0.8rem;
  font-weight: normal;
  /* 文字を中央に表示する */
  line-height: 1.5rem;
  text-align: center;
  /* 円で表示する */
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 1.5rem;
  /* .stepsでmargin-left +2rem したぶん左に戻す */
  position: absolute;
  left: 0;
  /* 縦棒より手前に表示するため */
  z-index: 1;
}

どうやって連番を表示しているか？

連番を表示するためにcounter-reset、counter-increment、content: counter(step-counter)を使っています。

• counter-reset - CSS: カスケーディングスタイルシート | MDN
• counter-increment - CSS: カスケーディングスタイルシート | MDN
• counter() - CSS: カスケーディングスタイルシート | MDN

動作デモ

一応動くデモとしてCodePenを貼っておきます:

See the Pen CSSで見出しに連番をつけたり、装飾したりして「手順」を表現する by suin (@suin) on CodePen.

この投稿では見出しタグに連番をふったり、装飾したりして手順をいいかんじに表現する方法を紹介します。

実現したいこと

次のようななんの変哲もないHTMLにスタイルを当てて、

<h1>カレーライスの作り方</h1>

<div class="steps">
  <h2>野菜と肉を切る</h2>
  <p>いい感じの大きさに野菜と肉を切ります。</p>

  <h2>煮込む</h2>
  <p>切った具材を鍋に入れて煮込みます。</p>

  <h2>味付け</h2>
  <p>カレールーなど調味料を入れて完成です。</p>
</div>

下のように各ステップに1,2,3と連番がついた表示になるようにしたいと思います。

見出しに連番をつけたり、装飾したりして「手順」を表現する方法

いきなりですが、完成形のCSSを示します。細かい説明はコード内にコメントで書いてあるのでご覧ください。

.steps {
  /* 連番カウンター名の定義 */
  counter-reset: step-counter;
  /* 縦棒との位置関係に必要 */
  position: relative;
  /* 縦棒と連番のためのスペースを左に確保 */
  padding-left: 2rem; /* 連番(1.5rem) + 余白 */
}

/* 縦棒 */
.steps:before {
  content: "";
  /* 幅と色 */
  background-color: #d59533;
  width: 2px;
  /* 位置 */
  position: absolute;
  top: 0.7rem; /* 円のwidthの半分 */
  left: 0.7rem; /* 円のwidthの半分 */
  height: calc(100% - 0.7rem); /* 100% - top */
  /* 連番より後ろに表示するため */
  z-index: 0;
}

.steps > h2 {
  /* 連番カウンターを+1する */
  counter-increment: step-counter;
  /* 連番カウンターを垂直方向に中央揃えで表示する */
  display: flex;
  align-items: center;
}

/* ①②③など連番 */
.steps > h2:before {
  /* 連番カウンターの値を表示する */
  content: counter(step-counter);
  /* フォントと色 */
  background: #d59533;
  color: white;
  font-size: 0.8rem;
  font-weight: normal;
  /* 文字を中央に表示する */
  line-height: 1.5rem;
  text-align: center;
  /* 円で表示する */
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 1.5rem;
  /* .stepsでmargin-left +2rem したぶん左に戻す */
  position: absolute;
  left: 0;
  /* 縦棒より手前に表示するため */
  z-index: 1;
}

どうやって連番を表示しているか？

連番を表示するためにcounter-reset、counter-increment、content: counter(step-counter)を使っています。

• counter-reset - CSS: カスケーディングスタイルシート | MDN
• counter-increment - CSS: カスケーディングスタイルシート | MDN
• counter() - CSS: カスケーディングスタイルシート | MDN

動作デモ

一応動くデモとしてCodePenを貼っておきます:

See the Pen CSSで見出しに連番をつけたり、装飾したりして「手順」を表現する by suin (@suin) on CodePen.

---

最後までお読みくださりありがとうございました。Twitterでは、Qiitaに書かない技術ネタなどもツイートしているので、よかったらフォローしてもらえると嬉しいです→Twitter@suin

100日チャレンジの332日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
332日目は、

おはようございます
332日目　2h
・ポートフォリオ作成#早起きチャレンジ#駆け出しエンジニアと繋がりたい#100DaysOfCode

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