kuroのエンジニアメモ

現役エンジニアがプログラミングやエンジニアについてぼやくだけのブログ

レスポンシブ対応のブレイクポイントメモ

HTML&CSS

こんにちはHTML&CSS初心者のhimakuroです

今回の記事ではレスポンシブ対応を行なう際の PC、タブレット、スマホの幅（ブレイクポイント）のメモになります。

前回の記事

前回はChart.jsというライブラリを活用してチャートの表示を実装しました。 kuro-engineer-log.hatenablog.com



以前作ったプロジェクトで実際に使ったやつ

lgまでがタブレット想定。 xlより広い幅はパソコン想定

// min-width
$breakpoint-up: (
        'sm': 'screen and (min-width: 400px)',
        'md': 'screen and (min-width: 768px)',
        'lg': 'screen and (min-width: 1000px)',
        'xl': 'screen and (min-width: 1200px)',
) !default;

// max-width
$breakpoint-down: (
        'sm': 'screen and (max-width: 399px)',
        'md': 'screen and (max-width: 767px)',
        'lg': 'screen and (max-width: 999px)',
        'xl': 'screen and (max-width: 1199px)',
) !default;



ブレイクポイントのサンプルその①

スマホ: 〜479px以下

タブレット: 480〜769px

PC: 770px〜



ブレイクポイントのサンプルその②

スマホ: 〜480px以下

タブレット: 481〜959px

PC: 960px〜

ブレイクポイントのサンプルその②

スマホ: 〜479px以下

タブレット: 480〜959px

PC: 960px〜

まとめ

スマホは基本479以下を使用する事が多い。 タブレットは769または1,000弱付近 そして基本1,000を超えた辺りからはPC用にしておけば良さそう。

【HTML&CSS】Chart.jsを使ってグラフを3分で実装する方法

HTML&CSS

f:id:himanakuroneko7:20200709000015p:plain

こんにちはHTML&CSS初心者のhimakuroです

今回の記事ではChart.jsというライブラリを活用してポートフォリオにグラフを実装していきます。



前回の記事

前回はSwiper.jsというライブラリを活用してスライダーを実装しました。

もし興味があればこちらの記事も参考にしてみてください。

kuro-engineer-log.hatenablog.com



今回作るもの

今回はこんな感じのグラフを作っていきます。

f:id:himanakuroneko7:20200708202404p:plain

Chart.jsとは

f:id:himanakuroneko7:20200708202647p:plain

Chart.jsとはJavaScriptを活用して簡単にグラフが作成出来るオープンソースのライブラリです。

複数の種類のグラフを1つの図にまとめたり、アニメーションを入れたりと、幅広いデザインを取り入れることが出来るのが特徴です。

Chart.jsの導入方法

Chart.jsの導入方法としてはダウンロードしてプロジェクトのフォルダに格納する方法と、CDNで配信されている物を使う2通りがあります。

今回はお手軽なCDNで配信されているものを利用する方針にします。



index.html

<html>
  <head></head>
  <body>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
</html>



</body> の下にchart.jsのライブラリを読み込む1行を追加すれば導入完了です。

グラフを描画してみる

続いてグラフを描画するためのコードを記述していきます。

index.html

<html>
  <head></head>
  <body>
    <div class="chart">
      <canvas id="sampleChart"></canvas>
    </div>
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
  <script>
    let ctx = document.getElementById("sampleChart").getContext('2d');
    let sampleChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日', '7月7日'],
            datasets: [
                {
                    label: 'Analytics',
                    data: [1, 3 ,4, 8, 10, 2, 0],
                    borderColor: "rgba(18, 177, 192, 1)",
                    backgroundColor: "rgba(168, 229, 255, 0.5)"
                },
            ]
        }
    });
  </script>
</html>



  • id=sampleChart のところにグラフを描画させる
  • type: 'line' で線グラフを指定
  • data はどこにデータをプロットするかを指定
  • borderColor と backgroundColor で色を指定

上記のコードを追加後は下記のようなグラフが画面に表示されます。

f:id:himanakuroneko7:20200708234813p:plain

グラフの見た目は調整

グラフが描画できたので少し見た目を調整していきます。

index.html

<script>
  let ctx = document.getElementById("sampleChart").getContext('2d');
  ctx.canvas.height = 80; // 追加
  let sampleChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['7月1日', '7月2日', '7月3日', '7月4日', '7月5日', '7月6日', '7月7日'],
        datasets: [
            {
                label: 'Analytics',
                lineTension: 0, // 追加
                data: [1, 3 ,4, 8, 10, 2, 0],
                borderColor: "rgba(18, 177, 192, 1)",
                backgroundColor: "rgba(168, 229, 255, 0.5)"
            },
        ]
    }
});



  • height を任意の値に変更
  • lineTension: 0 にすることで、丸みを帯びた線から、より角張ったものに変更

height変更後はグラフがいい感じの高さになると思うので、あとは色を任意のものに変更したり、データ数を増やせばグラフの完成です。

f:id:himanakuroneko7:20200708234746p:plain

簡単にグラフが作れる

自作しようとするとかなり大変なグラフもライブラリを使えば3分で実装することが可能です。

Chart.jsには様々な種類のグラフとオプションがあるので、公式サイトのドキュメントを見て自分のサイト（ポートフォリオ）に合ったデザインを使ってみてください。

www.chartjs.org

【HTML&CSS】Swiper.jsを使ってスライダーを3分で実装する方法

HTML&CSS

こんにちはHTML&CSS初心者のhimakuroです

今回の記事ではswiper.jsというライブラリを活用してポートフォリオにスライダーを実装していきます。

今回作るもの

TwitterやInstagramのようなSNSでユーザーのリスト表示をしたいときに使えるようなデザインです。 アイコン＋名前を記載し、その下に説明文を記載します。

swiper slider

前回の記事

前回の記事ではヘッダーをスクロールした際にも画面上部に固定されるように実装しました。

kuro-engineer-log.hatenablog.com



Swiper.jsを導入する

Swiper

Swiper.jsとはjQueryなどを使わずに簡単にスライダーが実装できるライブラリです。

使い方としてはダウンロードしてプロジェクトのフォルダに格納する方法と、CDNで配信されている物を使う2通りがあります。

今回はお手軽なCDNで配信されているものを利用する方針にします。

index.html

<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet">
  </head>
  <body>
  〜中略〜
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
</html>



これだけで導入が出来ました。とても簡単ですね。

スライダーの雛形を実装していく

まずはスライダーの見た目部分を作成していきます。

Swiper.jsを機能させるためには、下記の3つのclassを持ったdivを用意してあげる必要があります

  • swiper-container
  • swiper-wrapper
  • swiper-slide



swiper-slide の中にはスライドさせる要素を入れて行きます。
今回は仮で swiper-inner というクラスを付加したdivクラスを作成し、文言をpタグの中に入れてみました。

index.html

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="swiper-inner">
        <p>コメント1</p>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-inner">
        <p>コメント2</p>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="swiper-inner">
        <p>コメント3</p>
      </div>
    </div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>



この内容を記述した後に
画面を開きスライド機能を持った要素が画面に表示されればOKです



スライドを機能させる

スライダーは画面に表示されましたが、まだこれだけでは実際に矢印をクリックしてもスライドしてくれません。

Swiper.jsでスライダーを機能させるためには、JavaScriptを少しだけ記述してあげる必要があります。

index.html

  <body>
  〜中略〜
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    });
  </script>
</html>



swiper.min.js を読み込むための記述の1行したに、新たなScriptタグを記述しSwiperのインスタンスを作成してあげます。

また、その際には navigation のオプションを付加してあげることで、左右の矢印を機能させていきます。

上記のコードを追加して画面をリロードしたら矢印が機能するようになればOKです。

スライダーをループさせる方法

Swiper.jsには様々なオプションが用意されていますが、その中にはループ機能もあります。

このループ機能を有効化する事で、スライダーが最後まで行ったら最初に戻るように設定出来ます。



index.html

  <body>
  〜中略〜
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true, // 追加
    });
  </script>
</html>



ループ機能を有効化する方法はとても簡単で loop: true の1行を追加するだけでOKです。

一定時間ごとに自動でスライダーが動くようにする

最後に数秒毎にスライダーが自動でスワイプするようにしていきます。

index.html

  <body>
  〜中略〜
  </body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        loop: true,
        autoplay: {
            delay: 5000,
        },
    });
  </script>
</html>



先程の loop の1行したに autoplay のオプションを追加しましょう。

ここで指定する delay はmsecなので 5000 と指定した場合は5秒という扱いになります。

3分でスライダーの実装が出来た

今回はSwiper.jsを活用して簡単にスライダーを組み込む方法を紹介しました。

Swiperには他にもたくさんのオプションがあるので時間に余裕があるときに覗いてみると良いと思います。

swiperjs.com

【HTML&CSS】ヘッダーを画面上部に固定する方法！

HTML&CSS

f:id:himanakuroneko7:20200705161735p:plain

こんにちはHTML&CSS初心者のhimakuroです

今回の記事ではヘッダーを画面上に固定する方法を書いて行きます。

PC画面はもちろん、スマホでサイトを見る場合でも同じ方法で実装が出来るので、是非活用してみてください。

今回作るもの

画像からは少し分かりづらいですが、ヘッダー部分がスクロールしても

画面上部に固定されるようにします。

f:id:himanakuroneko7:20200705154252p:plain

前回の記事

前回はFlexboxを活用してカード風のリストを作成しました。

kuro-engineer-log.hatenablog.com

ランディングページ（LP）を作る際には必須と言っても良い内容なので

もしまだカードデザイン作るのが苦手だなと言う方は参考にしてみてください。



ヘッダーを作成する

ヘッダーには下記のコードを利用しました。

index.html

<header>
  <div class="header-content container">
    <div class="logo">Design</div>
  </div>
</header>



style.css

header {
    height: 80px;
    width: 100%;
    font-size: 18px;
    background-color: white;
    box-shadow: 0 1px 1px -1px rgba(0,0,0,0.6);
}

.header-content {
    padding: 10px;
}

.logo {
    font-size: 32px;
    font-weight: bold;
    margin-right: 40px;
}

今回の目的はヘッダーを作ることではないので解説は割愛します。

今後別の記事で詳しく書く予定です。

ヘッダーを固定する

ここからが本題ですが、今回の内容は2行付け足すだけで実装が可能です。

style.css

header {
    height: 80px;
    width: 100%;
    font-size: 18px;
    background-color: white;
    box-shadow: 0 1px 1px -1px rgba(0,0,0,0.6);
    position: sticky; // 追加
    top: 0; // 追加
}

position: sticky と top: 0 を指定することで 画面上部に固定されるヘッダーが実装出来ます。

position: fixed を使う場合もありますが、その場合は

一種の float 状態になってしまうので、高さをその分したに下げて上げないと

ヘッダーの下にある要素とかぶってしまうので注意が必要です。

【HTML&CSS】Flexboxを使ってカードのリストを作成する方法！

HTML&CSS

f:id:himanakuroneko7:20200704171411p:plain

こんにちはHTML&CSS初心者のhimakuroです

今回の記事ではflexboxを活用してカード型のリストを横並びに作成していきます。

bootstrapなどを使っても実装は出来ますが、Flexboxを使って作ることでCSSの練習にもなるかなと思います



今回作るもの

f:id:himanakuroneko7:20200704162714p:plain

TwitterやInstagramのようなSNSでユーザーのリスト表示をしたいときに使えるようなデザインです。 アイコン＋名前を記載し、その下に説明文を記載します。



前回の記事

今回の内容は前回作成したカテゴリーリストの作り方と似ている部分が多いので

もしまだこちらの記事を見ていない方は是非読んでみてください。

kuro-engineer-log.hatenablog.com



flexboxを活用してカード風に表示する

まずは枠となる部分から作っていきます。

index.html

<div class="card-list">
  <div class="card">
    <div class="profile">
    </div>
    <div class="description">
   </div>
</div>



  1. 今回は複数のカードを表示するため、一番外側には card-list クラスを付加した div を配置
  2. そして内部にカード1つ1つを入れていく card クラスを持った div を配置
  3. card クラスの内部にはアイコンと名前を入れるための profile クラスを持った div を配置
  4. 説明文を入れるための description クラスを持った div を配置



仮で内容を入れるとこんな感じになります。

index.html

<div class="card-list">
  <div class="card">
    <div class="profile">
      <div class="profile-icon">
        <img src="./assets/image/himakuro-plain.png">
      </div>
      <div class="profile-name">
        <span>himakuro</span>
      </div>
    </div>
  <div class="description">
    <span>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみふめもやゆよらりるれろわをん</span>
   </div>
</div>



内容を入れた跡の見た目はこんな感じになります。 f:id:himanakuroneko7:20200704164618p:plain



アイコンと名前の部分を整えていく

続いてアイコンと名前の部分をCSSで整えていきます。

アイコン部分に関しては前回の記事と同様のものを活用していきます。

またカードの領域をより明確にするために、背景全体に色を付け、カードの背景にも色を付けておきましょう。

style.css

body {
    background-color:#f4f8fa;
}

.card {
    background-color: white;
}

.profile-icon img {
    width: 45px;
    border-radius: 50%;
    margin: auto 16px;
}



このような見た目になればOKです。

f:id:himanakuroneko7:20200704165046p:plain

カードの見た目を調整していく

次はカードの見た目を調整していきます。

style.css

.card {
    background-color: white;
    width: 24%;
    padding: 20px;
}

.card .profile {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
}
  1. カードの背景色を白に変更する
  2. 4つのカードを1行に並べるため、左右の余白を考慮しつつ width: 24% を指定
  3. カードの内部に余裕を持たせるために padding: 20px を指定
  4. アイコンの隣に名前を表示したいため、 display: flex を指定
  5. アイコンと説明文の間に余白を設けるため margin-bottom: 10px を指定
  6. アイコンと名前の上下の位置を合わせるため align-items: center を指定



上記のスタイルを追加後はこのようになればOKです

f:id:himanakuroneko7:20200704165908p:plain

一気にカードらしさが増してきたと思います。



カードリスト全体の見た目を調整していく

続いてカードを複数配置したときの見た目を調整していきます。

現状のコードだと仮にカードを8個配置してもこの様に縦一列に表示がされてしまいます。



f:id:himanakuroneko7:20200704170127p:plain



これを下記のスタイルを追加することで4つのカードが1行に並ぶようにしていきます。

style.css

.card-list {
    margin-bottom: 30px;
    display: flex; // 追加
    flex-wrap: wrap; // 追加
    justify-content: space-between; // 追加
}

.card {
    background-color: white;
    width: 24%;
    padding: 20px;
    box-sizing: border-box; // 追加
    margin: 10px 0; // 追加
}



  1. display: flex を追加することで横並びにする
  2. 指定したwidthで折返しがされるように flex-wrap: wrap を追加
  3. justify-content: space-between でそれぞれのカードを余白も加味した上で並ぶようにする
  4. box-sizing: border-box で padding や margin も考慮した width になるようにする
  5. margin: 10px 0 で各カードの上下に余白を設ける



スタイル追加後はこのような見た目になればOKです。



f:id:himanakuroneko7:20200704170608p:plain



ほぼ完成形になりました。

カードに影を付加する

最後に見た目の改善と言うところでカードの下部分に影を追加します

style.css

.card {
    background-color: white;
    width: 24%;
    padding: 20px;
    box-sizing: border-box;
    margin: 10px 0;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3); // 追加
}

box-shadow はその名の通り、boxに影を追加するためのスタイルです。

追加後はこのようになればOKです。

f:id:himanakuroneko7:20200704170919p:plain

文字がはみ出てしまう場合

今回の実装を行い、もし説明文がカードの外にはみ出てしまう場合は

word-break を追加することで解消されます

style.css

.card {
    background-color: white;
    width: 24%;
    padding: 20px;
    box-sizing: border-box;
    margin: 10px 0;
    box-shadow: 0 2px 0 rgba(0,0,0,0.3);
    word-break: break-all; // 追加
}

Flexboxを活用すれば簡単にカード風の見た目が実装出来る

少し複雑に見えるカード風の見た目でもFlexboxを活用すれば簡単に実装が可能です。

このようなデザインが実装出来ればSNSのアプリのユーザーリストの実装にも役立つと思います。

是非これを機会に作れるようになっておきましょう。

【HTML&CSS】Flexboxで2行のリストを簡単に作成する方法！

HTML&CSS

【HTML&amp;CSS】Flexboxで2行のリストを簡単に作成する方法！

こんにちはHTML&CSS初心者のhimakuroです。

今回の記事はFlexboxで2行のリストを作成する方法！を書いて行きます。

Flexboxを使えば大抵のデザインは作れるようになるので、デザイン出来る幅を広げて行きましょう。

今回作るリストの見た目

カテゴリーやメニューなどでよくあるシンプルなデザインですね。

f:id:himanakuroneko7:20200702211806p:plain

使い勝手が良いので、是非これを機会に作れるようになっておきましょう。

リストを作る

まずは ul とli を活用してリストを作成します

index.html

<div class="category-wrapper">
  <ul class="category-list">
    <li class="category">カテゴリ1</li>
    <li class="category">カテゴリ2</li>
    <li class="category">カテゴリ3</li>
    <li class="category">カテゴリ4</li>
    <li class="category">カテゴリ5</li>
    <li class="category">カテゴリ6</li>
    <li class="category">カテゴリ7</li>
    <li class="category">カテゴリ8</li>
  </ul>
</div>

このようなリストが画面に出てきたらOKです。

f:id:himanakuroneko7:20200702212320p:plain

Flexboxを活用してリストを横並びにして整える

続いて display: flex を使い、横並びにしていきます。

また今回は1行に4つカテゴリを配置する予定なので、左右の余白も考慮しつつ width: 24% で指定をしていきます。

style.css

.category-list {
    display: flex;
}

.category {
    width: 24%;
}



width: 24% を指定したのにも関わらず、幅が4等分にされず1行に並びますが一旦はOKです

f:id:himanakuroneko7:20200702212822p:plain

flex-wrapで複数行に対応させる

flexboxを使う際に flex-wrap を指定する事で複数行にすることが出来ます。

デフォルトではこれが no-wrap になっているため、折りたたみが無効化されて1行に収まるように調整されてしまいます。

style.css

.category-list {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}



.category-list の内容を上記に変更し、リストが2行になり文字が各リスト要素の中央に来るかを確認しましょう。

f:id:himanakuroneko7:20200702213241p:plain



余白の調整を行なう

続いて余白をいい感じに調整していきます。

この作業を行なう際には、背景色を指定して各要素の範囲を可視化する事をおすすめします。

具体的には .category のスタイルとして背景色を追加します。 今回は分かりやすいように水色(skyblue)を指定しました。

style.css

.category {
    background-color: skyblue;
    width: 24%;
}



水色の背景が付き、各要素の範囲が把握出来るようになればOKです。

f:id:himanakuroneko7:20200702213718p:plain

今回は各リストの左右に若干の余白を設けるために width: 24% を指定しました。

そして背景を水色にしたことにより、その余白が右に来てしまっていることがわかります。

そこで .category-list に justify-content: space-between; を追加しましょう。 style.css

.category-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
}



これを追加することにより、リスト要素全体が横幅をフルに使うようになり、リスト間に左右の余白が生まれます。

f:id:himanakuroneko7:20200702214400p:plain

あとは上下の余白が欲しいので、 margin を使い調整を行います。

style.css

.category {
    background-color: skyblue;
    width: 24%;
    margin: 10px 0px;
}



f:id:himanakuroneko7:20200702214807p:plain

余白の調整はこれで完了です。



リストの見た目を調整する

現状のままでも良いですが、リストの文字が若干窮屈な状態になってしまっているので最終調整を行なっていきます。

内容としては padding と box-sizing を追加していきます。

style.css

.category {
    background-color: skyblue;
    width: 24%;
    padding: 20px;
    box-sizing: border-box;
    margin: 10px 0px;
}



paddingを追加することにより、リストを拡大しました。

そしてこのようなpaddingを追加すると、その分横幅も追加されるのでリストが崩れてしまうことがあります。

そこでその現象を防ぐために box-sizing: border-box を追加しています。

border-box を追加することで、padding や margin も加味した上で幅を確保してくれるようになります。

これら2つのスタイルを追加することで、この様に窮屈さも解消されたリストの完成です！

f:id:himanakuroneko7:20200702215053p:plain

flexboxを活用する際には box-sizing は使う機会が多いと思うので是非覚えておきましょう。

【HTML&CSS】アイコン付きの検索ボックスを作成する方法

HTML&CSS

f:id:himanakuroneko7:20200702005239p:plain

こんにちはHTML&CSS初心者のhimakuroです。

今回の記事は検索ボックスをHTML&CSSで作る方法を書いて行きます。

検索ボックスを作るだけなら、 input タグを活用する事で簡単に設置出来ますが

アイコンを付けるとなると少しだけ手間がかかります。

そこで自分のメモとして実装した内容をまとめる。

今回作る検索ボックスの見た目

今回はこんな感じのを作ります。 f:id:himanakuroneko7:20200701234513p:plain

アイコンはfont-awesomeのものを利用します

Font Awesomeを読み込む

今回は検索ボックスの虫眼鏡アイコンを利用するので、まずはFont Awesomeを読み込む必要があります。

FontAwesomeはダウンロードして利用しても良いですが、今回は head に link href の行を追加して利用する方法を取ります。

<head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

検索ボックスを配置する

下記のコードを記述して検索ボックスを配置しましょう。

<div class="search-box">
  <input type="text" placeholder="Search..">
  <button type="submit">更新</button>
</div>

このような検索ボックスが表示されればOKです。

f:id:himanakuroneko7:20200702001111p:plain

 

検索ボックスにアイコンを付ける

続いてFont Awesomeの虫眼鏡アイコンを検索ボックスにつけていきます。

先程のコードを書き換えこの様に変更しましょう。

<div class="search-box">
  <input type="text" placeholder="Search..">
  <button type="submit"><i class="fa fa-search"></i></button>
</div>

アイコンが表示されればOKです。 f:id:himanakuroneko7:20200702002218p:plain

検索ボックスの見た目を調整

現状の見た目だと少しイマイチなので、CSSを適用し見た目を整えて行きます。

style.css

.search-box {
    position: relative;
}

input[type=text] {
    padding: 6px;
    font-size: 18px;
    background-color: #f4f8fa;
    border: none;
}

.search-box button {
    padding: 6px 15px;
    font-size: 18px;
    position: absolute;
    right: 1px;
    border: none;
    background: none;
    cursor: pointer;
}

ポイントは .search-box に対して position: relative; を記述し 子要素である button に position: absolute を指定しているところ。

こうすることで虫眼鏡アイコンの位置が親要素である検索ボックスの位置を基準とし、 更に right: 0 を指定することで、検索ボックスの一番右から0px移動した位置に配置されるようになる（一番右端になる）

完成…！ f:id:himanakuroneko7:20200701234513p:plain