どうも7noteです。ボタンをCSSで作るとき、ボタンに付いている矢印（>）の配置で作り方を分ける方がいい話。

WEBサイトを作っていると、ボタンを作成する機会がたくさんあります。
画像で作る時はあまりきにしなくても大丈夫ですが、疑似要素で矢印を配置する際、できるだけレスポンシブサイトでも崩れないボタンを作るための工夫が必要になってきます。

私は矢印の位置によって、作り方を大きく2種類に分けて作っているのでそれぞれの作り方を紹介していきます。

矢印の位置によるボタンの種類の見分け方。

ボタンA

ボタンB

違いは矢印の位置が文字に近いところにあるか、離れたところにあるかの違いですが、考え方としてはこのように考えます。

「矢印の位置はどこに依存しているか」

ボタンAでは、文字の近くに矢印があります。つまり文章の長さが変わっても文字のすぐ右側に矢印がある事が、このボタンの矢印の意図になります。文字によって矢印の位置がかわるので、文字に依存していると言えます。

ボタンBは、文字から離れたところにありますが、違う捉え方をすると右端から一定距離に位置していると言えます。つまりボタンがどんなに長くなろうと右端の位置をキープすることになります。ボタン（の右端）に依存している状態です。

このことから、それぞれボタンAとボタンBでは違う作り方をします。実際にソースを見てみます。

2種類のボタンの作り方

共通html

index.html

<div class="btn">ボタン</div>

ボタンA（文字依存）の作り方

styleA.css

.btn {
  color: #fff;
  width: 100px;
  text-align: center;
  background: #399;
  border-radius: 5px;
  padding: 10px 30px;
}

.btn::after {
  content: ">";
  margin-left: 1em;
}

ボタンB（右端依存）の作り方

styleB.css

.btn {
  color: #fff;
  width: 100px;
  text-align: center;
  background: #399;
  border-radius: 5px;
  padding: 10px 30px;
  position: relative; /* 追記 */
}


/* Aとは違う */
.btn::after {
  content: ">";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

解説

もし、ボタンの長さや文字の量が変わると・・・

ボタンAでは長さが変わっても常に文字の横に矢印があり、
ボタンBでは長さが変わっても常に右端に矢印があると思います。

このようにレスポンシブ化や修正などで文字や横幅が変更になることがあっても、常に意図した位置に矢印を置くことができます。

まとめ

常にデザインの見た目ではなくて意味を理解して作ることが大切です。
私はデザインの構造を見極め、この矢印はスマホ表示になったり、文字が変わったらどこに位置されるべきだろうかと考えてcssを作るようにしています。
ついついボタンAの方がcss書く量少なくて楽だらかといった理由で、デザインの意図とは違う書き方をしないように気を付けたいですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

複数の静的ファイルがブラウザに適用されるまでの仕組みをまとめました。
大まかに言うと、
ブラウザでは認識できる言語が決まっており、どんな言語も認識できる言語に翻訳する必要があります。
この翻訳作業をコンパイルといい、コンパイルできないものは事前に処理をする必要があります。この事前処理はプリコンパイルと呼ばれ、細かい機能1つ1つをモジュールという処理のまとまりにし、コンパイルしてブラウザに返すといった流れです。

前提
プログラミング初学者(2ヶ月)が学んだ内容をまとめたものです。
実際の現場では通用しないことや間違った情報がある可能性があります。
お気づきの方はコメントにてご指摘いただければ幸いです。

ブラウザは認識できる言語が決まっている

ブラウザはHTML,CSS,JavaScript,WebAssemblyという言語のみを認識することができます。
サーバーサイドでどんな記述をしていたとしても、最終的にはこの4つでブラウザに返されています。
これ以外の言語ではブラウザはページを描画することができません。

開発を便利にする言語

ブラウザでは、上記4つだけを認識してくれますが、開発ではより書きやすく読みやすいように設計されたプログラミング言語があります。
このプログラミング言語を高級言語といいます。

高級言語

機械よりも人間が理解しやすいように設計されたプログラミング言語
機械が認識しやすい言語は低級言語と呼ばれます。
高級言語の例
CSS:SCSS、SASS
JavaScript:TypeScript、CoffeeScript

ブラウザが認識できる言語に変換する仕組み

開発に便利な言語をブラウザが認識できるように翻訳する作業をコンパイルといいます。

コンパイル
プログラミング言語を動作する機械が理解できるように翻訳する作業
コンパイルはコンパイラというプログラムによって行われる。
コンパイラで認識できない言語がある場合は予めプリコンパイルしておく必要があります。

プリコンパイル
コンパイラが翻訳できない言語を翻訳できるようにする事前コンパイルのこと
メインとなる処理に対して行う前処理のこと
このプリコンパイルを行うための手法として、アセットパイプラインという仕組みがある。

アセットパイプライン
JavaScriptやCSSなどのアセットと呼ばれる静的ファイルを小さくまとめてくれる機能
アセットパイプラインの処理は、プリコンパイル→連結→圧縮→配置の流れで行われます。
複数の静的ファイルをプリコンパイルして連結したのち、圧縮して軽量化したものをpublicディレクトリに配置して、ブラウザへ渡せるようにします。
プリコンパイルはモジュールバンドラを使って行われます。

モジュールバンドラ
モジュールバンドラはJavaScriptのモジュールの依存関係を考慮しながら管理するツール
モジュールは機能を1つずつ分けて他のファイルから読み込めるようにした処理のまとまりのこと
機能のまとまりをモジュール、この1つ1つの機能が依存関係にある場合にモジュールバンドラはこれらを考慮しながら管理してくれます。
モジュールで管理せず、機能をファイルごとに分割してしまうと、最終的に1つのファイルにまとめるときに不具合が生じるためモジュールパンドラが使われています。

webpack
モジュールバンドラの中で主流なツール
webpackが行うことは大きく４つ
・Entry
依存関係を解決するためにどのファイルを基準（エントリーポイント）とするかを決める。
・Output
エントリーポイントにされ、webpackによってまとめられたファイルをどこへどのような名前で出力（アウトプット）するのか指定する。
・Loaders
JavaScript以外のCSSやHTMLなどのファイルをモジュールに変換する方法を読み込み（ロード）、指定した処理を行う。
・Plugins
圧縮などのファイルをまとめる以外でローダーが実行できないタスクを導入し、拡張（プラグイン）する。

※自分用メモです

①　PC時アイコン＋メニュー スマホ時アイコン＋ドロワーメニュー(left,right,top,bottom４方向対応)

<!--### header -->
<div id="headerWrapper" class="headerWrapper">
    <div class="inner headerFlexWrapper">
        <p class="headerIconWrapper d-block d-lg-none">
            <img class="headerIcon" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt="">
        </p>
        <p id="toggleButtonWrapper" class="toggleButtonWrapper">
            <span class="toggleButton"></span>
            <span class="toggleButton"></span>
            <span class="toggleButton"></span>
        </p>
    </div>
    <nav id="global_nav" class="global_nav inner">
        <p class="headerIconWrapper  d-none d-lg-block">
            <img class="headerIcon" src="http://blog-imgs-61.fc2.com/n/a/n/nanjcamp/20130531171641.jpg" alt="">
        </p>
        <ul class="headrMenu">     
            <li class="headrMenuItem descriptionMd"><a href="#">※トップ</a></li>
            <li class="headrMenuItem descriptionMd"><a href="#">※概要</a></li>
            <li class="headrMenuItem descriptionMd"><a href="#">※特集</a></li>
            <li class="headrMenuItem descriptionMd"><a href="#">※アクセス</a></li>
            <li class="headrMenuItem descriptionMd"><a href="#">※お問い合わせ</a></li>
        </ul>
    </nav>
</div>
<!--End header -->

$header_Height:56px;//headerの高さを指定
$border_Between:false;//true or false
$drower_Menu_Width:300px;//ドロワーメニューwidth設定(px,%)
$drower_Menu_Height:100%;//ドロワーメニューheight設定(px,%,auto)(left,rightのみ有効)
$drower_Menu_Direction:right;//ドロワーメニューの位置設定(left,right,top,bottom)
$drower_Transparent: (primary : false , secondary : 0.9 ,);//透明なドロワーメニューの場合true(スライドなし)


.headerWrapper{
    background-color: cyan;
    height: $header_Height;//headerの高さを調整
    position: fixed;//画面上部で固定する場合
    width: 100%;
}
.headerFlexWrapper{
    display: flex;
    justify-content: space-between;//PC時アイコンとメニューを左右端寄せ
    align-items: center;//高さ中央寄せ
}
.headerIconWrapper{
    width: 56px;
    height: $header_Height;//headerの高さと合わせる
}
.headerIcon{
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.global_nav {
    display: flex;
    justify-content: space-between;

    @include mq('tab_sm'){
        position: fixed;//初期位置を固定
        padding-top: 50px;
        background:#333;
        z-index: 2;//headerを手前に見せる
        transition: all 400ms;//アニメーション設定
        @if map-get($drower_Transparent, 'primary') == true {
            top: 0;//上合わせ
            width: $drower_Menu_Width;
            height: $drower_Menu_Height;
            opacity:0;
        }
        @else if $drower_Menu_Direction == left or $drower_Menu_Direction == right {
            top: 0;//上合わせ
            #{$drower_Menu_Direction}: -$drower_Menu_Width;
            width: $drower_Menu_Width;
            height: $drower_Menu_Height;
        }
        @else if $drower_Menu_Direction == top or $drower_Menu_Direction == bottom {
            #{$drower_Menu_Direction}: -100%;
            width: $drower_Menu_Width;
            height: 100%;//高さは画面いっぱいに
            // right: 0;//右側から出したい場合
        }
        &.open{
            #{$drower_Menu_Direction}:0px;
            transition: all 400ms;//アニメーション設定
            overflow: auto;
            @if map-get($drower_Transparent, 'primary') == true {
                opacity:map-get($drower_Transparent, 'secondary');
            }
        }
    }
    @include mq('sp_lg'){
        position: fixed;//初期位置を固定
        padding-top: 50px;
        background:#333;
        z-index: 2;//headerを手前に見せる
        transition: all 400ms;//アニメーション設定
    @if map-get($drower_Transparent, 'primary') == true {
        top: 0;//上合わせ
        width: $drower_Menu_Width;
        height: $drower_Menu_Height;
        opacity:0;
    }
    @else if $drower_Menu_Direction == left or $drower_Menu_Direction == right {
        top: 0;//上合わせ
        #{$drower_Menu_Direction}: -$drower_Menu_Width;
        width: $drower_Menu_Width;
        height: $drower_Menu_Height;
    }
    @else if $drower_Menu_Direction == top or $drower_Menu_Direction == bottom {
        #{$drower_Menu_Direction}: -100%;
        width: $drower_Menu_Width;
        height: 100%;//高さは画面いっぱいに
        // right: 0;//右側から出したい場合
    }
    &.open{
        #{$drower_Menu_Direction}:0px;
        transition: all 400ms;//アニメーション設定
        overflow: auto;
        @if map-get($drower_Transparent, 'primary') == true {
            opacity:map-get($drower_Transparent, 'secondary');
        }
    }
}
    @include mq('sp_sm'){
    position: fixed;//初期位置を固定
    padding-top: 50px;
    background:#333;
    z-index: 2;//headerを手前に見せる
    transition: all 400ms;//アニメーション設定
    @if map-get($drower_Transparent, 'primary') == true {
        top: 0;//上合わせ
        width: $drower_Menu_Width;
        height: $drower_Menu_Height;
        opacity:0;
    }
    @else if $drower_Menu_Direction == left or $drower_Menu_Direction == right {
        top: 0;//上合わせ
        #{$drower_Menu_Direction}: -$drower_Menu_Width;
        width: $drower_Menu_Width;
        height: $drower_Menu_Height;
    }
    @else if $drower_Menu_Direction == top or $drower_Menu_Direction == bottom {
        #{$drower_Menu_Direction}: -100%;
        width: $drower_Menu_Width;
        height: 100%;//高さは画面いっぱいに
        // right: 0;//右側から出したい場合
    }
    &.open{
        #{$drower_Menu_Direction}:0px;
        transition: all 400ms;//アニメーション設定
        overflow: auto;
        @if map-get($drower_Transparent, 'primary') == true {
            opacity:map-get($drower_Transparent, 'secondary');
        }
    }
}
}
.headrMenu{
    display: flex;
    justify-content: flex-end;//PC時右よせ
    @include mq('tab_sm'){
        display:block;//タブレット以下flex解除
        width: 100%;
    }
    @include mq('sp_lg'){
        display:block;
        width: 100%;
    }
    @include mq('sp_sm'){
        display:block;
        width: 100%;
    }
}
.headrMenuItem{
    padding: 20px 28px;
    @if $border_Between == true {
        @include mq('pc'){
            border-left:1px solid black;
            &:last-of-type{
                border-right: 1px solid black;
            }
        }
        @include mq('tab_lg'){
            border-left:1px solid black;
            &:last-of-type{
                border-right: 1px solid black;
            }
        }
    }
    @include mq('tab_sm'){
        display:block;//タブレット以下縦1列（ドロワーメニューの中）
    }
    @include mq('sp_lg'){
        display:block;
    }
    @include mq('sp_sm'){
        display:block;
    }
}
.headrMenuItem a{
    text-decoration: none;
    color: #333;
    @include mq('tab_sm'){
        color: #ddd;
    }
    @include mq('sp_lg'){
        color: #ddd;
    }
    @include mq('sp_sm'){
        color: #ddd;
    }
}

/* /////////// */
/* ###【トグルボタンのスタイル】 */
/* /////////// */
.toggleButtonWrapper{
    display: none;
    @include mq('tab_sm'){
        display: block;
        width: 30px;
        height: 24px;
        z-index: 3;
        cursor: pointer;
        transition: all 400ms;//アニメーション設定
    }
    @include mq('sp_lg'){
        display: block;
        width: 30px;
        height: 24px;
        z-index: 3;
        cursor: pointer;
        transition: all 400ms;//アニメーション設定
    }
    @include mq('sp_sm'){
        display: block;
        width: 30px;
        height: 24px;
        z-index: 3;
        cursor: pointer;
        transition: all 400ms;//アニメーション設定
    }
}
.toggleButton{
    position: absolute;//どんなにスクロールしても位置固定
    width: 30px;
    height: 2px;
    background: #666;
    border-radius: 10px;
    transition: all 400ms;//アニメーション設定
    &:nth-of-type(1){
        top: 20px;//個別で調整可能
    }
    &:nth-of-type(2){
        top: 30px;//個別で調整可能
    }
    &:nth-of-type(3){
        top: 40px;//個別で調整可能
    }
    &.open{
        background: #fff;
        transition: all 400ms;//アニメーション設定
        &:nth-of-type(1){
            top: 20px;//個別で調整可能
            transform:translateY(10px) rotate(45deg);
        }
        &:nth-of-type(2){
            display: none;
        }
        &:nth-of-type(3){
            top: 40px;//個別で調整可能
            transform:translateY(-10px) rotate(-45deg);
        }
    }
}
/* /////////// */
/* End【トグルボタンのスタイル】 */
/* /////////// */

$(function(){
    $("#toggleButtonWrapper").on('click', function(){
    if($(this).hasClass("open")) {
        //閉じる
        $(this).removeClass("open");
        $("#global_nav").removeClass("open");
        $(".toggleButton").removeClass("open");
    } else {
        //開ける
        $(this).addClass("open");
        $("#global_nav").addClass("open");
        $(".toggleButton").addClass("open");
        }
    });
});

Picupstreamの重要な部分

CSSの優先順位

「.content p」のタイプセレスター＋クラスセレクターと「.deco」のタイプセレクターでは、タイプセレクター＋クラスセレクターの方が優先順位が高いので、下記画像のように「.content p」の「margin-bottom: 20px;」が適用されてしまいます。
そこで「.content .deco」のように、クラスセレクター＋クラスセレクターにすると、「.content .deco」の「「margin-bottom: 40px;」が適用されます。

参考：CSSの優先順位

<div class="content">
<p>こうした植物は「海浜植物」と呼ばれ、</p>
<p class="deco">ところどころに顔を出す緑色の小さな葉っぱは、おもしろいですよ。 。</p>

.content p{
line-height: 1.5;
margin-bottom: 20px;
}

.content .deco{/*.decoだとmargin-bottomが効かない*/
margin-bottom: 40px;
}

ショートハンドの注意点

.category a:hover{background: #def;}と書いてしまうと、{background: url(../img/xxx.png);}も反映されてしまうので、注意しましょう。

.containerとbackground-color

初めてのプログラミングの重要な部分

名前を変えて保存でprofile.htmlを保存

ヘッダーとフッター、ナビゲーションが共通の「profile.html」を作るために、「index.html」から名前を変えて保存して、「index.html」のクローン「profile.html」を作ります。

スマートフォンサイトの重要な部分

max-width

ブロック要素を可変にします。（％）

max-widthを指定すると、画像を無理に引き伸ばすことがなくなります。

font-awesome

font-awesomeとは、ウェブサイトでアイコンを表示できるようにしてくれるサービスです。

以下の記述を追加すると、barボタンのアイコンが使えるようになります。

<!--headに記述-->
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"><!--VerUPされると「v5.6.3」が変わる-->
</head>

<!--button-->
<div class="btn"><i class="fas fa-bars fa-lg"></i></div>

display

「display」はプロパティの1つで、要素の表示形式を決めるものです。値に「none」を入れてあげると、そのセレクタが何も表示されなくなります。

position/cover

coverとは、要素を埋めるという意味で、縦に合わせて伸張し、領域を埋め尽くすように表示されています。
なので、「left top」とかの後に「/cover」を入れると、背景画像が伸びたり縮んだりします。

// PC
.pop-float-button{
    animation: pop-animation 1.4s;
    animation-delay: 1s;
    animation-timing-function: ease-in;
}
@keyframes pop-animation {
    0%,100% {bottom: 100px;}
    30% {bottom: 115px; }
    50% {bottom: 100px; }
    80% {bottom: 108px; }
}

// SP
.float-button-sp{
    animation: pop-animation-sp 1.4s;
}
@keyframes pop-animation-sp {
    0%,100% {bottom: 30px;}
    30% {bottom: 40px; }
    50% {bottom: 30px; }
    78% {bottom: 35px; }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SiteName</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div class="header">
      <div class="header-logo">SiteName</div>
      <ul>
        <li>何を勉強すべきか</li>
        <li>HTML何もわからん人へ</li>
        <li>CSSも何もわからん人へ</li>
      </ul>
    </div>
  </body>
</html>

@charset "UTF-8";

.header {
  width: 100%;
  height: 90px;
  background-color: #00FF00;
  color: #fff;
}

.header-logo {
 font-size: 36px;
 float: left;
 padding: 20px 40px;
}

.header li{
 float: left;
 padding: 33px 20px;
 list-style: none;
}

できたもの

https://github.com/aki0207/header

こちらを参考にさせていただきました。
Progate

環境
初書：2020/09/08

タイトルの付け方が適当な気がしてならないが、いいのが思いつかなかった

前提

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0">

viewportでdevice-widthを使用していて、cssで@media screen and (max-width: 600px)のような感じでレスポンシブウェブデザインに対応させている場合

javascriptで動的変更する

…ことが出来る。しかも一行で

document.getElementsByName("viewport")[0].setAttribute('content','width=1080, initial-scale=1.0,minimum-scale=1.0');

document.getElementsByName("viewport")で、metaタグを取得する事が可能なのでsetAttributeでcontent箇所を書き換える。
（[0]なのは、viewportという名前はおそらくこれしかないだろうという観点から。もし他の要素にviewportという名前を付ける場合は、単純に[0]にするとバグが生じるかもしれない）

注意点

viewportを書き換える形の場合、スマホの横幅に合わせてサイズが細かくなるわけではなく、
画面外に伸びてサイズが変更されるので（下の図の感じ）、cssでvwを使ってサイズを指定している箇所はレイアウトが崩れる。

 |---------------------------------------------| //width=1080に設定した時
 |------------------| // スマホ画面（400くらい？左右にスクロールが出来るようになる）

参考

もう逃げない。HTMLのviewportをちゃんと理解する

transitionは4つのプロパティを一括で指定できる。

・transition-property -> アニメーションさせるプロパティを指定
・transition-duration -> 時間（アニメーションが動いている間）
・transition-timing-function -> タイミング
・transition-delay -> 時間（アニメーションが開始するまでの間）

初期値は以下の通り
・transition-property: none;
・transition-duration: 0s
・transition-timing-function: ease;
・transition-delay: 0s;

まとめて表現すると
transition: none 0s ease 0s;

それぞれのプロパティの詳細については以下のURL似て詳しく記載されている。
https://haniwaman.com/css-transition/