20210117のCSSに関する記事は8件です。

投稿日：2021-01-17T19:07:56+09:00

【初心者でもわかる】お知らせマークや未読件数をつける方法2選

どうも7noteです。新着のお知らせなどがあった時に丸いアイコン等を付けてクリックやタップを促す方法

スマホの普及もあり、画像に小さいアイコンがつくようなデザインを多く見かけるようになりました。
さっそく丸いアイコンを付けたいと思います。また数字が入る場合は桁数が増えるも考慮して考えます。

文字や記号入る場合の綺麗な作り方の例（疑似要素を使用）
index.html
<div class="news">
  <a href="#">お知らせ</a>
</div>
style.css
.news {
  /* ボタンっぽいデザインを入れる */
  width: 70px;
  padding: 3px 5px;
  border: solid 1px #000;
  border-radius: 5px;
  position: relative; /* 基準値とする */
}
.news::after {
  content: "！";        /* 表示する記号や文字を入れる（1文字） */
  position: absolute;   /* 相対位置を指定 */
  top: -10px;           /* 表示位置を上から-10pxの位置にする */
  right: -10px;         /* 表示位置を右から-10pxの位置にする */
  color: #FFF;          /* 文字色を白色に指定 */
  line-height: 20px;    /* 行の高さを指定 */
  font-weight: bold;    /* 太文字にする */
  text-align: center;   /* 文字を中央揃えにする */
  width: 20px;          /* 幅を20pxに指定 */
  background: #F00;     /* 背景色を赤に指定 */
  border-radius: 50%;   /* 角丸を50%に指定 */
}
文字数や桁数が変動する可能性がある場合の作り方の例
index.html
<div class="news">
  <a href="#">お知らせ<span class="notice">3</span></a>
</div>
style.css
.news {
  /* ボタンっぽいデザインを入れる */
  width: 70px;
  padding: 3px 5px;
  border: solid 1px #000;
  border-radius: 5px;
  position: relative; /* 基準値とする */
}

.news span {
  position: absolute;     /* 相対位置に指定 */
  top: -10px;             /* 表示位置を上から-10pxの位置にする */
  left: calc(100% - 10px);/* 表示位置を右から内側に10pxの位置 */
  color: #FFF;            /* 文字色を白に指定 */
  font-weight: bold;      /* 太文字にする */
  line-height: 20px;      /* 行の高さを指定 */
  text-align: center;     /* 文字を中央揃えにする */
  background: #E68031;    /* 背景色をオレンジに指定 */
  border-radius: 10px;    /* line-heightの半分の角丸を指定 */
  min-width: 20px;        /* 最低幅を指定 */
  padding: 0 3px;         /* 左右に少しだけ余白を設定 */
  box-sizing: border-box; /* 計算しやすいように */
}
このように、複数桁になった場合でも、左右に半円がついているような見た目をキープすることができます。

もしborder-radius:50%;を指定してしまうと、桁数が大きくなり横長になったときに楕円形になってしまい美しくありません。

見栄えが悪い例

まとめ

ちょっとアイコンをつけたりなんかはよくあるので、作り方を覚えておき、
文字数によって違う手法でのアプローチがあることさえ理解していれば綺麗にコーディングすることができます。

参考になれば。

おそまつ！

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

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-17T18:42:06+09:00

デイトラWeb制作コース初級編DAY6の学び

【この記事に書いてあること】

プログラミング学習6日目⏩

Web制作コース初級編DAY6?

学習時間:3時間23分⏳

学習内容:ゼロからサイトを作る②✏

学び?
・altには画像の説明を入れる
・CSSは共通部分から記述していく
・inputは属性を付けて指定する
・送信ボタンはsubmit#デイトラ #プログラミング初学者 #プログラミング pic.twitter.com/F2uUWcn899
— ふりっく?トリプルゼロの（これから）Webマーケター (@FuRiC_twi) January 17, 2021

　【目標】

「ゼロからサイトを作ってみる②」

　【学習時間】

時間分

　【学び】

1 altには画像の説明を入れる　
index.html
<img src="" alt=""> 
2 wrapperとは包むという意味
例では、<div class="course-item"></div>を包み込んでいる
index.html
<div　class="course-wrapper"> 
        <div class="course-item"></div>
        <div class="course-item"></div>
        <div class="course-item"></div> 
</div>
3 CSSは共通部分から記述していく

4　親クラスやブロックで囲って、そこにfloatなどを記述していく
そうすることで後から<p>タグなどを追加しても反映される
　<p>などの子要素に直接floatを書かない
index.html
        <div class="about-left">
          <img src="./img/about.png" alt="デイトラとは"> 
        </div>
        <div class="about-right">
          <p>デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。 
            毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。
            1日1題30日でプロのWebエンジニアを目指しましょう!
          </p>
        </div>
style.css
.about-left {
    float: left;
    width: 48%;
}

.about-right {
    float: right;
    width: 48%;
}
5 placeholder="〇〇"の属性を使えば、後ろの影として表示できる
例
index.html
<input type="email" name="email" id="email" placeholder="メールアドレス">
↓

6 枠の調整
style.css
input[type="email"] {
    width: 600px; /*枠の横の長さ*/
    border: 3px solid #d8d8d8; /*枠線の細さ、傍線、色*/
    font-size: 18px; /*フォント（メールアドレス）のサイズ*/
    display: block;/*要素が横までいっぱいに広がり、縦に並んでいく*/
    margin: auto;/*要素を中央へ持ってくる*/
    padding: 15px;/*枠内の余白の調整*/
    border-radius: 990px;/*枠角の調整*/
    margin-bottom: 20px;/*下余白の調整*/
}
↓

7 　inputは似ている枠を追加することがよくあるので、属性を付けて指定する
style.css
input[type="email"] { }
8 送信ボタンを作成する
index.html
<input type="submit">
↓

9 ボタンは複数使うことがあるから、クラスを２つ作成して分ける
style.css
.btn { /*ベースのボタンクラス*/
    padding: 20px 60px;
    display: inline-block;/*幅や高さが変更できるインライン要素*/
    background-color: #082B48;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    border-radius: 4px;
}

.btn-register {/*ベースのボタンクラスに後付で各ボタンで仕様変更をする*/
    background-color: #ec6d64;
    display: block;
    margin: auto;
}
10 CSSのclass名で付けては行けないNGワード
　・日本語や全角英数字
　・数字から始めない
　・ハイフン（-）とアンダースコア（_）以外の記号を使わない

11 CSSのclass名で気をつけること
　・誰が見てもわかりやすい名前をつける
　・書き方を統一する
　・役割や場所、見た目がイメージしやすい

12 CSSのclass名で使いやすい英単語

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-17T15:04:36+09:00

laravel 背景画像を固定化させる方法

はじめに

今回、久々にHTML CSSを編集して画像を背景にしたいと思い備忘録で投稿させて頂きます。

画面をスクロールしても背景は固定化されている。

背景の大きさは画面一杯に設定します。

Asset関数を使用してフォルダを参照します。

写真素材はこちらでDLしました。写真AC

HTMLの編集

HTMLとCSSを結びつけるasset関数を記述して下さい。
<link rel="stylesheet" href="{{ asset('css/sample.css') }}">
これをhead内に記述して下さい。
sample.blade.php
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>Sample Title</title>
    <link rel="stylesheet" href="{{ asset('css/sample.css') }}">//これを記述して下さい
</head>
<body>
</body>
Asset関数とは

laravel独自のヘルパ関数の一つです。
画像やCSS、JavaScriptといったリソースデータの読み込みをする際に使います。
極論に言うと、publicフォルダの中を確実に参照させるために使います。
因みに{{}} の意味は、xssの対策です。

CSSの編集
sample.css
body {
  width: 100%;
  height:100vh;
  background-image: url(../images/4317917_m.jpg);  
  background-position: center center; 
  background-repeat: no-repeat;  
  background-attachment: fixed; 
  background-size: cover;
 }
background-imageを使って画像を呼び出し

background-image: url(../images/4317917_m.jpg);
..は一つ上の階層フォルダを参照しているという意味になります。
/images imagesというフォルダ(ＣＳＳと同じ位置に作ったフォルダ)を参照する。
最後に画像の名前をコピペ+拡張子も必ず記述。

background-position: center center

画像を常に上下左右の中央に配置させる。

background-repeat: no-repeat;

画像を繰り返し表示しないようにする。

background-attachment: fixed;

ページなどのコンテンツの高さが画像より大きい場合は自動で調整してくれる。

background-size: cover;

画面、ブラウザのサイズに基づいて、背景画像を調整。
このように画像いっぱいに画面を調整してくれます。以上です。

参考にしたURL

テックアカデミー
 背景画像をブラウザいっぱいに表示しているCSS記述方法

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-17T10:34:02+09:00

デイトラWeb制作コース　初級編DAY5の学び

【この記事に書いてあること】

プログラミング学習5日目⏩

目標:Web制作コース初級編DAY5?

学習時間:2h27min⏳

学習内容:ゼロからサイトを作る✏

学び?
・リセットCSSの下にスタイルシートを記述する
・クラス名は基本「親要素の名前＋用途」にする
・floatさせたら親要素の高さが0になってズレる
→解決方法あり#デイトラ pic.twitter.com/CxqZzAfEYa
— ふりっく?トリプルゼロの（これから）Webマーケター (@FuRiC_twi) January 16, 2021

　【目標】

「ゼロからサイトを作る①」

　【学習時間】

2時間27分

　【学び】

1.Emmentを使ったdescriptionの簡略化
index.html
meta:desc　→　<meta name="description" content="">
2.command＋方向キーで行を入れ替えることができた

3.リセットCSSの下にスタイルシートを記述する
　リセットCSSの上にスタイルシートが来るとそれもリセットされてしまうから
style.css
    <link rel="stylesheet" href="css/reset.css">リセットCSS
    <link rel="stylesheet" href="css/style.css">スタイルCSS
4.クラス名は基本「親要素の名前＋用途」にする
index.html
<body>
  <header>
    <div class="container clear">
      <div class="header-left">
        <h1 class="header-title">30DAYSトライアル</h1>
5.・floatさせたら親要素の高さが0になってズレる→.clear::after を使う
style.css
.clear::after { /*clearのクラスをつけた要素の後ろ（after)を変更したい*/
    content: ""; /*afterとbeforeの疑似要素にはcontentが必要*/
    clear: both; /*空白を作る*/
    display: block;
}   /*これらはセットで覚える！*/
6.思い通りの見た目にならない時の☑チェックリスト
①　コロン（:）とセミコロン（;）を間違えていないか
②　全角スペースが入っていないか
③　つなげる文字を書き忘れてないか。例えば、アンダーバー（_)　ハイフン(-)　ドット（.）など
④　「閉じタグ」の数が不足してないか
⑤　classを定義するときに「ドット（.）」を書き忘れてないか
⑥　単純なスペルミス

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-17T10:31:10+09:00

デイトラWeb制作コース　初級編DAYの学び

【この記事に書いてあること】

プログラミング学習5日目⏩

目標:Web制作コース初級編DAY5?

学習時間:2h27min⏳

学習内容:ゼロからサイトを作る✏

学び?
・リセットCSSの下にスタイルシートを記述する
・クラス名は基本「親要素の名前＋用途」にする
・floatさせたら親要素の高さが0になってズレる
→解決方法あり#デイトラ pic.twitter.com/CxqZzAfEYa
— ふりっく?トリプルゼロの（これから）Webマーケター (@FuRiC_twi) January 16, 2021

　【目標】

「ゼロからサイトを作る①」

　【学習時間】

2時間27分

　【学び】

1.Emmentを使ったdescriptionの簡略化
index.html
meta:desc　→　<meta name="description" content="">
2.command＋方向キーで行を入れ替えることができた

3.リセットCSSの下にスタイルシートを記述する
　リセットCSSの上にスタイルシートが来るとそれもリセットされてしまうから
style.css
    <link rel="stylesheet" href="css/reset.css">リセットCSS
    <link rel="stylesheet" href="css/style.css">スタイルCSS
4.クラス名は基本「親要素の名前＋用途」にする
index.html
<body>
  <header>
    <div class="container clear">
      <div class="header-left">
        <h1 class="header-title">30DAYSトライアル</h1>
5.・floatさせたら親要素の高さが0になってズレる→.clear::after を使う
style.css
.clear::after { /*clearのクラスをつけた要素の後ろ（after)を変更したい*/
    content: ""; /*afterとbeforeの疑似要素にはcontentが必要*/
    clear: both; /*空白を作る*/
    display: block;
}   /*これらはセットで覚える！*/
6.思い通りの見た目にならない時の☑チェックリスト
①　コロン（:）とセミコロン（;）を間違えていないか
②　全角スペースが入っていないか
③　つなげる文字を書き忘れてないか。例えば、アンダーバー（_)　ハイフン(-)　ドット（.）など
④　「閉じタグ」の数が不足してないか
⑤　classを定義するときに「ドット（.）」を書き忘れてないか
⑥　単純なスペルミス

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-17T10:15:58+09:00

デイトラWeb制作コース初級編DAY4の学び

【この記事に書いてあること】

プログラミング学習4日目⏩

目標:Web制作コース　初級編　DAY4　?

学習時間:2h15min⏳

学習内容:VSCodeの環境構築・検証機能✏

学び?
・Live Serverは変更がリアルタイムで反映される
・検証で変更したソースコードは保存できる
・Emmentを使えばコーディングスピードが上がる#デイトラ pic.twitter.com/UX0al6tQOh
— ふりっく?トリプルゼロの（これから）Webマーケター (@FuRiC_twi) January 15, 2021

　【目標】

「VSCodeの環境構築・検証機能を知る」

　【学習時間】

2時間15分

　【学び】

Live Serverは変更がリアルタイムで反映されるから便利

要素「hover」はその要素の上にカーソルが乗っている場合の見え方を変更する

プロパティ「opacity」は透明度を変更する
　1だとそのままで、0に近づくほど完全な透明になっていく

コーディングするときは検証画面を開いて確認しながら進める

Chromeの検証で変更したソースコードは、そのままファイルにして保存できる
＜方法＞
・変更する
・sourceタブを開く
・変更したファイルを右クリックし、「save as」
・保存完了

Emmentを使えばコーディングスピードが上がる！
参考サイト: Emmetの使い方とよく使うパターン集

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-17T10:01:15+09:00

デイトラWeb制作コース　初級編DAY3の学び

【この記事に書いてあること】

プログラミング学習３日目⏩

目標:デイトラDAY３?

学習時間:３時間１６分⏳

学習内容：CSSの基本的な書き方とルール✏

学び?
①CSSファイルは相対パスで指定するのが一般的
②セレクタ・プロパティ・バリューという三つの要素
③特定の箇所のスタイルを変更する場合はclassを活用#デイトラ pic.twitter.com/enwhlBvzJj
— ふりっく?トリプルゼロの（これから）Webマーケター (@FuRiC_twi) January 8, 2021

　【目標】

「CSSの基本的な書き方とルールを覚える」

　【学習時間】

3時間16分

　【学び】

1.
CSSファイルは相対パスで指定するのが一般的
絶対パスだと作業しているフォルダを動かしたときやサーバーにアップしたときなどにパスがズレてリンクが切れてしまう
なので相対パスを使うようにする

2.
セレクタ・プロパティ・バリューという三つの要素
セレクタ { プロパティ: バリュー; }
どこの→セレクタ
何を→プロパティ
どうするか→バリュー
よくある間違いとして、プロパティの右は：（コロン）、値の右は；（セミコロン）であることに注意する

3.
特定の箇所のスタイルを変更する場合はclassを活用

4.
「 > 」で繋げて書くことで、直属の子孫要素だけを指定することができる

5.
font-sizeの値は
px・%・ em　がある
font-size 16pxを倍の大きさにしたいときは
32px ・200%・ 2em と書く

6.
CSSでよく使うプロパティ

・fontの基本「プロパティ」
font-size:文字の大きさ
font-weight：文字の太さ
color：文字の色
font-family：文字のフォント

・テキストの基本「プロパティ」
line-height：行間 text-align：水平位置 vertical-align：垂直位置 text-decoration：テキストの装飾 letter-spacing：文字間のスペース

・背景の基本「プロパティ」
background-image：背景画像 background-size：背景画像のサイズ background-repeat：背景画像の繰り返し background-attachment：背景画像の固定・移動 background-color：背景の色

・positionの基本「バリュー」
fixed：スクロールしたらひっついて来る relative＋方向指定：本来表示される位置からどのくらい動かすか absolute：親要素からどのくらい動かすか
　　　　　　absoluteとrelativeはセットで使う

　 Tweet
Qiitaで続きを読む

投稿日：2021-01-17T05:57:37+09:00

【初学者向け】プラグインなし。Carousel Slider 自作してみた。

カルーセルスライダーを自作しました。また初学者用に図解化してみたので是非参考にして下さい。

完成イメージ

箱が小さくて申し訳ないのですが、こんな感じです。
ごく一般なカルーセルスライダーです。

ちなみにカルーセルとスライダーの違いですが、カルーセルは別名メリーゴーランドというのですが、簡単に言ってしまうと同じところをグルグル回ってるという意味です。

対してスライダーは上下左右にスライドしていれば、それはスライダーです。

正直ループするかしないかの違いで機能自体に大きな違いはなく、意味的なくくりもないみたいです。

下準備

準備として、以下のことをします。
※コードを書かない場合は読み飛ばして下さい。

【準備するもの】
・画像（以下にリンク貼ります）
・html/css/jsファイル（インラインで書いても良いけど分けた方がわかりやすいよ！）

階層やファイル名は以下に合わせると良いでしょう。

コーディング

マークアップ
html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
    
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    
    <header>
        <h1>Carousel Slider</h1>
        <p>center line<br>↓</p>
    </header>
    
    <div class="carousel">
        <ul>
            <li><img src="./img/img1.png"></li>
            <li><img src="./img/img2.png"></li>
            <li><img src="./img/img3.png"></li>
        </ul>
        
        <span class="prev">←</span>
        <span class="next">→</span>
    </div>    
    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    
    <script src="./js/main.js"></script>
</body>
</html>
・GoogleFontとFontAwesomeはCDN書いていますが、今回は使いません。
・JQueryは絶対使うので最新版を入れましょう。
・body内の説明ですが、headerのpは中心が、わかりやすい様に↓をつけています。あとあと説明に使うのでとりあえず着けときましょう。
・div.carouselですが、大きく２つのブロックに分かれいます。まずulには画像を3枚並べる様にliを３つ並べています。あとはボタンとしてspanを２つ書いています。

画面はこんな感じになれば良いと思います。

レイアウト変更

次にCSSを書いていきます。ここは何回かに分けて説明します。
まずResetを書き、headerは中央寄せだけ書きます。
css
@charset "utf-8";
/* Reset */
html,body,h1,p,ul,li{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
img{
    border: none;
    vertical-align: bottom;
    max-width: 100%;
} 
/* header
--------------------------------------- */
header{
    text-align: center;
}
こんな感じになったかと思います。
次に、carousel slider部分を整えます。
まずやるべきは中央寄せです。今回はブロック要素を中央寄せなのでmarginを使えば良いですね。
css(追加分のみ記載)
.carousel{
    width: 100px;
    margin: 0 auto;
}
こんな感じです。
ここで冒頭でも触れた、headerのpのセンターライン（↓）の出番です。
画像3枚がちゃんとこの、ラインのど真ん中に来てることを確認しましょう。

次に、横並べをします。
横に並べたい要素はimgではなくliなのでulにflexをかけます。
※ulがflexコンテナ、liがflexアイテムです。
css(追加分のみ記載)
.carousel > ul{
    display: flex;
}
とりあえずflexかけました。画面を確認します。

画像ちっさｗ
はい、これはflexの特性が関係してます。

flexは、flexアイテムを横並べにするのですが、親要素の幅に対して均等配置する特性もあります。

つまり今回で言う親要素とはulのことを指しています。そしてそのulの幅と言うのは、100pxになります。

ん？と思った人もいるかも知れません、ulに幅指定なんかしてないのに、なぜ100pxなのか？

初心に戻って、CSSの略称はなんだったでしょうか？Cascading Style Sheetsです。Cascad=滝、つまり上から下へ流れることを示しています。もっと言うと、親から何かを受け継ぐと考えても良いでしょう。

では今回は「どこから」「何を受け継いでいるか」と言うとulの親である.carouselから幅を受け継いでると言うことになります。つまり100pxです。

話を戻します。
クイズです。

・100px内に画像が3つ収納されています。
・画像の元々の幅は100pxです。
・元の画像サイズのまま、横に並べたいです。

どうしたら良いでしょうか・・・

答えは簡単です。flexアイテムで自動的に均等化されることは回避できないので、flexコンテナ自体を大きくします。

ではどれだけ大きくするかと言うと、画像の枚数分、倍にします。今回は3枚なので３倍にします。

CSSで３倍にする方法は、２通りあります。純粋に300%と書くかcalc(100% * 3)と書くかです。
後者は一見メンドそうに見えますが、おそらく玄人になればなるほど後者を選ぶでしょう。
理由は明示的に3倍してるとわかるからです。現場に出れば、複数人でコードを管理します。パッと他人のコードを見た時にどう言う意図でコードを書いたかが伝わるのは後者の気がします。

なので今回はcalcを使います。
css
.carousel > ul{
    width: calc(100% * 3);
    display: flex;
}
画面はこんな感じです。
画像サイズも元通りで、横並べになりました。
ただ注目すべき点は、センターラインの位置ですね。一番最初の要素が中心にいて、そこから右に後続の要素が並んでいます。

なんか変な気がしますが、カルーセルなので問題ありません。最終的にはこのセンターラインにいる要素しか表示しないので後続がどこにいようが関係ないです。

では続きを書いていきます。
次にやるべきは、ボタンを作成し、適正な位置に配置します。
まずボタンの見た目だけやります。
css(追加分のみ記載)
.carousel > span{
    border-radius: 50%;
    background: orange;
    color: white;
    font-size: 30px;
}
こんな感じです。難しいことはありませんね。
次に配置です。配置といえばpositionですが、今回は特定の要素を基準にして、ボタンを配置したいです。

今回の場合、特定の要素と言うのは、このカルーセル大元である.carouselです。

こう言った、特定の要素に対して配置をしたい場合、親要素にrelative、子要素にabsoluteを使います。

では親要素は.carousel、子要素はspanとうことになるのでコードを追加していきます。
css
.carousel{
    width: 100px;
    margin: 0 auto;
    position: relative;
}
.carousel > span{
    position: absolute;
    top: 50%;
    border-radius: 50%;
    background: orange;
    color: white;
    font-size: 30px;
}
.carousel > span.prev{
    left: 0;
}
.carousel > span.next{
    right: 0;
}
こんな感じですね。順番に解説します。
まず.carouselは先程も言った通り、spanの基準点にしたいのでposition: relative;をかけてます。

次に、基準点を作ったので、この基準点に対して、絶対配置をおこないます。

もちろん絶対配置の対象はspanなので.carousel > spanにposition: absolute;をかけています。

ただposition: absolute;をかけるだけだと、効力が発揮されないので、プラスアルファーとしてtop: 50%;をつけています。これは親要素の50%の位置に配置することを意味しています。

そして、prevボタンは左に、nextボタンは右に配置したいので、それぞれ個別にleft: 0;,right: 0;をかけています。

ここまで出来たら画面を確認します。

いろいろ問題がありますね・・・
２箇所あります。
まずは、ボタンの形が歪んでます。これはabsoluteの特性が関係しています。
absoluteをかけると、floatの様に、元居た階層から離れ(浮いてしまい)、別の階層（上の階層）に要素が移動してしまいます。と同時にblock要素になります。

結果から先に言うと、block要素になったことで、line-height: 1.5;が付与されました。

spanはインライン要素です。インライン要素にはline-height: 1.0;が初期値としてあります。

対してblock要素には、line-height: 1.5;が付与されています。

ここまでくるとなんとなく想像つくかと思いますが、absoluteをかけたことで、block要素になり、line-height: 1.0;から1.5になったと言うことになります。なので縦長なレイアウトになってしまったと言うことですね。

２つ目の問題として、ボタンが中央に配置されてないことですが、これは、positionの配置方法が、要素の中心ではなく、左上だからです。なので、要素の半分のサイズ分、上にズラす必要があります。
css(変更セレクタ全体を記載)
.carousel > span{
    position: absolute;
    top: 50%;
    border-radius: 50%;
    background: orange;
    color: white;
    font-size: 30px;
    margin-top: -15px;
    line-height: 1.0;
}
これで、良い位置に配置されたかと思います。

これでレイアウト完成です！
次はJSを書いていくのですが、JSを書く上で重要なのは、テストや検証をどれだけやるかです。

なので先にテストと検証をやっていきます。

JQuery

なにをテストしていくかと言うと、今回のメイン機能である、スライドです。
まず手作業で実装したい機能を実現させます。
以下のコード2行を追加します。
css
.carousel > ul{
    width: calc(100% * 3);
    display: flex;

    margin-left: -100%;
    transition: .3s;
}
画面はこうです。今回は検証を使うので画面全体を撮ってます。
では検証の部分を見ていきます。以下の通りにしましょう。

Elementsの中からulを選び、Stylesの中から指定のポイントをクリックします。
以下の動画を見ながらやっってみて下さい。

margin-left: -100%;についてる、チェックボックスをつけたり消したりすることで、擬似的にスライダーを実装することが出来ます。

これは検証ツール上でCSSのオンオフが出来ることを利用した手法です。
この様に、目的を明確にする為に検証ツールは使うべきです。

さて、話を戻しますが、ここまでやって、margin-left: -100%;をつけたり消したりすることで、スライダー実装することが出来ることがわかりました。なのでこれをJSに落とし込みます。

では機能の概要はなんとなくわかりました。「●●をしたらxxをする」と言うのがJSイベントの基本なのですが、●●とxxなにが当てはまるでしょうか？

スライダーなので「ボタンを押したらスライドする」がただしそうですが、いまいち具体性にかけます。とはいえ考えても進まないので、今言った「ボタンを押したらスライドする」をコードに落とし込みます。
main.js
$(function(){
  $('.carousel > span').on('click', function(){
    console.log($(this));
  });
});
こんな感じです。これも鉄則ですが、必ず１手順づつconsoleで確認しましょう。

ここでconsoleすることで、このクリックイベントは動くことを証明出来るので後々エラーになった場合に、エラー原因の候補から外れます。
ではボタンクリックでconsoleログを確認します。

この様に、prevを押したらspan.prevがnextを押したらspan.nextがconsoleログに表示されましたか？

$(this)と言うのは、自身の要素と言う意味があり、今回の場合イベントの発火元を$('.carousel > span')と曖昧なセレクタしています。

$('.carousel > span')はnextとprevの２つ存在することは理解できるかと思います。
ただしどちらがクリックされるかはわからないので、あえて$('.carousel > span')とすることで、どちらがクリックされてもイベントが発火する様な設計になっています。

ただprevとnextで別々の動きをするので$(this)を使用することで、クリックされた要素のみを取得できる様にしてます。

では次に、処理を分岐させましょう。
当たり前ですが、まずconsoleログで確認します。
コードとしてはif文を使います。prevが押されたら左、nextが押されたら右と表示します。
main.js
$(function(){
  $('.carousel > span').on('click', function(){
    if($(this).hasClass('prev')){
      console.log('左');
    } else{
      console.log('右');
    }
  });
});
こんな感じで、ボタンを押した分consoleログに表示されます。
ここで注意したいのが、右と左がちゃんとボタンの向きとマッチしてるか確認します。左右を逆転して書いてしまうことはありがちです。ここで不穏因子は徹底的に排除しましょう。

ここから本番です。先程検証ツールを使って手動でスライド実装した時のコードが残ってます、まずこれを消しましょう。
css
.carousel > ul{
    width: calc(100% * 3);
    display: flex;

    /* margin-left: -100%;
    transition: .3s; */
}
これが出来たら、消した2行と同じ意味を持つ、JSのコードを書いていきましょう。
main.js
$(function(){
  $('.carousel > span').on('click', function(){
    if($(this).hasClass('prev')){
      console.log('左');
      $('.carousel > ul').animate({'margin-left':'-100%'}, 1000);
    } else{
      console.log('右');
    }
  });
});
この様に動けば良いかと。
ただし現状問題があります。これは左ボタンを押したら、左に要素１つ分スライドすると言うコードなのですが、逆に言うと元いた位置から、１つ分以上動けないと言うことになります。

実際にやってみると、何度クリックしても最初の1回以上は動かないはずです。
ではどうするか、一旦の打開策としてmargin-left: 0;を続けてかけてみましょう。
main.js
$(function(){
  $('.carousel > span').on('click', function(){
    if($(this).hasClass('prev')){
      console.log('左');
      $('.carousel > ul').animate({'margin-left':'-100%'}, 1000, function(){
        $('.carousel > ul').css('margin-left', '0');
      });
    } else{
      console.log('右');
    }
  });
});
ここでポイントがあります。animate関数に続けて、処理を書く場合は、上記の様に関数をネスト化する必要があります。
かなり複雑な書き方ですが、正直慣れなので今は我慢しましょう。

では動きを確認します。

無限にクリックできる様になったのですが、毎回初期の位置に戻ってしまいます。
次はこれを解決する方法を考えましょう。
ちょっと難しいのですが、カルーセル自体がループするものなので、移動した要素、末尾に配置すれば解決します。
main.js
$(function(){
  $('.carousel > span').on('click', function(){
    if($(this).hasClass('prev')){
      console.log('左');
      $('.carousel > ul').animate({'margin-left':'-100%'}, 1000, function(){
        $('.carousel > ul').css('margin-left', '0');
        $('.carousel > ul').append($('.carousel > ul > li:first-child'));
      });
    } else{
      console.log('右');
    }
  });
});
こんな感じです。順に解説します。
まずセレクタ末尾に追加するメソッドとして、.append()があります。これは既存の要素、今回であればliですが、既存要素があれば動作的には追加ではなくカット＆ペーストになります。

つまり.animate()で左にズレたと同時に、先頭のliをカット、末尾にペーストしてます。

そして重要なのが、先頭がカットされ、末尾に追加されたと言うことは、元いた位置から押し出しで２つ分移動したと言うことになります。

そして、margin-left: 0;を追加した時の挙動を思い出して欲しいのですが、左にスライドしたと思ったら瞬間的に右に移動しましたよね？

これを合わせることで、２つ左に移動して、右に１つ移動した結果、左に１つスライドした、となります。

ここら辺はややこしいので、図解化したので合わせてみて下さい。

では動作を確認します。

こんな感じでループが組めたら左側は完成です。
右側は左とおんなじ様なロジックで出来てるので自身で解読してみて下さい。以下に完成形コード載せときます。
※console.logは邪魔なので消しました。
main.js
$(function(){
  $('.carousel > span').on('click', function(){
    if($(this).hasClass('prev')){
      $('.carousel > ul').animate({'margin-left':'-100%'}, 1000, function(){
        $('.carousel > ul').css('margin-left', '0');
        $('.carousel > ul').append($('.carousel > ul > li:first-child'));
      });
    } else{
      $('.carousel > ul').prepend($('.carousel > ul > li:last-child'));
      $('.carousel > ul').css('margin-left', '-100%');
      $('.carousel > ul').animate({'margin-left':'0'}, 1000);
    }
  });
});
仕上げ

ではJSが完成したところで仕上げと行きます。
現状全てのli要素が剥き出しになっているので、センターラインのエリアのみ表示できる様にしましょう。
css
.carousel{
    width: 100px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
大元の親要素.carouselにoverflow: hidden;をかけるだけです。.carousel > ulにwidth: calc(100% * 3);をかけていて、親要素からはみ出る様に設計したので、はみ出た分を隠すCSSを適用させます。

これで目的通り、Carousel Sliderの完成です！

まとめ

長時間ありがとうございました。作成に8時間もかかってしまいました?
ただ機能と言うよりは、開発までの工程を学んで欲しくて、ひたすらに書き続けました。8時間あっという間でした。

将来的にマネジメント・教育する立場になりたいと思っております。もし何かご意見、修正等あれば遠慮なくどうぞ！

2021/1/17追記

imgサイズどのサイズにも対応できる様に、cssを追記。
css
@charset "utf-8";
/* Reset */
html,body,h1,p,ul,li{
    padding: 0;
    margin: 0;
}
ul{
    list-style: none;
}
img{
    border: none;
    vertical-align: bottom;
    max-width: 100%;
} 
/* header
--------------------------------------- */
header{
    text-align: center;
}
/* carousel slider
--------------------------------------- */
.carousel{
    /* ここの幅、高さを変える事でどのサイズにも対応させることが可能。imgのサイズ指定は不要。 */
    width: 100%;
    height: 50vh;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.carousel > ul{
    width: calc(100% * 3);
    display: flex;
}
.carousel > ul > li{
    width: calc(100% / 3);
}
.carousel img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* prev next button */
.carousel > span{
    position: absolute;
    top: 50%;
    border-radius: 50%;
    background: orange;
    color: white;
    font-size: 30px;
    margin-top: -15px;
    line-height: 1.0;
}
.carousel > span.prev{
    left: 0;
}
.carousel > span.next{
    right: 0;
}
・冗長なセレクタを変数化。
・自動実行コードを追加。
main.js
$(function(){
  let carUl = $('.carousel > ul');
  $('.carousel > span').on('click', function(){
    if($(this).hasClass('prev')){
      carUl.animate({'margin-left':'-100%'}, 1000, function(){
        carUl.css('margin-left', '0');
        carUl.append($('.carousel > ul > li:first-child'));
      });
    } else{
      carUl.prepend($('.carousel > ul > li:last-child'));
      carUl.css('margin-left', '-100%');
      carUl.animate({'margin-left':'0'}, 1000);
    }
  });
  // 自動実行
  setInterval(function(){
        $('.carousel > span.next').click();
    },3000);
});