20210322のCSSに関する記事は5件です。

投稿日：2021-03-22T18:57:34+09:00

Vue.js~オブジェクト（ドラえもん）~

https://qiita.com/akari_0618/items/36ba2fc4dee783def482
前回の記事でのオブジェクトについて触れていきたいと思います。

簡単に言うとオブジェクトとは物体なのですが、わけわからないと思うのでここではドラえもんという作品を作るということにしときます。
ということで最初にいきなりオブジェクトに突っ込むと詰むので、まずは周りから攻めていきましょう。
ドラえもんの登場人物で考えて行きましょう。

クラス

これは設計図のです。難しいことは考えずにもう設計図だと思ってください！
しずかちゃんとかのび太くんのプロフィール用紙のようなものです。

プロバティ

これはCSSを触っていると馴染みがあると思います。要は、１つ１の説明のようなものです。
ドラえもんだとわかりにくいので、のび太くんたちで例えます。
のび太くんたちの出身地、通ってる学校、学年などをかきます。ある程度共通項目があるので、それをかきます。

メゾット

行動のことです。
何をするのか、特技はなにか、好物はなにかなどですね

これが、のび太くんたちの共通項目です。
ここから一人ひとりの設計図を作っていきます。

そして共通のクラスをあたしく作ったクラスに受け継ぐことを『継承』と言います！！

新たにクラスを作ったあとに、プロバティを詳細に記載していきます。
のび太くん▶　＜プロバティ＞
　　　　　　出身地：東京　学校：小学校　学年：５年生
　　　　　　＜メソッド＞
　　　　　　何をするのか：昼寝　特技：あやとり　好物：カレーライス
　　　　　　のび太くんはジャイアンにいじめられて泣きますが、帰ってきたドラえもんみたいにたまに自分の力でなんとかすることもあるの　　
　　　　　　ので、ここはあまり変えたくないなってときには『カプセル化』します。
これを、登場人物順に作っていく感じです。

共通項目を作ることにより、たまには出来杉君入れようよってなっても継承するだけって感じで改修しやすくなりますよね！?
また話が進んでいくうちにのび太くんたちが社会人になる場合もあるのでその場合に設定を変える場合にオブジェクトで書くと楽だよってことですね。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-22T16:51:14+09:00

Vue.jsとは？？

今回は、Vue．jsについて学習していきたいと思います。
Vue.jsとは、フロントエンドで使われる言語です。Javascriptのフレームワークになります。
HTMLとCSSで書いたあとに、動きを付けることができます。
フロントエンドではよく使われる言語のようです。
他にも、Javascriptのフレームワークはたくさんあり、用途ごとに使い分けて行きます。
また、Vue.jsには更にフレームワークが存在するのですが、ここでは割愛させていただきます。

Vue.jsを使うメリット

Vue.jsを使うメリットは、いくつかあります。
①HTMLとCSS
②Javascriptの知識があれば割とすんなり入ってくる。
③DOMがを自動的処理してくれる。（JsからHTMLとCSSのデータを取得してくれる）
です。

導入の仕方

コマンドを使ったりすることは特にないですが
HTMLとVue自体にお決まりのような記述内容があります。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js practice</title>
</head>
<body>
  <div id="app">
    {{　message }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  <script src="script/script.js"></script>
</body>
</html>
script.js
var app = new Vue({
  el: '#app',
  data: {
    message: 'こんにちわ！'
  }
})
上記が主なVue.jsの雛形となっています。
ブラウザで表示すると以下のようになります。

HTML側からのVue.js

① Vue Devtools
これを使うことによりVueアプリケーションのバグを簡単に見つけることができるため、インストールしとくことをおすすめします。
HTMLでは以下のように記述します。bodyタグ一番最後に入力します。
また、その下にJsフォルダとそのファイルを読み込んでくれるように記述します。
"https://cdn.jsdelivr.net/npm/vue@2.6.12"
②divタグ
後で記述しますが、これは、Vue.jsでインスタンスの展開はここだよ〜って意味です。
で、divタグの中に入れてほしい単語などを記述します。
UIの領域になります。Ul/UXについては後ほど学習していきます。

JS側からの実装

①var
一行目にVarという記述がみられますね。これは、Vueの中核。これがなければそもそも動きません。心臓です。
ちなみにVarとはJsでの変数の宣言の場合に使われます。
②data
これはオブジェクト、配列の指定になります。詳しくは後に学習します。

以上がVue.jsを使うときに主に記入する内容になっています。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-22T16:19:58+09:00

Grid LayoutのIE向けベンダープレフィックスをAutoprefixerに任せるなら「自動配置」に注意する

はじめに

CSSベンダープレフィックスは手打ちでやろうとすると割と厄介ですが、Autoprefixerは自動でこのベンダープレフィックスを付与してくれるため、コーディング量を少なくしメンテナンス性も高めることができるとても便利なものです。

しかし、Autoprefixerの挙動を理解していないと、IEと従来版Edge対応時に「自動配置」に振り回されるかもしれないので備忘録を残します。
決して、Autoprefixerが悪いという話ではなく、使うときはここに気をつけようという趣旨になります。

なお、Autoprefixerの導入やCSS Grid Layoutの詳しい使い方等については、本記事では扱いません。

CSS Grid Layoutについては以下の記事がとても参考になると思います。
CSS Grid Layout を極める！（基礎編）
本記事でもこの記事の例として出ているレイアウトを元に進めていきます。

(Autoprefixer version: 10.2.5)

結論

Grid Layoutでグリッドを手動配置し、Autoprefixerで-ms-ベンダープレフィックスをつけるときは、エリア名をつけて配置する

本当にGridでないといけないのか再考する

CSS Grid LayoutのIEベンダープレフィックス

CSS Grid Layoutは縦横の2次元レイアウトを簡単に作成できる便利なCSSの機能です。

Can I Useによると、IEでのサポートはこんな感じ。

Partial support with prefix: -ms-

-ms-というベンダープレフィックスを使えば、一部使用できます。
Partial supportとは古いバージョンのgridには対応してるよーという意味とのこと。

Autoprefixerでgridに自動で-ms-プレフィックスを付与する

Autoprefixerのgridのプレフィックスオプションを有効にする

※筆者の環境ではgulpを導入しているため、gulpでの説明となります。

Autoprefixerでは、gridのIE向けベンダープレフィックスはデフォルトで無効になっています。
まず、それを有効にする必要があるので、grid: 'autoplace'を指定します。
公式Readmeに付け足し
gulp.task('autoprefixer', () => {
  const autoprefixer = require('autoprefixer')
  const sourcemaps = require('gulp-sourcemaps')
  const postcss = require('gulp-postcss')

  return gulp.src('./src/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([ autoprefixer({ grid: 'autoplace' }) ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dest'))
})
なぜデフォルト無効なのかについてはReadmeで言及されており、

Autoprefixer can be used to translate modern CSS Grid syntax into IE 10 and IE 11 syntax, but this polyfill will not work in 100% of cases. This is why it is disabled by default.

今のCSS Gridの記法をIE用に変換するpolyfillが完璧ではないため、とのことです。

そもそもIE対応が必要な上、Grid Layoutを使用する時は、明確な目的がある場合に絞るべきでしょう。

CSS Grid Layoutを適用する

ここでは、例えば以下のようなレイアウトを実現したいとします。

以下のHTMLにGrid Layoutを当てていきます。
grid_sample.html
<div class="bl_grid">
  <div class="bl_grid_item">A</div>
  <div class="bl_grid_item">B</div>
  <div class="bl_grid_item">C</div>
</div>
必ず指定するのはもちろんdisplay: grid;です。
また、幅と高さも指定してしまいます。
style.css
.bl_grid {
  display: grid;
  grid-template-rows: 100px 50px;
  grid-template-columns: 100px 1fr;
}
問題はここからです。

今回は自動配置ではなく、以下のように配置を指定する必要があります。
A|B
A|C
方法は2つあります。

grid-rowとgrid-columnで行列番号を指定する

エリアに名前をつけて指定する

配置指定：行列番号指定

では、まず1つ目の方法でやってみます。
style.css
.bl_grid {
  display: grid;
  grid-template-rows: 100px 50px;
  grid-template-columns: 100px 1fr;
}

.bl_grid_item:first-child {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}

.bl_grid_item:nth-child(2) {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

.bl_grid_item:nth-child(3) {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}
いよいよ、Autoprefixerの出番です。
これでAutoprefixerを走らせてみると、以下のように出力されます。
dest/style.css
.bl_grid {
  display: -ms-grid;
  display: grid;

  -ms-grid-rows: 100px 50px;
  grid-template-rows: 100px 50px;
  -ms-grid-columns: 100px 1fr;
  grid-template-columns: 100px 1fr;
}

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

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

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

.bl_grid > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}

.bl_grid_item:first-child {
  -ms-grid-row: 1; 
  -ms-grid-row-span: 2; 
  grid-row: 1 / 3;

  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}

.bl_grid_item:nth-child(2) {
  -ms-grid-row: 1; 
  -ms-grid-row-span: 1; 
  grid-row: 1 / 2;

  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}

.bl_grid_item:nth-child(3) {
  -ms-grid-row: 2; 
  -ms-grid-row-span: 1; 
  grid-row: 2 / 3;

  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2 / 3;
}
全体的に-ms-が付与されました。

.bl_grid_item:first-childの部分を見てみます。
.bl_grid_item:first-child {
  -ms-grid-row: 1; 
  -ms-grid-row-span: 2; 
  grid-row: 1 / 3;

  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1 / 2;
}
-ms-grid-row-spanが指定していなかったオプションですが、そのグリッドエリアをどれくらい引き伸ばすかを指定することが出来ます。
-ms-grid-row-spanと-ms-grid-column-spanはIEと従来版Edgeにのみ存在するオプションで、他のブラウザではgrid-row: 1 span 2;のように指定することで同じ効果が得られます。

さて、いい感じに指定できたように見えますが、実はこれ、うまく機能しませず、↓こうなります。（AとCが重なっている）

なぜならば、以下の記述が追加されているためです。
自動追加された部分
.bl_grid > *:nth-child(1) {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
}

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

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

.bl_grid > *:nth-child(4) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
}
なんぞこれ。

コードを読むと、.bl_gridの子要素を左上から順番に4つ並べているようです。
これはAutoprefixerのIEのグリッド自動配置機能によるものです。

これは、先程指定したオプションのgrid: 'autoplace'によって有効になり、grid-template-rowsとgrid-template-columnsが指定されているときに自動配置を行うという機能になります。

この機能によって自分で書いた記述ではなく自動追加された方が参照されるので、意図した配置になりません。（下に自分が記述したほうが優先されない理由は、CSSの優先順位によるものです。）

Autoprefixerのオプション/* autoprefixer grid: no-autoplace */をグリッドで指定して、自動配置を無効にすることで回避できます。
.bl_grid {
  /* autoprefixer grid: no-autoplace */
  display: grid;
  grid-template-rows: 100px 50px;
  grid-template-columns: 100px 1fr;
}
しかし、CSS内にAutoprefixerのオプションを記述するのはあまりスマートではない気がしてしまいます。

配置指定：【推奨】エリア名指定

Readmeにも以下のように書いてあります。

If manual cell placement is required, we recommend using grid-template or grid-template-areas
訳：手動でセルを配置する場合は、grid-templateもしくはgrid-template-areasの使用を推奨します。

また、

If grid-template or grid-template-areas has been set, Autoprefixer will use area based cell placement instead.
訳：grid-templateかgrid-template-areasが設定されている場合、エリアに基づくセル配置を行います。

ということで、手動で配置したい場合は大人しくエリアに名前をつけて指定するほうがベターでしょう。

幅と高さは指定していましたので、grid-template-areasを使用してみます。
エリア名指定
.bl_grid {
  display: grid;
  grid-template-rows: 100px 50px;
  grid-template-columns: 100px 1fr;
  grid-template-areas:
  'gridA gridB'
  'gridA gridC';
}

.bl_grid_item:first-child {
  grid-area: gridA;
}

.bl_grid_item:nth-child(2) {
  grid-area: gridB;
}

.bl_grid_item:nth-child(3) {
  grid-area: gridC;
}
もしくは、短縮プロパティgrid-templateを用いると少し短く記述することが出来ます。
エリア名指定（短縮プロパティ）
.bl_grid {
  display: grid;
  grid-template: 
    'gridA gridB' 100px
    'gridA gridC' 50px
    / 100px 1fr;
}

.bl_grid_item:first-child {
  grid-area: gridA;
}

.bl_grid_item:nth-child(2) {
  grid-area: gridB;
}

.bl_grid_item:nth-child(3) {
  grid-area: gridC;
}
さて、Autoprefixerくんを走らせると、、、
dest/style.css
.bl_grid {
  display: -ms-grid;
  display: grid;

  -ms-grid-rows: 100px 50px;
  grid-template-rows: 100px 50px;
  -ms-grid-columns: 100px 1fr;
  grid-template-columns: 100px 1fr;
  grid-template-areas:
    "gridA gridB"
    "gridA gridC";
}

.bl_grid_item:first-child {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 1;

  grid-area: gridA;
}

.bl_grid_item:nth-child(2) {
  -ms-grid-row: 1;
  -ms-grid-column: 2;

  grid-area: gridB;
}

.bl_grid_item:nth-child(3) {
  -ms-grid-row: 2;
  -ms-grid-column: 2;

  grid-area: gridC;
}
自動配置の部分がまるっとなくなりました。

grid-template-areasやgrid-areaにプレフィックスがありませんが、IEと従来版Edgeにはないので正常な動きです。
代わりに-ms-grid-row、-ms-grid-column、-ms-grid-row-span、-ms-grid-column-spanで実現しています。
ここを自動でやってくれるのはやっぱり便利ですね。

まとめ

Grid Layoutを使うときは、今後はエリアに名前をつける方で実装しようと思います。

grid内のアイテムもclassのnth-childで指定していたので今回問題に気づきましたが、idで指定していればそちらが優先されて気付かなかったということもあり得たかもしれません。（実証していませんが）

このようなプラグインは便利ですが、ちゃんとReadmeを読んで挙動を確認して、過信しすぎず出力されたものをちゃんと確認しようという学びになりました。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-22T13:14:10+09:00

疑似要素でつくったチェックボックスにブラウザ準拠のフォーカスを当てる

はじめに

疑似要素を使用してチェックボックスを作った際に、ブラウザ準拠のフォーカスを当てたかったのですが、どうしようか…と少々苦戦したので備忘録として残すために記事にしました。（既出ネタだったらすいません）
また、元々は先輩がラジオボタンで似たようなことをしてたのを思い出し、それをチェックボックス版にしました。
なので0から私のアイディアという訳ではないです。（土下座）

結論

先に結論書いちゃいます。

疑似要素の下に普通のチェックボックス（input要素）置いちゃえ

以上です！

どういうこと？

では簡単に説明します。
の前に、カスタムチェックボックスを作成します。

事前準備

適当なinput要素、labelを用意。
<div class="checkbox-group">
  <input type="checkbox" id="check1" class="checkbox">
  <label for="check1" class="checkbox-label">チェック1</label>
</div>
すると上記のようなチェックボックスができるかと思います。

では上記に以下のスタイルを当てます。
.checkbox {
  display: none;
}

.checkbox-label {
  padding-left: 28px;
  position: relative;
}

.checkbox-label::before {
  content: "";
  width: 20px;
  height: 20px;
  border: solid 2px #b0c4de;
  background-color: #FFF;
  border-radius: 4px;
  position: absolute;
  top: 0;
  left: 0;
}

/* チェック済み */
.checkbox:checked + .checkbox-label::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background-color: #b0c4de;
  position: absolute;
  top: 4px;
  left: 4px;
}
すると

このようなチェックボックスができます。
ちなみにチェック済みの場合は…

こんな感じになります。

ここまでは、自分の好みのカスタムチェックボックスを作っていただいて大丈夫です。

考え方

では考え方ですが、文章は苦手なので、図で説明します。

（字が汚いのは申し訳ないです…ｗｗ）
…~~図でもわかりにくい説？~~

事前準備としてカスタムチェックボックスを作成しましたが、その際にinput要素をdisplay:none;なりで非表示にするかと思います。
（実際に上記でもそのようにしています。）

ただそうするとフォーカスが当たらなくなってしまうので、
非表示にはせず、カスタムチェックボックスの真下に本来のチェックボックスを隠してやります。
そうすることで、あたかも疑似要素にフォーカスが合っているかのように見せています。

ということでスタイルは以下のようになります。
.checkbox {
/*   display: none; */
  outline-offset: 8px;
}

.checkbox-label {
/*   padding-left: 28px; */
  position: relative;
}

.checkbox-label::before {
  content: "";
  width: 20px;
  height: 20px;
  border: solid 2px #b0c4de;
  background-color: #FFF;
  border-radius: 4px;
  position: absolute;
  top: -1px;
  left: -27px;
}

/* チェック済み */
.checkbox:checked + .checkbox-label::after {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 2px;
  background-color: #b0c4de;
  position: absolute;
  top: 3px;
  left: -23px;
}
したことは.checkboxクラスのdisplay: none;を削除、
outline-offset: 8px;を擬似要素で隠れないように調整、
疑似要素の位置を調整くらいでしょうか。。

すると上記のようにフォーカスが当たるようになりました。
input要素自体を非表示にしていないので、スペースキーでチェックを入れたり、外したりも可能です！

考え方さえ分かってしまえば特に難しいことはしていないので、簡単だと思います。

まとめ

結論として、input要素を非表示にせずに、その上に擬似要素を置いてやればフォーカスが当たるようになります。
他に良き方法があったら教えていただきたいです。

　 Tweet
Qiitaで続きを読む

投稿日：2021-03-22T08:37:48+09:00

要素の位置の指定について

要素を任意の位置に配置する方法について記事を書きたいと思います。

要素の配置方法

■positionプロパティ
positionプロパティとは指定した要素の配置方法を決めることができるプロパティ。

値との組み合わせ説明

position: relative; 現在の位置を基準に相対的な位置を決める

position: absolute; 特定の地点を基準に絶対的な位置を決める(デフォルトの基準はウィンドウ左上)

position: fixed; 要素を指定した位置に固定する

また、positionプロパティはtop、bottom、left、rightというプロパティとセットで使うことが多い。

■top/right/bottom/leftプロパティ
positionプロパティを指定した要素に、基準（上、下、右、左）の距離を指定することができる。

絶対位置

ブラウザの左上を基準としてとる位置のことを、絶対位置という。
position: absolute;を適用された要素はブラウザの左上が位置の基準になる。

相対位置への要素の配置

ある要素が、他の要素との関係の上に成り立つ位置のことを相対位置という。
親要素にposition: relative;を設定すると、子要素の基準は親要素の左上となり、相対位置をとる。
子要素にposition: absolute;を付与した際、親要素にposition: relative;を付与すると位置の
基準となる。

まとめ

・positionプロパティとは指定した要素の配置方法を決めることができるプロパティのこと。
・positionプロパティを指定した要素に、top/right/bottom/leftプロパティを用いることで、基準（上、下、右、左）の距離を指定することができる。
・親要素にposition:relative;を指定することで、position:absolute;を指定した子要素の基準の位置　を親要素に指定できる。

値との組み合わせ	説明
position: relative;	現在の位置を基準に相対的な位置を決める
position: absolute;	特定の地点を基準に絶対的な位置を決める(デフォルトの基準はウィンドウ左上)
position: fixed;	要素を指定した位置に固定する

　 Tweet
Qiitaで続きを読む

20210322のCSSに関する記事は5件です。

Vue.js~オブジェクト（ドラえもん）~

クラス

プロバティ

メゾット

Vue.jsとは？？

Vue.jsを使うメリット

導入の仕方

HTML側からのVue.js

JS側からの実装

Grid LayoutのIE向けベンダープレフィックスをAutoprefixerに任せるなら「自動配置」に注意する

はじめに

結論

CSS Grid LayoutのIEベンダープレフィックス

Autoprefixerでgridに自動で`-ms-`プレフィックスを付与する

Autoprefixerのgridのプレフィックスオプションを有効にする

CSS Grid Layoutを適用する

配置指定：行列番号指定

配置指定：【推奨】エリア名指定

まとめ

疑似要素でつくったチェックボックスにブラウザ準拠のフォーカスを当てる

はじめに

結論

どういうこと？

事前準備

考え方

まとめ

要素の位置の指定について

要素の配置方法

絶対位置

相対位置への要素の配置

まとめ

日付別

タグ一覧

20210322のCSSに関する記事は5件です。

Vue.js~オブジェクト（ドラえもん）~

クラス

プロバティ

メゾット

Vue.jsとは？？

Vue.jsを使うメリット

導入の仕方

HTML側からのVue.js

JS側からの実装

Grid LayoutのIE向けベンダープレフィックスをAutoprefixerに任せるなら「自動配置」に注意する

はじめに

結論

CSS Grid LayoutのIEベンダープレフィックス

Autoprefixerでgridに自動で-ms-プレフィックスを付与する

Autoprefixerのgridのプレフィックスオプションを有効にする

CSS Grid Layoutを適用する

配置指定：行列番号指定

配置指定： 【推奨】 エリア名指定

まとめ

疑似要素でつくったチェックボックスにブラウザ準拠のフォーカスを当てる

はじめに

結論

どういうこと？

事前準備

考え方

まとめ

要素の位置の指定について

要素の配置方法

絶対位置

相対位置への要素の配置

まとめ

日付別

タグ一覧

Autoprefixerでgridに自動で`-ms-`プレフィックスを付与する

配置指定：【推奨】エリア名指定