一瞬で背景を斜めにします。刮目せよ。
デモ: https://codepen.io/tt113/pen/XWdVGbL?editors=1100

実装

html

<div class="box">

</div>

css

.box {
  height: 600px;
  background: linear-gradient(
    175deg, #fac700 52%, #1394CF 52%);
}

結果

解説

cssにはlinear-gradient関数というグラデーションを生成する関数があり、それを使って実装している。

引数の指定方法は様々だが、今回は１つ目の引数(175deg)はグラデーションの角度、

2つ目・3つ目の引数はグラデーションの色、始まる位置を指定している。

参考文献

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

どうも7noteです。CSSだけで作れるカルーセルの作り方

カルーセルといえば、東京にあるとしまえんが最近閉園になりました。
わたしはいったことがないのですがカルーセルエルドラドが有名らしいですね。

このカルーセルという言葉はフランス語で回転台とか、回転木馬を意味する言葉で、日本でいうところのメリーゴーランド（これは英語）ですね。
なのであまりカルーセルという言葉は聞き慣れないと思いますが、WEB業界では以下のようなデザインのことを、まるで回転しているかの様に見えることからカルーセルと呼びます。

スライドショーにしようと思うとjavascriptなども使わないといけなかったりしますが、今回のカルーセルはCSSだけでできるので簡単。さっそく作り方を解説。

作り方

index.html

<ul>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
  <li>
    <img src="sample.gif" alt="">
    <p>テキストが入るよ</p>
  </li>
</ul>

style.css

ul {
  overflow-x: auto;       /* 横幅が画面からはみ出たら横スクロールさせる */
  white-space: nowrap;
}
ul li {
  display: inline-block;  /* 要素を横並びにする */
  width: 130px;
}
ul li p {
  text-align: center;
}

基本的にはスマホ用になります。
PCの場合だと横スクロールバーが出てしまいますが、スマホなら指で横にスライドさせることができます。
このカルーセルなら、要素がはみ出ていても、スマホの画面全体がスクロールされるのではなく、カルーセルになっている個所のみが横スクロールされるのが特徴です。

まとめ

画像付きの情報を載せたり、テーブル（表など）をスクロールで見れるようにさせたりする時に使えます。
数行書くだけなので簡単に実装できるところがポイントですね。

もっとこだわった動きを入れたい場合はjavascriptを使ってスライドショーを導入するといい感じになるかも！

おそまつ！

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

先日投稿したこちらの記事。
※Vuetify 2.3.0からv-contentが非推奨になった。

Vuetifyの公式GitHubのReleaseノートからも確認できるように、
Vuetify 2.3.0からv-contentがv-mainに変更されました。
※後方互換性はあるのでv-containが使えなくなるというわけではないです。あくまでも非推奨になるということです。

ということだったので私もv-mainに変更していたのですが、なんとそのv-mainの影響で現在開発中のアプリに不具合が発生しました。。

状況を説明すると、
元々v-contentだったところをv-mainに変更して、ローカルでは何も問題なく表示がされていたのでそのまま本番にもあげたのですが、本番でアプリを確認するとレイアウトが崩れてしまっていたのです。

v-mainの情報がまだ少ないので、今現在何が原因かはまだ特定できていません。
とりあえず仕方なくv-contentに戻しました。。

また原因が判明したら、更新します。

とりあえず今はまだv-mainにしない方がいいかも。。
（Warningがいちいち出てくるのめんどくさいですが）

IEでimgにheightを指定すると…CSSで height:autoが効かないようです。
最近、imgにheightを指定するのでバグに気づきました。

解決方法

そんな場合のかんたんな解決方法を見つけました。
このようにimgタグにwidthとheightを指定した場合…

HTML

<img class="hoge" src="hoge.png" width="1200" height="800">

IE対応は min-width:1pxを指定すればOKでした。

CSS

.hoge {
width:auto;
max-width:100%;
height:auto;
min-width:1px; /*IE対策*/
}

imgタグにwidthとheightを指定する理由

imgタグにwidthとheightを指定すると読み込みスピードが早くなります。
その場合にIEのCSS指定にコツがあることを知りませんでした。

参考記事にもっと詳しいwidthとheightを指定するメリットが掲載されています。

参考URL

【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver
https://parashuto.com/rriver/development/img-size-attributes-are-back

Vuetifyとは

VuetifyとはVue.jsやNuxt.jsのプロジェクトで使用することのできるUIライブラリです。
※Vuetify

実際に私もよく使っていて、とても気に入っています。
Vuetifyの書き方は少し特殊なので慣れるまではちょっとややこしいかもしれませんが、慣れるとパパッとUIの実装ができるのでオススメです！

本題

本題のmarginやpaddingの設定ですが、
実際どんな感じで書くのかというと、こんな感じ。

index.vue

<div class="my-5" />

ん？....マイ？ - 5？

って感じですよね。

実はこれは一文字一文字に意味があります。

property

感の鋭い方はもうお分かりかもしれませんが、
最初の「m」はmarginの「m」です。

ということは...

paddingの場合は「p」と書きます。

それだけです。

direction

そして、次の「y」という文字。
これはy軸方向の「y」という意味です。
つまり上下を対象に適用させるということです。

となると、「x」は左右を対象とします。

他にも、
・「t」 Top
・「b」 Bottom
・「l」 Left
・「r」 Right
・「a」 全方向
などがあります。

---

※「-（ハイフン）」に関してはただのハイフンです。
　特に意味はありません。

size

最後の「5」という数字、これはsizeを表すもので、
「1」が4pxを表しています。

なので「5」の場合は5×4で20pxです。

つまり「my-5」は？

上下にマージンを20px適用するという意味になります！

ネガティブ margin・padding

そして個人的にめっちゃイイ！と思ったのが、
ネガティブ（マイナス）な値も設定できるという点です！

これはとても便利！！

ネガティブを設定するには、
size（数字の部分）の前に、「n」を追加します。

なので「my-n5」と書くと、
上下にネガティブマージンを20px適用するという意味になります。

最後に

少しでもVuetifyに興味を持っていただけましたでしょうか？

Vuetifyを使うと直接タグ内に書けるので、
わざわざCSSをstyleに分けて書かなくて済みますし、
コード量も肥大化しにくく且つ、開発スピードも上がるのでメリットは大きいかと思います！

また今回紹介したmarginとpadding以外にもたくさんの機能があるので、他の機能も是非見てみてください。
ある程度のことはVuetifyで再現できるかと思います。
※Vuetify

ただVuetifyも完璧ではないので、
私も基本Vuetifyで書いて、どうしてもVuetifyでは再現できないところに関してだけCSSを書いているという感じで開発しています。

ご参考になれば幸いです！

最後までご覧下さり、ありがとうございました。

containerで1024pxとかなっている時、
背景色だけいっぱいに広げたい、とか言うときに使う。

innerはcontainerと同じ幅に設定。
コンテンツの横幅は揃って、ignore~の箇所の背景色のみ画面いっぱいになる。

<div class="container">
    <div class="background-orange ignore-parent-width">
        <div class="ignore-parent-width-inner">
        </div>
    </div>
</div>

.container{
    width: 1024px;
    min-width: 1024px;
}
.background-orange{
    background-color: #FFF6F5;
}
.ignore-parent-width{
    // 親要素を無視して子要素の幅をいっぱいに広げる https://tecb.jp/blog/1517
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    .ignore-parent-width-inner{
        width: 1024px;
        min-width: 1024px;
        margin: 0 auto;
    }
}

// スマホ表示
@media (max-device-width: 480px) {
    .container{
        width: 100%;
        min-width: 100%;
    }
    .ignore-parent-width{
        // 親要素を無視して子要素の幅をいっぱいに広げる https://tecb.jp/blog/1517
        width: 100vw;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        .ignore-parent-width-inner{
            width: 100%;
            min-width: 100%;
            margin: 0 auto;
        }
    }
}

CIE L*C*h カラーモデルベースの色相環カラーピッカーを作りました。

https://luncheon.github.io/lch-color-wheel/

この記事はその経緯です。

HSL 色表現と色相変数

CSS で使える色表現の 1 つに HSL カラーモデル があります。 HSL では色相（Hue）、彩度（Saturation）、輝度（Lightness）の 3 軸で色を表現します。

色相を CSS カスタムプロパティ（変数）にすれば、彩度と輝度を固定して色相だけ変えることが簡単にできます。

.btn {
  background-color: hsl(var(--hue), 100%, 60%);
  border: 2px solid hsl(var(--hue), 100%, 40%);
}
.btn:hover {
  box-shadow: 0 0 8px hsl(var(--hue), 100%, 40%);
}

.outline {
  background: white;
  color: hsl(var(--hue), 100%, 40%);
}

.primary {
  --hue: 210;
}

.accent {
  --hue: 330;
}

<button type="button" class="btn primary">Primary</button>
<button type="button" class="btn accent">Accent</button>
<button type="button" class="btn primary outline">Primary Outline</button>
<button type="button" class="btn accent outline">Accent Outline</button>

CodePen

それで、以前、色相環を利用したカラーピッカーを作りました。彩度と明るさを固定して色相を選ぶ、あるいは色相を固定して彩度と明るさを調整するのに最適化しています。（このカラーピッカーは HSL ではなく HSV カラーモデル を採用しています。 HSL モデルのカラーピッカーは私のメンタルモデルに合いませんでした。 HSL と HSV とで色相は同じ値になるので「彩度と明るさを固定して色相を選ぶ」という目的には適います。）

https://luncheon.github.io/reinvented-color-wheel/

ところが HSL + 色相変数というアイディアは思ったほどうまくいきませんでした。

同じ輝度でも、黄色や黄緑は明るく、青や紫は暗く見えます。たとえば先ほどのボタンの例を .accent { --hue: 100; } にすると...

同じ「明るさ」には感じられないと思います。黄緑のボタンの白い文字「Accent」はコントラストが弱くて非常に読みづらくなっています。

HSL / HSV カラーモデルでは、結局は色相に合わせて輝度 / 明度も調整する必要があるのです。
色相を変えるたびに明度の調整が必要となるようでは、カラーピッカーの使い勝手としてもよろしくありません。

CIE L*C*h カラーモデル

そんな私の悩みを解決するのが CIE L*C*h カラーモデルです。 L* は明度（Lightness）、 C* は彩度（Chroma）、 h は色相（hue）を表します。というとまるで HSL や HSV と同じように聞こえますが、 CIE L*C*h 色空間は人間の知覚に合わせて設計されているそうです。私は色に詳しいわけではないので詳しい解説はできませんが、実際に利用してみると使い勝手が全然違います。
CIE L*C*h 色空間は CIE L*a*b* 色空間から軸の取り方を変えた派生です。 CIE L*C*h の解説記事はあまり見当たりませんでした。

• 色の数値化には、表色系を使用します。1-楽しく学べる知恵袋 | コニカミノルタ
  https://www.konicaminolta.jp/instruments/knowledge/color/section2/02.html
• Lab色空間 - Wikipedia
  https://ja.wikipedia.org/wiki/Lab%E8%89%B2%E7%A9%BA%E9%96%93

Wikipedia からこの記事にとって重要な部分を引用します。

RGBやCMYKとは異なり、Lab色空間は人間の視覚を近似するよう設計されている。知覚的均等性を重視しており、L成分値は人間の明度の知覚と極めて近い。したがって、カラーバランス調整を正確に行うために出力曲線を a および b の成分で表現したり、コントラストの調整のためにL成分を使ったりといった利用が可能である。

そんなわけで冒頭の話に戻るのですが、 CIE L*C*h カラーモデルベースの色相環カラーピッカーを作りました。

https://luncheon.github.io/lch-color-wheel/

CIE L*C*h カラーモデルを採用したことで、知覚的な明るさを維持したまま色相を変えられるようになりました。プライマリカラーが決まっている状態でアクセントカラーを選ぶような用途では HSL や HSV カラーモデルのカラーピッカーより活躍すると思います。

CSS で CIE L*C*h 色表現が利用可能に（いずれなるかもしれない）

CSS にも lch() 色関数が提案されています。

CSS Color Module Level 4 （日本語訳）
https://triple-underscore.github.io/css-color-ja.html

色相を CSS カスタムプロパティにすれば、彩度と明度を固定して色相だけ変えることが簡単にできるようになるかもしれません。

さらには color-adjust(peru lightness -20%); のように色を調整できるようになるかもしれません。

CSS Color Module Level 5 （日本語訳）
https://triple-underscore.github.io/css-color5-ja.html

でもこれらはまだもう少し先の話。

はじめに

HTML, JavaScript, CSSで構築された既存のサイトを、Gatsbyで再構築しています。

一般的なサイトでは、CSSの読み込みは

<link rel="stylesheet" href="style.css">

でページごとに読み込むCSSを指定できますが、Gatsbyの場合は少し特殊だったのでメモを残します。

Gatsbyでの一般的なCSSの読み込み方法

1. gatsby-browser.jsで読み込む
2. importで読み込む
3. CSSモジュールを使う

上記の1.の方法は、全ページで使用するCSSの読み込みに適しています。

2.の方法は一見ページごとに個別に読み込むかと思いきや、グローバルスタイルとして読み込まれるので全てのページに反映されてしまいます。

3.の方法は個別にCSSを指定する方法ですが、モジュール化して、要素ごとにclassNameを記述して・・・と既存コードの書き換えが面倒です。

これらの方法は、Gatsbyで推奨されている方法で、サイト高速化のためには取り組むべきことだと理解しています。
ですが、とりあえずGatsbyで動かしたいんだー、面倒なことは後から調整したいんだー！という方は以下の方法を試してみてください。

ページごとに個別にCSSを読み込む方法

結論から言うと以下の方法で、実現できます。

import React from "react"

export default () => (
       require("style.css")
)

各ページの export default の中で require で読み込むことで、
ページごとに個別にCSSを読み込むことができます。

コンポーネント化していて、ページごとに.jsファイルがないという場合は、
下記のようにページ名で場合分けしてCSSを読み込み分けすることができます。

 import React from "react"
 import { withPrefix } from "gatsby"

 export default ({location}) => (
        if (location.pathname == withPrefix ("/pageName/")){
            require("pageName.css")
         }
 )

以上、急場しのぎ的な方法ですが、お試しください。

やりたいこと

• サイトトップにアクセスしたら全画面のCSSアニメーションを表示
• リロードでも表示
• サイト内からトップアクセスした時は表示しない

実装

フロントページの<body>の直下あたりに以下のタグを追加。

header.php

<?php if(is_front_page()): ?>
<div id="enter">
    <div id="enter-obj1">
    <p><span class="line1">こ</span><span class="line2">ん</span><span class="line3">に</span><span class="line4">ち</span><span class="line5">わ</span></p>
    </div>
</div>
<?php endif; ?>

JavaScriptを追加します。
<head>内もしくは、</body>の直前に追加してください。

header.php

<?php if(is_front_page()): ?>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
<script type="text/javascript">
$(function() {
    //top animation を実行
    if (window.performance) {
        if (performance.navigation.type === 1) {
            // リロードされた
            topAnime();
        } else {
            // リロードされていない
            var ref = document.referrer; // リファラ情報を得る
            var hereHost = window.location.hostname; // 現在ページのホスト(ドメイン)名を得る

            // ホスト名が含まれるか探す正規表現を作る(大文字・小文字を区別しない)
            var sStr = "^https?://" + hereHost;
            var rExp = new RegExp( sStr, "i" );

            // リファラ文字列を判別
            if( ref.length == 0 ) {
                // リファラなしの場合
                topAnime();
            }
            else if( ref.match( rExp ) ) {
                // マッチした場合＝アクセス元が自サイト内の場合
                $('#enter').addClass('end');
            }
            else {
                // マッチしない場合＝アクセス元がサイト外の場合
                topAnime();
            }
        }
    }
    function topAnime(){
        if($('#enter').length){
            $('body').addClass('runanime');
            $('#enter p span.line1').delay(1000).queue(function(){
                $(this).addClass('run').css('opacity','1');
            });
            $('#enter p span.line2').delay(2000).queue(function(){
                $(this).addClass('run').css('opacity','1');
            });
            $('#enter p span.line3').delay(3000).queue(function(){
                $(this).addClass('run').css('opacity','1');
            });
            $('#enter p span.line4').delay(4000).queue(function(){
                $(this).addClass('run').css('opacity','1');
            });
            $('#enter p span.line5').delay(5000).queue(function(){
                $(this).addClass('run').css('opacity','1');
            });
            // アニメーションの終了処理
            $('#enter div#enter-obj1').delay(7000).queue(function(){
                $(this).addClass('outrun').css('opacity','0');
            });
            $('#enter').delay(8000).queue(function(){
                $(this).addClass('end');
                $('body').removeClass('runanime');
            });
        }
    }

});
</script>
<?php endif; ?>

トップページにアクセスした際のリファラなどを元に、アニメーションを実行する/しないを確定します。
delayの数字は、表示するパーツの数によって調整をしてください。

JavaScriptではclassを順番に追加していく処理しかしてません。細かいアニメーションはCSSで追加してください。

CSSは以下の通りに追加。

style.css

/* enter */
#enter,
#enter div{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10000;
}
body.runanime{
    position: fixed;
    overflow: hidden;
}
body{
    position: relative;
}
#enter div#enter-obj1{
    opacity: 1;
    background-color: #fff;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
#enter div#enter-obj1 p{
    text-align: center;
    padding: 0;
    margin: 0;
    font-size: 3em;
}
#enter div#enter-obj1 p span{
    display: inline-block;
    margin: 0 5px;
    opacity: 0;
}

#enter div#enter-obj1 p span.run,
.run{
    -webkit-animation: topFadeIn 2s linear 1;
            animation: topFadeIn 2s linear 1;
}
#enter div.outrun{
    -webkit-animation: topBgOut 2s linear 1;
            animation: topBgOut 2s linear 1;
}
#enter.end{
    display: none;
}
@-webkit-keyframes topFadeIn{
     0%{    opacity: 0;}
    100%{   opacity: 1;}
}
@keyframes topFadeIn{
     0%{    opacity: 0;}
    100%{   opacity: 1;}
}
@-webkit-keyframes topBgOut{
     0%{    opacity: 1;}
    100%{   opacity: 0;}
}
@keyframes topBgOut{
     0%{    opacity: 1;}
    100%{   opacity: 0;}
}

上記のアニメーションでは、文字を１文字ずつフェードインして、全部表示したらフェードアウトする形になっています。

アニメーションが表示されている間、bodyに追加するrunanimeのクラスですが、これはアニメーションの裏で表示されている画面をスクロールさせないための処理です。

サンプルは用意が難しいので割愛します。
実際に試しながら調整してみてください。

目的

• Laravelでオリジナルのcssファイルを作成しビューファイルに反映しようとしても一切されない問題を解決した話をまとめる

原因

• Laravelアプリが可動しているWebサーバがHTTPS化されていたためcssファイルの読み込み方法が異なるため読み込まれなかった。

原因と解決方法

• 下記の様にasset()で記載するとhttps環境下だとCSSファイルを読み込むことができない。

  <link rel="stylesheet" href="{{ asset('アプリ名ディレクトリ/publicディレクトリからCSSファイルまでのパス') }}">
  

• 下記の様にsecure_asset()を用いることによりhttps環境下でもセキュアを保ったままCSSを読み込むことができる。

  <link rel="stylesheet" href="{{ secure_asset('アプリ名ディレクトリ/publicディレクトリからCSSファイルまでのパス') }}">
  <!-- 少しだけ具体的に記載する -->
  <link rel="stylesheet" href="{{ secure_asset('/css/CSSファイル名') }}">
  

参考文献

• https://qiita.com/sakuraya/items/411dbc2e1e633928340e

はじめに

開発が進むにつれ、jsファイルやcssファイルは何かとファイルサイズが膨れます。
というのも過去に参照されていたが現在は使用されていないデッドコードが生まれがちだからです。

未使用のコードを削除することでファイルサイズが小さくなり読込速度の改善したり、保守性がアップが見込めます。

手順

ブラウザの開発者ツールを利用することで、どのコードが実行されていないか簡単に調べることができます。

1. 開発者ツールを開く（WindowsならCtrl＋Shift＋I、MacならCommand＋Option＋I）
2. 縦の3点リーダ を選択
3. More tools を選択
4. Coverage を選択
5. ページを再読み込み

CoverageからJSやCSSのコードの使用率がわかります。

赤いラインで表示されているコードが未使用のコードになります。
ただし、未使用だからと言って不要なコードとは限りません。

• if/else の判定により片方だけ実行されるコード
• エラーが発生した時に実行されるコード
• 特定の操作をした際に実行されるコード
• 特定の端末で表示した際に実行されるコード

など、未使用となった理由や背景を見極めた上でコードを削除しましょう。

前提

HTMLやCSSを始める前にVS Codeをマスターするのが最優先

おすすめリンク

VS Code

VS Codeについてはこちらの動画でさっと勉強するのが良いかな

Visual Studio Code入門 #01：環境設定と、VSCodeの起動方法いろいろ

Emmetめちゃ大事！これないとHTMLとCSSいまだにかけないかも(というかやりたくない)笑

以下も結構まとまってる
Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する！《VSCode実践入門》

HTMLとCSSをEmmetで書いてみる！：Visual Studio Code

VS Codeのショートカットがまとまってる！コード書く前にこっちをやる！

【Mac版】 VisualStudioCode キーボードショートカット

拡張機能大事！これないと無理ゲー!

フロントエンジニア必須の拡張機能7選

VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか)

デバッグできるようにならないとどこでNGかわからん(これはRubyとかJSのためだけど)。

Rails用で場違いですが。。VS Codeの使用方法として。。

Visual Studio CodeによるRubyのデバッグ

VS Codeの操作方法が一通りまとまってる

VSCode初心者のための、絶対覚えておきたい便利機能まとめ

HTML

このサイトみて主要なものをひたすらググってVS Codeで試す！

HTML5の主要タグ一覧

idとclassの違い

HTMLのdiv classとは？５分でわかる事例付き解説

idとnameの違い

input typeタグで、idとnameは同じ名前にしなければいけないの？

CSS

MarginとかPaddingとかの理解

これはChromeで検証ツールで試行錯誤するしかない！
見れば一髪！

CSSのwidthとheighの関係性がとても分かりやすかった。

CSSのwidth（幅）とheight（高さ）の指定方法をマスターしよう

CSSのdhisplayの概念がとても分かりやすくまとまっていた。

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

画面分割の方法

CSS入門：「display: table」を使って要素を横に並べる方法

おわりに

自分で書きたくないのでメモとしてリンクを貼った。良いサイトがあれば追記していこうと思う。