20200707のCSSに関する記事は10件です。

投稿日：2020-07-07T21:21:53+09:00

初心者によるプログラミング学習ログ 363日目

100日チャレンジの363日目

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

おはようございます
昨日の作業・やったこと⇩

●寝る直前の筋トレ5分、kindle読書 10分
●ブログ記事1記事作成
●プログラミング学習363日目 1h
・ソースツリー導入（git）

今までgitあんまり使ってなかった#駆け出しエンジニアとつながりたい #100DaysOfCode #早起きチャレンジ
— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 6, 2020

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-07T18:52:20+09:00

【javascript】クリックイベント　click 　文字色変更　文字変更 innerHTML / classList / toggle

【ゴール】

その① 文字色変化

その② 文字大きさ変化

【メリット】

■ javascript　理解度向上

【必要なもの】

■　HTML記述（ページ内容表示、文や、文字の表示）
■　CSS記述（ページの装飾、色変更等）
■　javascript記述（CSSでは実現できない動き、）

【コード】

その①文字色を変更

HTML

＊id を付与。
index.html
<button id="button">文字色が変わるよ</button>
<h2 id="text">文字色が変わるよ</h2>
CSS

＊クリックイベント後の処理
style.css
.font-color {
      color: pink;
    }
javascript

＊button id　がクリックされたらスコープ内を処理
＊toggleメソッドはクラスが存在していれば削除、なければ付与。超絶便利メソッド
script.js
const change = document.getElementById('button');

    change.addEventListener('click', () => {
     document.getElementById('text').classList.toggle('font-color');
    });
その② 文字を変更

HTML

＊その①と同じ
index.html
<button id="button">文字が変わるよ</button>
<h2 id="text">文字色が変わるよ</h2>
CSS

今回は不要

javascript

＊button id　がクリックされたらスコープ内を処理
＊innerHtmlメソッドで文字を変更
script.js
const change = document.getElementById('button');

change.addEventListener('click', () => {
  document.getElementById('text').innerHTML = '<h2>変わったね</h2>';
});
【留意点】

■アロー関数を積極的に使う。推奨の為
■javascript取得するIDを間違えないようにする
■メソッド、基本的な物を覚える。

【合わせて読みたい】

■ 【Javascript】メソッド　まとめ　基礎基本コード　メモ
https://qiita.com/tanaka-yu3/items/2438798d159fa402b1d5

■ 【アロー関数】　javascript　() => {} 　意味　一言で、入門　
https://qiita.com/tanaka-yu3/items/e16d51280f647aa19a58

■ドットインストールカリキュラム　javascript
https://dotinstall.com/lessons/basic_javascript_v4/50603

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-07T18:09:20+09:00

【Vueエンジニアおすすめ】絶対に失敗しない画像エフェクト"総まとめ２３選"(コピペOK)

こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
＊動きだけ確認したい初学者の方はJSFiddle使ってみるといいですよ

clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選

動きは下の画像のような感じになります

１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur

２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate

３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate

コードを確認する

【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

動きは下の画像のような感じになります

１. hoverで画像が半透明に？超便利なスライダーアニメーション

２. hoverで画像の色が暴れ出すスライダーアニメーション

３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション

コードを確認する

絶対失敗しないナビゲーションメニューサンプル３選

動きは下の画像のような感じになります

１. シンプルだけど洗練されたスライダーアニメーション

２. blurでぼやけながらスライドするスライダーアニメーション

３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション

コードを確認する

hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選

動きは下の画像のような感じになります

１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト

２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト

３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト

コードを確認する

CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)

動きは下の画像のような感じになります

１. 階段のように背景が現れるhoverエフェクト

２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト

３. 斜め上からスクリーンのように背景が現れるhoverエフェクト

４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト

コードを確認する

hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)

動きは下の画像のような感じになります

１. フワッと背景が現れるhoverアニメーション

２. 背景が徐々に画像全体へ広がるhoverアニメーション

３. 扉が閉まるように背景が現れるhoverアニメーション

４. 丸い背景が徐々に画像全体に広がるhoverアニメーション

コードを確認する

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-07T18:09:20+09:00

【現役Vueフロントエンジニアおすすめ】絶対に失敗しない画像エフェクト"総まとめ２３選"(コピペOK)

こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
＊動きだけ確認したい初学者の方はJSFiddle使ってみるといいですよ

clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選

動きは下の画像のような感じになります

１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur

２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate

３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate

コードを確認する

【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

動きは下の画像のような感じになります

１. hoverで画像が半透明に？超便利なスライダーアニメーション

２. hoverで画像の色が暴れ出すスライダーアニメーション

３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション

コードを確認する

絶対失敗しないナビゲーションメニューサンプル３選

動きは下の画像のような感じになります

１. シンプルだけど洗練されたスライダーアニメーション

２. blurでぼやけながらスライドするスライダーアニメーション

３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション

コードを確認する

hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選

動きは下の画像のような感じになります

１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト

２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト

３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト

コードを確認する

CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)

動きは下の画像のような感じになります

１. 階段のように背景が現れるhoverエフェクト

２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト

３. 斜め上からスクリーンのように背景が現れるhoverエフェクト

４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト

コードを確認する

hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)

動きは下の画像のような感じになります

１. フワッと背景が現れるhoverアニメーション

２. 背景が徐々に画像全体へ広がるhoverアニメーション

３. 扉が閉まるように背景が現れるhoverアニメーション

４. 丸い背景が徐々に画像全体に広がるhoverアニメーション

コードを確認する

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-07T18:09:20+09:00

【現役Vueエンジニア厳選】完全オリジナルの画像エフェクト"総まとめ２３選"(コピペOK)

こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
＊動きだけ確認したい初学者の方はJSFiddle使ってみるといいですよ

clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選

動きは下の画像のような感じになります

１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur

２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate

３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate

コードを確認する

【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

動きは下の画像のような感じになります

１. hoverで画像が半透明に？超便利なスライダーアニメーション

２. hoverで画像の色が暴れ出すスライダーアニメーション

３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション

コードを確認する

絶対失敗しないナビゲーションメニューサンプル３選

動きは下の画像のような感じになります

１. シンプルだけど洗練されたスライダーアニメーション

２. blurでぼやけながらスライドするスライダーアニメーション

３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション

コードを確認する

hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選

動きは下の画像のような感じになります

１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト

２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト

３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト

コードを確認する

CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)

動きは下の画像のような感じになります

１. 階段のように背景が現れるhoverエフェクト

２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト

３. 斜め上からスクリーンのように背景が現れるhoverエフェクト

４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト

コードを確認する

hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)

動きは下の画像のような感じになります

１. フワッと背景が現れるhoverアニメーション

２. 背景が徐々に画像全体へ広がるhoverアニメーション

３. 扉が閉まるように背景が現れるhoverアニメーション

４. 丸い背景が徐々に画像全体に広がるhoverアニメーション

コードを確認する

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-07T17:22:55+09:00

LINE風�吹き出しCSS

See the Pen line-like by ririli (@ririli) on CodePen.

吹き出しが使いたい場面って結構多いですよね。
でも実装はそんなにシンプルじゃないので画像で済ませちゃう人も多いかも。

わかってみれば意外と難しくないので挑戦してみてください。

ポイント

なんといっても下にちょっと突き出たとこ、これがやりたいわけですよね。
実装では以下が該当します。
.left:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 10px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
  width: 0;
  height: 0;
}
具体的にはborderとborder-topですね。
borderで透明な太い線をひきます。
その上にborder-topで上だけに色をつけます。

これで三角の完成です。
あとは適切な場所に配置するだけ。

...とはいかないですよね。

なんで三角になるわけ？

おそらくborder-topを指定しただけでどうして三角形になるのか疑問が出た人も多いと思います。
かくいう僕もそうでした。

もし手元に試せる環境があったら以下のcssを当ててみてください。
  border-top: 5px solid red;
  border-left: 5px solid blue;
  border-tight: 5px solid green;
  border-bottom: 5px solid yellow;
色の違う4本の線で四角形ができたでしょうか？
では線同士がぶつかる角の部分はどうなっているでしょうか？
どちらかで埋まっているのではなく色が半分ずつになっていませんか？

これがborder-topで三角になる理由です。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-07T17:14:13+09:00

IE11 と CSS Grid の 7 つの約束

はじめに

2020 年 7 月現在、私のシェア率は国内でだいたい10% 弱です。
どうか、私への対応を諦める前にそのことを覚えておいて欲しいのです。
- Internet Explorer 11

WebブラウザシェアランキングTOP10(日本国内・世界)

CSS Grid を IE11 で使用する上での注意点を確認していきます。
※ Gulp および Autoprefixer を使用した IE11 対応を前提とします。また環境構築の手法については本記事では触れないものとします。

CSS Grid が私に何を求めているのか、私がそれを理解できるように記述してほしいのです

私はモダンなプロパティをベンダープレフィックス無しで理解することができません。
CSS Grid も例外ではないため、私の友人である Autoprefixer を介してそれを理解できるように変換して欲しいのです

ひとつひとつベンダープレフィックスを付与していくのはかなり工数がかかってしまうため、本記事では Gulp と Autoprefixer によって自動での付与・変換を行なうことを前提とします。

前述したように npm および Gulp による環境構築については触れませんが、Autoprefixer のバージョンは最低限気にしておくのが良いかと思います。
すでに環境構築されている場合でも、Autoprefixer のバージョンが古いとそもそも対応ができません。

Autoprefixerが進化してCSS GridのIE11 対応がバリ楽になった（2017年〜2018年）

Autoprefixer のリリースノートを確認したところ、 2020.7.6 現在での最新バージョンは 9.8.3 ですので、本記事ではこのバージョンを使用していきます。
自動配置の仕様変更や警告の追加などが更新されているようですので、可能であれば最新版にしておくのが良いでしょう。

補足：browserlist の記述方法も確認しておきましょう

Autoprefixer 9.6 でのバージョンアップにより、ターゲットブラウザを指定する browsers オプションが非推奨となっています。
Autoprefixer の最新版を使用する場合、こちらも留意しておきましょう。
ざっくり書いておくと、「ターゲットブラウザの指定を他のツールでも共有したいので、package.json などに記述してツール間で共有する」というような内容になります。

参考記事：ハローハリネズミ - Browserslist でターゲットブラウザの設定

要素の数が決まっていない時は、おとなしく Flexbox を使用してください

私が CSS Grid に対して、他のモダンブラウザと同様の挙動でないことを知っておいてください。
要素の数がグリッドで定義されている個数を超えた場合、モダンブラウザではグリッドが自動で追加生成されるようですが、私にはできません。

挙動確認

4 行 2 列のグリッドコンテナと、内包される 10 個の子要素を用意して挙動確認を行なっていきます。
<div class="gridContainer">
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 1"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 2"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 3"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 4"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 5"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 6"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 7"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 8"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 9"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 10"></div>
</div>
Autoprefixerによる変換前
.gridContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  margin: 10px;
}

.girdItem {
  border: 1px solid #000;
}
IE11 では Autoprefixer によって以下のようなプロパティが適用されます。
Autoprefixer による変換後コード
Autoprefixerによる変換後
.gridContainer {
  display: -ms-grid;
  -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
  -ms-grid-rows: 1fr 10px 1fr;
  margin: 10px;
}

.girdItem {
  border: 1px solid #000;
}

.gridContainer > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.gridContainer > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.gridContainer > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}

.gridContainer > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}

.gridContainer > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.gridContainer > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.gridContainer > *:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}

.gridContainer > *:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}
こちらの挙動確認を行なった画面のキャプチャが以下になります。

Google Chrome

IE11

Google Chrome では、9, 10 個目の要素を配置するためのグリッドが自動生成されますが、IE11 では 8 個目までしか表示されていません。
コンパイル後の CSS を確認したところ、グリッド外の 9, 10 個目の要素には配置に関するプロパティが Autoprefixer で生成されないため、一つ目の子要素と同じ位置に重なってしまうようです。

対応

もし要素の数が定まっているのであれば、グリッドコンテナを 4 行 × 3 列に変更してしまえば解決しますが、例えば「同じコンテナを、要素数の異なる複数箇所で使用する」ということを考えてみましょう。
行数または列数が異なれば、その度に別々のグリッドコンテナを用意する必要が出てきます。

同じような要素を内包するグリッドコンテナであっても、コンテナごとに要素数が定まっていないような場合は Flexbox を使用した実装の方が柔軟に対応できるかと思います。
本当に CSS Grid を使用するべきかどうか、実装前に一度じっくり考えてみるようにしましょう。

補足：gap プロパティの挙動

gap プロパティ（旧 grid-gap プロパティ）は IE11 非対応ですので、Autoprefixer によってグリッドエリアの一つの行または列として変換されます。
上記の例でも、以下のように変換されていることが確認できます。
Autoprefixerによる変換前
.gridContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  margin: 10px;
}
Autoprefixerによる変換後
.gridContainer {
  display: -ms-grid;
  -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
  -ms-grid-rows: 1fr 10px 1fr;
  margin: 10px;
}
なお IE11 での自動配置は、上記変換後の行列数を考慮した上で -ms-grid-row および -ms-grid-column による配置を明示的に追加することで実現されているようです。

grid: true オプションが何を求めているのか、私の友人には分かりません

以前の Autoprefixer では grid: true オプションを Autoprefixer に設定することによって IE11 での自動配置を行なっていました。
しかしこのプロパティは現在 no-autoplace のエイリアスであり、廃止予定のようです。

参考記事：autoprefixerでgridを有効にしているのにIE11でレイアウトが崩れる
gulpfile.js
gulp.task("default", () => {
  return gulp.src("src/style.css")
    .pipe(autoprefixer({ grid: true })) // grid: true の設定による自動配置の設定（現在は非推奨）
    .pipe(gulp.dest("dist"));
});
対応

正しく自動配置を設定するためには grid: 'autoplace' プロパティをオプションとして設定します。
gulpfile.js
gulp.task("default", () => {
  return gulp.src("src/style.css")
    .pipe(autoprefixer({ grid: 'autoplace' })) // 現在の CSS Grid 自動配置のオプション設定
    .pipe(gulp.dest("dist"));
});
grid-template での自動配置の使用をする前に覚えて置いて欲しいのです。その記述は、自動配置では使うべきでないということを。

私の友人は grid-template での自動配置を私に伝えることはできません。

挙動確認

grid-template を使用して 4 列 2 行のグリッドコンテナを作成します。
Autoprefixerによる変換前
.gridContainer {
  display: grid;
  grid-template:
  "areaA areaB areaC areaD" 1fr
  "areaE areaF areaG areaH" 1fr /
  1fr 1fr 1fr 1fr;
  gap: 10px;
  margin: 10px;
}

.girdItem {
  border: 1px solid #000;
}
子要素に grid-area プロパティを指定しなかった場合、IE11 では以下のように変換されます。
Autoprefixerによる変換後
.gridContainer {
  display: -ms-grid;
  -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
  -ms-grid-rows: 1fr 10px 1fr;
  margin: 10px;
}
グリッドコンテナの変換はうまくいっているようですが、この記述では子要素の自動配置が行われません。
また、以下のようなエラーがコンソールに出力されます。
gulp-postcss: css/top.css
autoprefixer: xxx/top.css:16:3: Can not find grid areas: areaA, areaB, areaC, areaD, areaE, areaF, areaG, areaH
「グリッドコンテナでエリアが指定されているのに使われていないよ！」ということのようです。
こちらのエラーは、. を使用してエリアを指定することで回避できます（MDN のサンプルで使用されており、grid-template で明示的にエリアを指定しない方法のようです）が、このエラー対策をしたところで結局子要素の自動配置までは行われません。
.gridContainer {
  display: grid;
  grid-template:
  ". . . ." 1fr
  ". . . ." 1fr /
  1fr 1fr 1fr 1fr;
  gap: 10px;
  margin: 10px;
}
対応

自動配置を前提として CSS Grid を使用する場合、grid-template は使用しない方が良さそうです。
grid-template-columns および grid-template-rows による記述を行いましょう。

CSS Grid の行と列を、必ずどちらも記述してください

私が言うことを聞かないだとか、頑固だとか、怠けているからといって叱る前に、私が何故その記述を理解できないか気づいて下さい。もしかしたら、記法に問題があるかもしれないし、私の友人が変換できていないのかもしれない。

Autoprefixer 9.4 でのバージョンアップ以降の自動配置機能を使用するには、グリッドコンテナの宣言時に行と列の両方を定義する必要があります。

挙動確認
Autoprefixerによる変換前
.gridContainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 10px;
}
Autoprefixerによる変換後
.gridContainer {
  display: -ms-grid;
  -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
  margin: 10px;
}
こちらもコンテナの変換はうまくいっているようですが、子要素の自動配置は行われません。
また、片方のみの記述でコンパイルを行なった場合 Autoprefixer 9.8.3 では以下のようなエラーが出力されます。
gulp-postcss: css/top.css
autoprefixer: xxx/top.css:16:3: Autoplacement does not work without grid-template-rows property
Autoprefixer 9.4 のリリースノートでも、以下のような記載があります。

In order to use the new autoplacement feature, you must define both rows and columns when declaring the grid template.

行と列の定義は同じ宣言ブロック内に記述してください

あなたにとって良い CSS Grid の扱い方でも、方法によっては私には決して伝わりません。

挙動確認

同じようなコンテンツを内包し、行数の異なるグリッド（例えば 2 行 3 列、2 行 3 列、2 行 4 列の 3 パターン）があったと考えます。
<div class="gridContainer-2x2">
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 1"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 2"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 3"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 4"></div>
</div>

<div class="gridContainer-3x2">
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 1"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 2"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 3"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 4"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 5"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 6"></div>
</div>

<div class="gridContainer-4x2">
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 1"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 2"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 3"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 4"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 5"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 6"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 7"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 8"></div>
</div>
『要素の数が決まっていない時は、おとなしく Flexbox を使用してください。』で述べたように、IE11 では要素数がグリッドコンテナからはみ出た場合にグリッドコンテナの自動生成が行われません。
一つ一つ別々のコンテナを記述していくと下記のようになります。
.gridContainer-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  margin: 10px;
  text-align: center;
}

.gridContainer-3x2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  margin: 10px;
  text-align: center;
}

.gridContainer-4x2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  margin: 10px;
  text-align: center;
}
同じような記述が多くなってしまい、追加や変更のたびに全て書き換えなければ行けないのは少し手間です。
grid-template-columns と grid-template-rows を切り離し、以下のようにリファクタリングしたとします。
<div class="gridContainer -col2 -row2">
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 1"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 2"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 3"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 4"></div>
</div>

<div class="gridContainer -col3 -row2">
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 1"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 2"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 3"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 4"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 5"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 6"></div>
</div>

<div class="gridContainer -col4 -row2">
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 1"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 2"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 3"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 4"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 5"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 6"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 7"></div>
  <div class="girdItem"><img src="/img/doggo.png" alt="イッヌ 8"></div>
</div>
Autoprefixerによる変換前
.gridContainer {
  display: grid;
  gap: 10px;
  margin: 10px;
  text-align: center;

  &.-col2 {
    grid-template-columns: repeat(2, 1fr);
  }

  &.-col3 {
    grid-template-columns: repeat(3, 1fr);
  }

  &.-col4 {
    grid-template-columns: repeat(4, 1fr);
  }

  &.-row2 {
    grid-template-rows: repeat(2, 1fr);
  }
}
共通部分が gridContainer にまとまり、SCSS での記述はスッキリした気がしますが、残念ながらこの記述では IE11 での自動配置は行なわれません。
Autoprefixerによる変換後
.gridContainer {
  display: -ms-grid;
  display: grid;
  gap: 10px;
  margin: 10px;
  text-align: center;
}

.gridContainer.-col2 {
  -ms-grid-columns: (1fr)[2];
  grid-template-columns: repeat(2, 1fr);
}

.gridContainer.-col3 {
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
}

.gridContainer.-col4 {
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
}

.gridContainer.-row2 {
  -ms-grid-rows: (1fr)[2];
  grid-template-rows: repeat(2, 1fr);
}
対応

Autoprefixer が自動配置に対応するためには、同じ宣言ブロック内で grid-template-columns と grid-template-rows が定義されている必要があるようです。
また、 gap プロパティを使用する場合は『補足：gap プロパティの挙動』で記述しているような振る舞いとなりますので、こちらも同じ宣言ブロック内に記述しておく必要があります。
正直なところあまり綺麗な書き方だとは思えませんが、以下のようにリファクタリングを行います。
Autoprefixerによる変換前
.gridContainer {
  display: grid;
  margin: 10px;
  text-align: center;

  &.-col2.-row2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
  }

  &.-col3.-row2 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
  }

  &.-col4.-row2 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
  }
}
この記述では Autoprefixer による IE11 向けグリッドの再生成、および自動配置が行なわれます。
Autoprefixer による変換後コード
Autoprefixerによる変換後
.gridContainer {
  display: -ms-grid;
  display: grid;
  margin: 10px;
  text-align: center;
}

.gridContainer.-col2.-row2 {
  -ms-grid-columns: 1fr 10px 1fr;
  -ms-grid-rows: 1fr 10px 1fr;
}

.gridContainer.-col2.-row2 > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.gridContainer.-col2.-row2 > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.gridContainer.-col2.-row2 > *:nth-child(3) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.gridContainer.-col2.-row2 > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.gridContainer.-col3.-row2 {
  -ms-grid-columns: 1fr 10px 1fr 10px 1fr;
  -ms-grid-rows: 1fr 10px 1fr;
}

.gridContainer.-col3.-row2 > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.gridContainer.-col3.-row2 > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.gridContainer.-col3.-row2 > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}

.gridContainer.-col3.-row2 > *:nth-child(4) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.gridContainer.-col3.-row2 > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.gridContainer.-col3.-row2 > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}

.gridContainer.-col4.-row2 {
  -ms-grid-columns: 1fr 10px 1fr 10px 1fr 10px 1fr;
  -ms-grid-rows: 1fr 10px 1fr;
}

.gridContainer.-col4.-row2 > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

.gridContainer.-col4.-row2 > *:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
}

.gridContainer.-col4.-row2 > *:nth-child(3) {
  -ms-grid-row: 1;
  -ms-grid-column: 5;
}

.gridContainer.-col4.-row2 > *:nth-child(4) {
  -ms-grid-row: 1;
  -ms-grid-column: 7;
}

.gridContainer.-col4.-row2 > *:nth-child(5) {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
}

.gridContainer.-col4.-row2 > *:nth-child(6) {
  -ms-grid-row: 3;
  -ms-grid-column: 3;
}

.gridContainer.-col4.-row2 > *:nth-child(7) {
  -ms-grid-row: 3;
  -ms-grid-column: 5;
}

.gridContainer.-col4.-row2 > *:nth-child(8) {
  -ms-grid-row: 3;
  -ms-grid-column: 7;
}
最後のその時まで、できるだけ IE11 対応をして欲しいのです

このようなことは言わないで下さい。
｢もう見てはいられない。｣｢居たたまれない。｣などと。
あなたが IE11 対応をしてくれるから、最後の日までコンテンツを多くの人に届けることができるのです。

忘れないで下さい、私は生涯 IE11 ユーザーを一番愛しているのです。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-07T10:08:18+09:00

flex box 基礎

レイアウトを整えるにはfloatやmargin:0 auto;を使っていましたが、Flexboxがとても便利だったので備忘録とて投稿します。

参考>https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

Flexboxの利点

flexboxとは、『簡単にいい感じのレイアウトにですることができるcssの仕組み』
floatやmargin:0 auto;と違った利点があります。

　　・複雑な内容を上下左右に簡単にレイアウト可能
　　・高さが消えず、clearfixが不要
　　・HTMLソースはそのままに、CSSのみで順序を入れ替え可能
　　・中央寄せ、均等分布などの画像ソフトで行なうような整列をHTML上で簡単に実現可能
　　・親や子のサイズが拡大縮小しても、その空間に応じて柔軟性高くレイアウトが可変する

などなど

Flexboxの注意点

　　・古いブラウザだと非対応
　　・IEでは最新版でも挙動がおかしい場合がある

FlexコンテナーとFlexアイテム

Flexレイアウトは大きく分けて2種類の要素に分かれており、それぞれ設定できるプロパティが異なります。

Flexコンテナー

Flexレイアウトを行うための親の箱です。下例で紹介しますがdisplay:flexと設定することでFlexコンテナーになります。

Flexアイテム

Flexコンテナー直下の要素は全て自動的にFlexアイテムとなります。
※Flexアイテム内に更にdivが含まれるなど、入れ子になっているアイテムはFlexアイテムとはなりません。

基本のflexレイアウト
html
<div class="flex">　/* flexコンテナー */
    <div>1</div>　/* flexアイテム */
    <div>2</div>　/* flexアイテム */
    <div>3</div>　/* flexアイテム */
</div>
css
.flex {
    background-color: grey;
    display:flex;
}
.flex > div {
    background-color: white;
    margin: 10px 10px;
}
すると
こんな感じ

これの親要素（.flex)のCSSにdisplay:flex;を追加します
css
.flex {
    background-color: grey;
    display:flex;/* 追加 */
}
.flex > div {
    background-color: white;
    margin: 10px 10px;
}
これだけで、簡単に横並びのレイアウトを作ることができました。

さらに追加します。
css
.flex {
    background-color: grey;
    display:flex;
    justify-content: center;/* 追加　*/
    align-items: center;/* 追加 */

}
.flex > div {
    ~省略〜
}
こんな感じで簡単にレイアウトを変更できます。

まとめ

便利なFlexboxのおかげでのおかげで思い通りのレイアウトが格段にやりやすくなりました。
この記事で紹介できなかったプロパティがまだまだ沢山あるので、また別記事で書きたいと思います。

ゲームでflexboxを学べるのでおすすめ
https://flexboxfroggy.com/#ja

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-07T08:46:33+09:00

TECH CAMP　1日目

体育会系からの未経験エンジニアを目指し、テックキャンプへ通うことにしました。

今までパソコンすらほとんど触ることもなかった自分が大丈夫なのか。と何度も考えましたが、最後は勢いで決めました。

何事も挑戦しないと始まらないと思いまして。（返金保証あるから、最悪なんとかなると思ってましたw）

そんなこんなで昨日からついにスタートしました。

ここでは、スクールでの流れや学んだことなどを発信していければと思います。

スクールに通うことを迷われている方などの参考になれば幸いです。

【1日目】
キックオフ…パソコンの設定や学び方を、専用サイトにて学んでいきます。（オンライン）
↓
チームMTG…同期にてチーム作成が自動で行われ、メンターとチームでの顔合わせを行い
　　　　　今後の学び方や質疑応答
↓
ひたすらカリキュラム…ただやるだけ。ひたすら。

こんな感じでした。

元々は教室での参加予定でしたが、コロナの影響により全てオンラインとなりました。

教室は使えるらしいですが、使える曜日が決められます。

ですが、教室を利用したとしてもメンターへの質問はオンラインのみなので、教室利用のメリットは何も有りません。

綺麗な教室と、少しいい椅子があるだけらしいです。w

僕は、短期集中転職を選択したので

平日の,10時〜22時まで学びます。

カリキュラムも本当にガッツリ入っています。

とりあえず

これから、10週間頑張りますw

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-07T00:26:02+09:00

【初心者でもわかる】cssでよく使われる単位は「px, %, vw, vh」のこの4種類だけ！

どうも、7noteです。今回は4種類の単位の話していきます。

CSSでは、次の4つの単位がよく使われます。

px

%

vw

vh

それぞれ解説していきます。

px（ピクセル）

使用例
style.css
div {
    width: 1000px;
    height: 500px;
    font-size: 16px;
}
pxの特徴は、直感的でわかりやすいところ。
パソコンの画面の大きさはpx（ピクセル）で表されます。
よくパソコンのモニターなどで、1920×1280などの表記みたことないでしょうか？これは横幅1920pxで縦幅が1280pxと言うことになります。

「width: 1000px;」なら、横幅を1000pxにしなさい。と言う意味です。

注意！

ピクセルの最小単位は「1px」です。
ブラウザでは基本的に0.5pxなどの指定はできません。
いや、指定はできるんだけど、効かないブラウザがあるので普通は指定しません。

%（パーセント）

使用例
style.css
div {
    margin: 0 5%;
    padding: 5%;
    top: 30%
}
%の特徴は親要素の横幅分を100%とした時の割合で表される。
例えば親要素の横幅が500pxだとして、中の子要素にwidth: 60%;を指定すると、横幅は300pxになります。

vw,vh（ブイダブリュー,ブイエイチ）

使用例
style.css
div {
    right: 10vw;
    width: 100vw;
}
vwとvh、はそれぞれ「viewport width」「viewport height」の略です。
pcサイトを作るときにも使われますが、どちらかと言うとスマホ用のページを作成するときによく使うことが多いです。
例えば、「width: 100vw;」を指定すれば、「画面幅と同じ横幅」になります。
ウィンドウサイズの横幅いっぱいが100vw。縦幅いっぱいが100vhになります。
「10vw;」を指定すれば、それは画面サイズの1/10サイズになります。
スマホでは画面の大きさが違うので、vwなどで計算してコーディングすることで、どのデバイスでみても綺麗な見た目になるように設計されています。

まとめ

他にもvminとか、vmaxもあるけど、覚えてなくてもそんなに困らないから最初は覚えなくて大丈夫！
大手企業のサイトとかは、この単位の使い方がとても綺麗に作られていることが多いので参考にしてみるととても勉強になりますよ！

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

　 Tweet
Qiitaで続きを読む

20200707のCSSに関する記事は10件です。

初心者によるプログラミング学習ログ 363日目

100日チャレンジの363日目

【javascript】 クリックイベント click 文字色変更 文字変更 innerHTML / classList / toggle

【ゴール】

その① 文字色変化

その② 文字大きさ変化

【メリット】

【必要なもの】

【コード】

その①文字色を変更

HTML

CSS

javascript

その② 文字を変更

HTML

CSS

javascript

【留意点】

【合わせて読みたい】

【Vueエンジニアおすすめ】絶対に失敗しない画像エフェクト"総まとめ２３選"(コピペOK)

clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選

１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur

２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate

３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate

コードを確認する

【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

１. hoverで画像が半透明に？超便利なスライダーアニメーション

２. hoverで画像の色が暴れ出すスライダーアニメーション

３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション

コードを確認する

絶対失敗しないナビゲーションメニューサンプル３選

１. シンプルだけど洗練されたスライダーアニメーション

２. blurでぼやけながらスライドするスライダーアニメーション

３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション

コードを確認する

hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選

１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト

２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト

３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト

コードを確認する

CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)

１. 階段のように背景が現れるhoverエフェクト

２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト

３. 斜め上からスクリーンのように背景が現れるhoverエフェクト

４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト

コードを確認する

hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)

１. フワッと背景が現れるhoverアニメーション

２. 背景が徐々に画像全体へ広がるhoverアニメーション

３. 扉が閉まるように背景が現れるhoverアニメーション

４. 丸い背景が徐々に画像全体に広がるhoverアニメーション

コードを確認する

【現役Vueフロントエンジニアおすすめ】絶対に失敗しない画像エフェクト"総まとめ２３選"(コピペOK)

clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選

１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur

２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate

３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate

コードを確認する

【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

１. hoverで画像が半透明に？超便利なスライダーアニメーション

２. hoverで画像の色が暴れ出すスライダーアニメーション

３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション

コードを確認する

絶対失敗しないナビゲーションメニューサンプル３選

１. シンプルだけど洗練されたスライダーアニメーション

２. blurでぼやけながらスライドするスライダーアニメーション

３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション

コードを確認する

hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選

１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト

２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト

３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト

コードを確認する

CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)

１. 階段のように背景が現れるhoverエフェクト

２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト

３. 斜め上からスクリーンのように背景が現れるhoverエフェクト

４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト

コードを確認する

【javascript】クリックイベント　click 　文字色変更　文字変更 innerHTML / classList / toggle

`grid: true` オプションが何を求めているのか、私の友人には分かりません

`grid-template` での自動配置の使用をする前に覚えて置いて欲しいのです。その記述は、自動配置では使うべきでないということを。

TECH CAMP　1日目