Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all 8492 articles
Browse latest View live
↧

Emmetでよく使うもの

September 15, 2020, 6:11 pm
$
0
0

EmmetでHTMLを記述

　!・・・HTMLのひな形が作れる

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>Document</title></head><body></body></html>

　.classname・・・クラス付きの要素が作れる

<divclass="classname"></div>

　#idname・・・ID付きの要素が作れる

<divid="idname"></div>

　ul>li*2>a・・・リンク付きリスト

<ul><li><ahref=""></a></li><li><ahref=""></a></li></ul>

　table>tr*2>th+td・・・テーブル（表）をつくる

<table><tr><th></th><td></td></tr><tr><th></th><td></td></tr></table>

　dl>(dt+dd)*2・・・説明リスト

<dl><dt></dt><dd></dd><dt></dt><dd></dd></dl>

EmmetでCSSを記述

ショートハンド展開後
dibdisplay: inline-block;
bg#fffbackground: #fff;
c#fffcolor: #fff;
fz32font-size: 32px;
w50width: 50px;
maw640max-width: 640px;
miw50%min-width: 50%;
pl10padding-left: 10px;
mb1emargin-bottom: 1em;
m0-auto20margin: 0 auto 20px;
p5-10-5-10padding: 5px 10px 5px 10px;
bd(+)　※1border: 1px solid #000;
bsh0-0-3-0#000　box-shadow: 0 0 3px 0 #000;　
bdrs5border-radius: 5px;
bds:nborder-style: none;
bdsp0border-spacing: 0;
bdcl:cborder-collapse:collapse;
psrposition: relative;
psaposition: absolute;
ta:ctext-align: center;
trf:sctransform: scale(x, y);
trstransition: prop time;

※1
VScodeでは、bdは+がいらないっぽい

↧
Search

【初心者でもわかる】CSSだけで6角形を作る方法

September 15, 2020, 11:51 pm
$
0
0

どうも7noteです。あまり使う機会は少ないかもですが、CSSだけで6角形の作り方について

CSSだけで6角形を作ります。6角形は英語でヘキサゴン！

8角形も似たような方法で作ったのでよければ見てってください。

・【初心者でもわかる】CSSだけで8角形を作る方法

cssだけで6角形を作る

index.html
<divclass="hexagon"><divclass="hexagon_frame"></div></div>
style.css
.hexagon{width:69px;height:80px;background:#000;/* 6角形の色 */position:relative;}.hexagon::before{content:'';width:0;height:0;border-top:10pxsolid#fff;border-left:17pxsolid#fff;border-bottom:10pxsolidtransparent;border-right:17pxsolidtransparent;position:absolute;top:0;left:0;}.hexagon::after{content:'';width:0;height:0;border-top:10pxsolid#fff;border-left:17pxsolidtransparent;border-bottom:10pxsolidtransparent;border-right:17pxsolid#fff;position:absolute;top:0;right:0;}.hexagon_frame::before{content:'';width:0;height:0;border-top:10pxsolidtransparent;border-left:17pxsolid#fff;border-bottom:10pxsolid#fff;border-right:17pxsolidtransparent;position:absolute;bottom:0;left:0;}.hexagon_frame::after{content:'';width:0;height:0;border-top:10pxsolidtransparent;border-left:17pxsolidtransparent;border-bottom:10pxsolid#fff;border-right:17pxsolid#fff;position:absolute;bottom:0;right:0;}

結果

reslut.png

この方法でハニカム構造にするにはちょっとしんどいかも。できなくはないが・・・

もう一つ疑似要素を使った方法

index.html
<divclass="hexagon"></div>
style.css
.hexagon{width:70px;height:40px;background:#000;position:relative;}.hexagon::before{content:'';width:0;height:0;border-top:0solidtransparent;border-left:35pxsolidtransparent;border-bottom:20pxsolid#000;border-right:35pxsolidtransparent;position:absolute;top:-20px;left:0;}.hexagon::after{content:'';width:0;height:0;border-top:20pxsolid#000;border-left:35pxsolidtransparent;border-bottom:0solidtransparent;border-right:35pxsolidtransparent;position:absolute;bottom:-20px;left:0;}

結果
reslut2.png

まとめ

どちらの方法も擬似要素を使った方法です。

1つ目の方法は、背景と同じ色の三角形で削り取って6角形に見せかけている方法。
2つ目の方法は、逆に四角形に三角形を2つ上下に重ね、6角形に見せかけている方法。

どちらもだいたい6角形に見えるだけで、数値的には正6角形ではありませんが、WEBで使用する分にはさほど問題ないと思います。

おまけ

2つ目の方法でハニカム構造を作ってみた。

画像

index.html
<ul><li><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div></li><li><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div></li><li><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div><divclass="hexagon"></div></li></ul>
style.css
ulli{margin-bottom:15px;list-style:none;}ulli:nth-child(odd){margin-left:-36px;}.hexagon{width:70px;height:40px;background:#000;position:relative;margin-right:2px;display:inline-block;/* 追記 */}.hexagon::before{content:'';width:0;height:0;border-top:0solidtransparent;border-left:35pxsolidtransparent;border-bottom:20pxsolid#000;border-right:35pxsolidtransparent;position:absolute;top:-20px;left:0;}.hexagon::after{content:'';width:0;height:0;border-top:20pxsolid#000;border-left:35pxsolidtransparent;border-bottom:0solidtransparent;border-right:35pxsolidtransparent;position:absolute;bottom:-20px;left:0;}

おそまつ！

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

[参考]
https://spyweb.media/2017/12/21/css-responsive-hexagon/
https://qiita.com/cotolier_risa/items/96992b5e2561dc8cbaa3

↧
↧

　DOMとは　〜ググわか〜

September 16, 2020, 3:03 pm
$
0
0

DOM::「Document Object Model」::(ドキュメント　オブジェクト　モデル)

DOMとはこう言うもの

:point_down_tone1:一つググってもの分からないのでいろんなサイトの一言まとめを集めてみた！

"DOMとはマークアップがなされたリソース（Document）をリソース要素（Object）の木構造（Model）で表現し操作可能にする仕組み、またそのモデル"

"DOMとはJavaScriptでhtmlの要素を操作するための仕組みのこと"

"DOMはブラウザがWebページを解釈したもの"

"DOMは、文書のためのプログラミングAPI"

う〜ん、意味がよくわからない・・・

と言うわけで！　いろいろなまとめから分かりやすくまとめてみた。

つまり・・・

１、Webページの基本的なHTML構造を表現したものでページごとに発行されている

２、ツリー構造（のモデル）で表現されていること

３、jqueryやVue.jsとかは、これを参照して操作する対象を探すことができる！

と言うこと！
※初心者向けにイメージしやすく書いているので、多少の語弊があるかもしれません。

実際に見てみよう！

見るのは簡単！DOMを調べるくらいのあなたなら、すぐに理解できる・・・はず！

このページを右クリック　→　検証　→　Elements(検証クリックしたら最初に出てくる左側の部分)
スクリーンショット 2020-09-17 5.54.07.png

これこれ！

単純なモデルですが、＜html＞のなかに＜head＞と＜body＞が入っていて、
＜head＞...＜/head＞の中にはたくさんの設定が入っていたり、
＜body＞...＜/body＞の中にもdivとかaとかpとかいろいろな要素が階層的（ツリー構造）になって書かれていますね！
スクリーンショット 2020-09-17 6.17.37.png

もはやツリー構造の説明になってる・・・
htmlでidやclassをつけると、それがDOMに反映され、目印になっていて、JSなどの言語によってブラウザ上で操作ができるわけです！

言い換えると、ブラウザ上での何かを変更する際は、JSでDOMにアクセスし、その内容やプロパティを変更しているわけです。

ソースコードを書き換えるわけではありません。

もう一度まとめると

DOMとは、

ページごとに発行されるページの詳細な内容を操作可能にするもの

であることがわかった！

↧

CSSでpaddingの異なる要素同士をそろえる

September 16, 2020, 3:56 pm
$
0
0

結論

box-sizing: border-box;を使います。

解説

例えば、以下のように指定すると、.class2では中の要素の幅が50%になるように表示されるので、borderで囲われる範囲はpaddingの分だけ大きくなってしまいます。言い換えると、50%+1remの幅になってしまいます。

style.css
.class1{width:50%;margin:0;padding:0;border:solid;}.class2{width:50%;margin:0;padding:1rem;border:solid;}

そこで、以下のように、box-sizing: border-box;を追加することで、要素の幅とpaddingを足したものがwidth: 50%になるので、paddingの異なる要素同士で、幅をそろえることができます。

style.css
.class1{width:50%;margin:0;padding:0;border:solid;}.class2{width:50%;margin:0;padding:1rem;border:solid;box-sizing:border-box;}
↧

メディアクエリ　max-width min-widthややこしい

September 16, 2020, 9:34 pm
$
0
0

https://www.wakuwakubank.com/posts/443-html-css-media-query/

スクリーンサイズが1000px以下の場合に適用

@mediascreenand(max-width:1000px)

スクリーンサイズが768px以上の場合に適用

@mediascreenand(min-width:768px)

モバイルファースト

最近はモバイルファーストが主流のため、クリーンサイズが拡大していくごとにスタイルを上書きする書き方、つまりmin-widthで記述していくのが主流

↧
↧

フォント ガイドラインを作りmixinしよう

September 16, 2020, 11:47 pm
$
0
0

前提

  • web開発
  • ReactなどのComponent指向開発
  • styled-compmonents などのmixin機能を持つCSS in JSを使っている
    • SCSS, CSSの場合も考察

概要

「このプロダクトではこれしか使わない」というフォント関係の属性集合を作り、mixinし、フォント周りに秩序をもたらしていきましょう
今回は次の属性を定めていきます

  • font-size
  • font-weight
  • line-height

これらは相互の関係性が非常に高い（ワンセットとして決めて問題ない）と思います
font-familyはもっと上層のbodyに一括指定している事が多いと思うので除きますが、使い分けたいならそれも対象にすると良いかもしれません
colorは流石に自由度が高すぎて一緒には集合化できないと思います。単に定数化で済ませるのが良さそうです

手順の例

1. フォント ガイドラインを作る

次のような集合を決めて作ります
これはAdobe XDでデザイナーさんに作ってもらった例です

  • W: font-weight
  • S: font-size
  • L: 行送り

weightごとにまとめられています
https://note.com/lby/n/ne71f93c72702にもある通り、XDの行送りとCSSのline-heightは異なるので変換が必要なことに注意です

2. mixin用styleを作る

styled-componentsを用いて次のようなファイルを作る

import{css}from'styled-components';constw7=700;exportconstfontGuideline={pc:{w7s40:css`
      font-size: 40px;
      font-weight: ${w7};
      line-height: calc(55 / 40);
    `,...}

3. mixinする

constHogeComponent=styled.div`
  ${fontGuideline.pc.w7s40}
`

メリット

無限の組み合わせから有限の集合になることで、以下のメリットがあります

  • font周りのスタイルに一貫性が保たれる
  • XDなど、デザイナーの指定どおりになっているか確認しやすい
    • 無限の可能性があると、デザイナーの指定が正しいのか実は間違っているのかわからない。フォントガイドラインがあれば、そこになければ間違いだと分かる
    • 特にfont-heightは地味なので指定漏れ・間違いやすいが、集約しつつcalcを使うことで指定通り作りやすい
  • エンジニアだけでなくデザイナーもどこをどういうフォントにするか意識しやすくなる

他の手法 Composition

Reactなどを使っていれば、以下のようにTypography Componentを作ってCompositionする方法もあります

独自に作って適用すると次のような使用感になりそうです

<TypographyW7S40>hogehoge</TypographyW7S40>

スタイルのMixin vs ComponentのComposition

以下のような考えで、ComponentをCompositionするよりスタイルをMixinする方が良さそうと思っています

  • 上記UI Componentのライブラリがそうなっているのは、単にComponentのライブラリとして画一的に便利な機能を提供するためであって、スタイルのライブラリではないから
  • マークアップの構成は極力Semanticにした方が扱いやすく、デザインの関心は分離されて差し替え可能な状態で当ててあるだけ、というのが理想
  • スタイルのためだけのElementが大量に現れてくるのはマークアップが肥大化して見づらいのでは？
  • フォントの関心はweb開発のスタイルのどこにでも現れるアスペクトという感があるのでスタイル部分に自由に差し込みたい

他の場合どうするかの考察

SCSS

http://www.sass-lang.com/documentation/at-rules/mixin
を使えば同じことができます

CSS

素のCSS+HTMLでmixinする手法はclass指定しかないです

デザイン専用のclassがマークアップのあちこちに挟まることを許容する派閥の場合

マークアップ上で明示的にclassでmixinすることで楽ができます
（もちろんCSS in JSも内部的にclassを使っていたりするが、それは隠蔽されている）

.w7s40{font-size:40px;font-weight:700;line-height:calc(55/40);}
<divclass="hoge w7s40">hoge</div>

許容しない場合

css上ではなるべくセット同士が分かりやすいような名前で変数化して、
マークアップ上ではセマンティックなclass指定をして、
その中で1つずつ指定するしかないと思います

変数定義の例 (Special Thanks 同僚)：

:root{--w7:700;--w7s40:40px;--w7s40h:calc(55/40);}/* semanticなクラス名 */.hoge{...font-size:var(--w7s40);font-weight:var(--w7);line-height:var(--w7s40h);}
<divclass="hoge">hoge</div>

CSS modules

composesが使えます
https://postd.cc/css-modules/
この場合もマークアップに適用するのはセマンティックなクラス名にして、その中で使うのが常套手段だと思います

scss-loaderなども導入してSCSSのmixinを使う方法もあります

まとめ

横断的に現れるスタイルの集合作成 + mixinはいいぞ

↧

CSSの基本まとめ

September 17, 2020, 5:21 am
$
0
0

CSSの基本まとめ

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座の本を読んで、備忘録的にまとめていきます。詳しくは本を読まれることをお勧めします。
なお、上記の本に詳しく記載されていないことも、自分の理解のために追加で調べて載せています。

CSSの適用方法

基本的には各HTMLファイルの<head>タグ内に<link>タグを使ってCSSを指定します。

<head><linkrel="stylesheet"href="cssファイルの相対パス"></head>

他にも下記のような方法があります。

  • 一部のHTMLファイルに異なるCSSを適用したい場合・・・<head>タグの中に<style>タグを追加してCSSを直に書く
<head><style>h1{color:#fff;}p{font-size:10px;}</style></head>
  • 一部のタグ要素のみにCSSを適用(上書き)したい場合・・・各タグの中にstyle属性を使ってCSSを直に書く
<body><h1style="color: #fff;">CSSの基本まとめ</h1></body>

CSSの基本的なルール

ファイルの拡張子

.cssで保存する。

文字コードの指定

1行目で必ず文字コードを指定する。

@charset"UTF-8"

書き方

セレクター　{ プロパティ： 値;}のように記載する。
セレクターはHTMLのタグの名前や、クラス、IDなど、どこの要素かを指定する。
プロパティは色やサイズなど、何の要素かを指定する。
最後のセミコロンを忘れないように。

/* 1つのセレクターに1つのプロパティを設定する */h1{color:red;}/* 複数のセレクターに1つのプロパティを設定する(カンマで複数指定) */h1,p{color:red;}/* 1つのセレクターに複数のプロパティを設定する(セミコロンで複数指定) */h1{color:red;font-size:20px;}/* ある要素の中にある要素に1つのプロパティを設定する(半角スペースで指定) */divp{color:red;}

親要素と子要素

HTMLはタグが入れ子構造になりますが、親要素と子要素という考え方があります。下記の例だと、<div>から見ると<h2>と<p>は子要素です。逆に<p>から見ると、<div>が親要素になります。
CSSでサイズを指定する時などに、この親要素と子要素の関係を意識する必要があります。

<div><!-- 親要素ここから --><h2>CSSの基本まとめ</h2><!-- 子要素 --><p>親要素と子要素</p>　<!-- 子要素 --></div><!-- 親要素ここまで -->

サイズの単位

  • px・・・画面の最小単位(ピクセル)を基準とした単位。端末のディスプレイ解像度により、見た目のサイズが異なる場合がある。
  • %・・・親要素のサイズを基準とする相対的なサイズ指定の単位。親要素が90%で、子要素に90%を指定した場合、子要素は親要素の90%（90%*90%=81%)のサイズとなる。
  • rem・・・htmlタグの文字サイズを基準とする相対的な文字サイズ指定の単位。親要素の影響を受けない。

基本的なプロパティ

文字

  • font-size
  • font-family
  • text-align

色

  • color

背景

  • background-image
  • background-image-position

幅と高さ

  • with
  • height

余白

  • margin
  • padding

線

  • border-width
  • border-style
  • border-color

リスト

  • list-style-type
  • list-style-position
  • list-style

クラスとID

同じタグを複数箇所で使用するが、装飾は個別に指定したいという場合にクラスやIDを利用します。
クラスやIDを指定すると、使用しているタグは関係なくそれらのクラスやIDが指定されている箇所全てにそのデザインが適用されます。
命名規約として、どちらも一文字目は必ず英字から始める必要があります。

クラス

ページ内で何度でも使えるため、ページ内で何度も使う装飾はIDではなくクラスを使います。

HTMLファイルの書き方
<pclass="red">CSSの基本まとめ</p><pclass="blue">CSSの基本まとめ</p>
CSSファイルの書き方
p{clolor:#999;}.red{clolor:#fc030f;}.blue{clolor:#0356fc;}

ID

同じIDはページ内で使えないため、ページ内で一度しか登場しないような場合に使います。
また、IDとクラスの両方で同じプロパティについて異なる内容で指定されている場合、IDが優先されます。

HTMLファイルの書き方
<pid="red">CSSの基本まとめ</p><pid="blue">CSSの基本まとめ</p>
CSSファイルの書き方
p{clolor:#999;}#red{clolor:#fc030f;}#blue{clolor:#0356fc;}

特定のクラス/IDの中の特定のタグを装飾したい場合

タグとクラス/IDをセットで指定すると特定のタグのみを装飾できます。

HTMLファイルの書き方
<h1class="red">CSSの基本まとめ</p><!-- 赤くならない --><pclass="red">CSSの基本まとめ</p><!-- 赤くなる --><pid="red">CSSの基本まとめ</p><!-- 赤くなる -->
CSSファイルの書き方
p{clolor:#999;}p.red{clolor:#fc030f;}p#red{clolor:#fc030f;}

Flexboxレイアウトで要素を横並びに配置する

Flexコンテナーという親要素とFlexアイテムという子要素を作成し、CSSでレイアウトを指定します。

HTMLファイルの書き方
<divclass="container"><divclass="item">item1</div><divclass="item">item2</div><divclass="item">item3</div></div>
CSSファイルの書き方
.container{display:flex;}

今の設定による表示は下記のようになります。
image.png

要素の配置方法を指定するために、様々なプロパティが用意されています。
下記をCSSファイルの.container{}の中に追加していくことでレイアウトを整えていきます。

  • 子要素の並ぶ向き：flex-direction
  • 子要素の折り返し方法：flex-wrap
  • 水平方向の揃え（左揃え、中央揃え、右揃え、均等配置など）：justify-content
  • 垂直方向の揃え(広げて配置、上揃え、中央揃え、下揃えなど)：align-items
  • 複数行の場合の揃え(広げて配置、上揃え、中央揃え、下揃えなど)：align-content

CSSグリッドで要素をタイル型に配置する

グリッドコンテナーという親要素とグリッドアイテムという子要素を作成し、CSSでレイアウトを指定します。
グリッドアイテム間のスペースをグリッドギャップと言います。

HTMLファイルの書き方
<divclass="container"><divclass="item">item1</div><divclass="item">item2</div><divclass="item">item3</div></div>
CSSファイルの書き方
.container{display:grid;}

今の設定による表示は下記のようになります。
image.png

要素の配置方法を指定するために、様々なプロパティが用意されています。
下記をCSSファイルの.container{}の中に追加していくことでレイアウトを整えていきます。
各子要素についてそれぞれ半角スペース区切りで指定します。

  • 子要素の横幅：grid-template-columns
  • 子要素同士の余白：gap
  • 子要素の高さ：grid-template-rows

CSSグリッドでは親要素からみた子要素のサイズを割合で指定できるfrという単位が利用できます。絶対値であるpxではなくてfrで指定することにより、画面の幅に合わせて自動で要素を伸縮させることが可能です。
例）1fr 1fr 1fr = 1:1:1

デフォルトCSSの初期化

ブラウザで設定されているデフォルトCSSを初期化することにより、ブラウザ間の表示方法の差分をなくすことができます。

<head><!-- 初期化用CSSの読み込み --><linkrel="stylesheet"href="https://unpkg.com/ress/dist/ress.min.css"><!-- 適用するCSSの読み込み --><linkrel="stylesheet"href="style.css"></head>

参考

スタイルの継承－CSSの基本

↧

【初心者でもわかる】字下げ、字上げのインデント。リストを表示した時に、・の下に文字をもぐりこませないようにする方法

September 17, 2020, 6:33 am
$
0
0

どうも7noteです。CSSで字上げ・字下げする方法。

字送りされた時、こんなふうになってしまうのを解消。

・文字おくりがされるとくずれてしま
います。

これをこうしたい↓。

・文字おくりがされてもくずれないよ
　うになりました！

方法

text-indentを使った方法。

p{text-indent:-1em;padding-left:1em;}

reslut.png

tetx-indentは行の冒頭に余白を入れることができます。
text-indent: 1em;を入れることで１文字分隙間を開けることができます。

今回は逆にtext-indent: -1em;とすることで「・」の分を左に寄せ、全体の左にpaddingを入れることで対応しています。

まとめ

list-styleを使う場合は必要ないですが、疑似要素でアイコンを入れたりした場合にも使うので覚えておいて損はないかなと思います！

reslut2.jpg

おそまつ！

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

↧
Search

IE11で使えないCSS

September 17, 2020, 9:16 am
$
0
0

Microsoft365 IE11サポート終了について

‎8月17日 MicrosoftからMicrosoft365のIE11のサポート終了と、それに伴うスケジュールが発表されました。
Microsoft Edge Legacyも範囲内のようです。

image.png
https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666

これからIE11対応を切るwebサイトが増えることを信じて、
IE11のせいで使用できなかったCSSをまとめます。

対応状況は2020年8月27日確認
Can I use : https://caniuse.com/

line-clamp

はみ出したテキストを３点リーダーにします。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp

Polyfill:
https://github.com/LeMarck/webkit-line-clamp

See the Pen oNxZJXx by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.25.12.png

text-emphasis

圏点を追加します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/text-emphasis

Polyfill:
https://developer.aliyun.com/mirror/npm/package/text-emphasis/v/1.0.0

See the Pen text-emphasis by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.26.02.png

font-smoothing

フォントをなめらかにします。(PCオンリー)
https://qiita.com/hata-mu/items/98df93516cbd3f1cc418

ドキュメント:
https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

See the Pen font-smoothing by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.26.39.png

text-orientation

英数字を縦書きにします。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/text-orientation

See the Pen text-orientation by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-09-01 15.32.18.png

font-kerning

カーニングを調整します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/font-kerning

See the Pen font-kerning by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-09-01 15.44.36.png

font-variant-numeric

数字、分数、序数記号の表記を制御をします。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/font-variant-numeric

See the Pen font-variant-numeric by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-09-12 22.24.06.png

object-fit

画像を適切なサイズに合わせます。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

Polyfill:
https://github.com/steveworkman/jquery-object-fit
https://github.com/anselmh/object-fit

See the Pen object-fit by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.30.14.png

mask-image

画像を元に切り抜きます。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/mask-image

See the Pen mask-image by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.30.58.png

filter

画像に効果を追加します。
グレースケールやコントラストは省略。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/filter

Polyfill:
https://github.com/Schepp/CSS-Filters-Polyfill

drop-shadow

画像に影をつけます。透明を考慮します。


See the Pen
drop-shadow by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki)
on CodePen.


blur

ぼかしをいれます。


See the Pen
blur by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki)
on CodePen.


スクリーンショット 2020-08-27 16.36.30.png

shape-outside

回り込みをする際の対象の形状を指定します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/shape-outside

Polyfill:
https://github.com/adobe-webplatform/css-shapes-polyfill

See the Pen shape-outside by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.42.18.png

mix-blend-mode

要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/mix-blend-mode

See the Pen mix-blend-mode by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.43.52.png

backdrop-filter

背景のみぼかします。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/backdrop-filter

Polyfill:
https://github.com/AhsanE/backdropjs

See the Pen backdrop-filter by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.44.24.png

conic-gradient

中心点の周りを回りながら色が変化する放射グラデーションから成る画像を生成します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/conic-gradient

Polyfill:
http://projects.verou.me/conic-gradient/

See the Pen conic-gradient by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.45.08.png

sticky

スクロールした際に要素を固定します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/position

Polyfill:
https://github.com/wilddeer/stickyfill

See the Pen sticky by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.45.41.png

will-change

最適化を行い、アニメーションを滑らかにします。

注意点:
https://postd.cc/css-will-change-property/

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/will-change

See the Pen will-change by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.46.09.png

scroll-behavior

スムーススクロールにします。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/scroll-behavior

See the Pen scroll-behavior by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.46.45.png

outline-offset

outlineにオフセットを設定します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/outline-offset

See the Pen outline-offset by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.48.26.png

unset / initial

初期値、又はリセットします。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/unset
https://developer.mozilla.org/ja/docs/Web/CSS/initial

See the Pen unset/initial by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.49.40.png
スクリーンショット 2020-08-27 16.49.55.png

min(), max(), clamp()

最大幅や最小幅を定義します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/clamp
https://developer.mozilla.org/ja/docs/Web/CSS/min
https://developer.mozilla.org/ja/docs/Web/CSS/max

See the Pen min(), max(), clamp() by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.51.46.png

var()

CSS変数です。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/var

Polyfill:
https://www.npmjs.com/package/css-vars-ponyfill

See the Pen var() by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.52.15.png

tab-size

タブの大きさ決めます。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/tab-size

See the Pen tab-size by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.52.43.png

zoom-in, zoom-out

マウスカーソルをズームインズームアウトに設定します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/cursor

See the Pen zoom-in, zoom-out by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-09-01 15.54.51.png

prefers-color-scheme

ダークモードとライトモードのCSSを設定します。

ドキュメント:
https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme

Polyfill:
https://github.com/csstools/css-prefers-color-scheme

See the Pen OJNgoeQ by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

スクリーンショット 2020-08-27 16.36.30.png
スクリーンショット 2020-08-27 16.52.43.png

@supports

プロパティが対応・未対応の場合に適用するCSS。

ドキュメント:
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

See the Pen Feature Queries by kiikikikkkiikikkiikikiki (@kiikikikkkiikikkiikikiki) on CodePen.

↧
↧

完全未経験からのIT業界への転職

September 17, 2020, 5:22 pm
$
0
0

初めまして。

以前は親の仕事(施工建築関係)を手伝っていましたが、幼いころからパソコンをいじることが好きで(いじると言っても内部の物やサーバーなどではない)次働くならなんとなくIT業界が良いなあという感覚で生きていました。

そんなときひょんなことから上京することが決まり、去年の7月くらいから東京で生活しています。

こっちに来た時に、知り合いの紹介でSES事業と言われ入った企業では、週5日フルタイムで仕事、週に1度の研修があるといったものでした。

ちなみに仕事内容は、携帯販売会社の中で回線の営業をすることでした。その頃は、ITと言えばプログラミング!みたいな感覚でしたので研修では皆でHTMLとCSSを講師の人と学んでいましたが、Twitterなどで調べていくと、詳細は省きますが、このままじゃあんまり意味ないぞ・・・ってなってきまして、半年ほどでやめて、そこからまずは土台が必要だと思いコロナ禍による緊急事態宣言もあり家でひたすらITパスポートの勉強し1発取得、今現在はLpic level1を目標に毎日最低3時間の勉強を取り入れてます。

これから、学習記録や思ったことをたまに記事にしようと思いますので、よろしくお願いします。

↧

全米が待ち望んでいた超便利なTailwind CSSツールリスト

September 17, 2020, 7:58 pm
$
0
0

こんにちは、たかとーです。
今日はTailwind CSS Resources you wish you had. - DEV Community 👩‍💻👨‍💻の日本語訳記事です！
当記事は、Janeさんの許可を得て翻訳しています。Tweet

Tailwind CSS Resources you wish you had.

Tailwind CSS Resources you wish you had.

Tailwind CSS リソース

私が学んでいたときに役に立ったいくつかのリソースをリストアップしていきます。それらをあなたのリストに追加したり、すでにある場合は、それらを使い続けてください。

1) TailwindInk

ブランドカラーを選ぶと、補色のリストを生成してくれるカラージェネレーターサイトです。カラーコードはTailwindのconfigファイルに簡単にコピーすることができます。

TailwindInk

2) Tailblocks

この素晴らしいプロジェクトはMert Cukurenによって作られました。60以上の、Tailwind CSSで作られたすぐに使えるUIブロックがあります。View Codeボタンをクリックして、コードをファイルにコピーするだけです。その上、コンポーネントは完全にレスポンシブで、ブロックが異なるスクリーンデバイス上でどのように見えるかを確認することができます。あなたのウェブサイトで使用している配色を選択することができます。たとえば、下の画像では、私は青の色を選んだことがわかります。上のチェリーでダークモードに切り替えることができ、ブロックがどのように見えるか確認できます。

Tailblocks

3) Tailwind Starter Kit

このウェブサイトは、あなたのサイトを素早く構築するのに役立つ素晴らしいコンポーネントを持っています。あなたがすべきことは、色を変えて、あなたの選択次第でコンポーネントを追加/削除することだけです。ドキュメントはわかりやすく、迷うことはほとんどありません。Kitにはランディングページ、ダッシュボード、プロフィールページなどがあります。

Tailwind Starter Kit

4) Stitches

Tailwindコンポーネントのテンプレートジェネレーターです。あなたのウェブサイトで使用したい様々なUIブロックをドラッグ＆ドロップするだけで、あなたのためにコードを生成してくれます。使い方は簡単で、わかりやすいです。時には、ゼロからすべてのコードを書く必要はないのです。

Stitches

5 Tailwind Typography Playgroung

実際にコーディングをする前に、タイポグラフィがどのように見えるかを確認できる素晴らしいサイトです。タイトルや本文のfont familyを選択して、自分の好みに合うかどうかを確認することができます。もし自信がない場合は、簡単に別のfont familyを選択することができます。使用しているフォントはすべてGoogle Fontで無料で入手できます。

Tailwind Typography Playgroung

6) Tailwind Components

Tailwind CSSを使ったコミュニティコンポーネントの無料リポジトリです。404ページ、通知ドロップダウン、Eコマースの商品一覧ページなど、様々なコンポーネントがあります。また、異なる画面サイズやbreak pointでコンポーネントがどのように見えるかを確認できます。また、あなた自身のコンポーネントをsubmitすることで、他の人が使用したり共有できるようになります。

7) Tailwind weekly

Vivian Guillenが毎週Tailwind CSSについてのニュースレターを配信している、素晴らしいサイトです。

Tailwind weekly

8 Tailwind run

これは、TailwindのUIブロックを作成するためのライブコーディングエディタのようなものです。Codepenを使っているようなものですが、Tailwindがインストールされています。HTMLファイルがあり、そこに要素やユーティリティクラスを追加できますし、好きなカスタムスタイルを追加するためのconfigファイルもあります。ローカルにインストールされているエディタを開かずにTailwindを練習したい方には、このサイトがおすすめです。

Tailwind run

9) Tailwind Gradient Generator

私のようにグラデーションが好きなら、このサイトがとても便利です。使用したい異なる色を3色まで選択し、グラデーションの方向を選択します。その後、あなたのためにコードが生成されるので、それをコピーすることができます。難しい作業をあなたのために行ってくれるので、プロセスをより簡単にします。

Tailwind Gradient Generator

10 Awesome Tailwind CSS

これは素晴らしいGithubリポジトリです。Tailwindを使って学習したりプロジェクトを構築したりする際に、常にポケットに入れておくことをお勧めします。90以上の素晴らしいリソースがあり、様々なサイトを構築する際にそれほど苦労しなくて済むようになっています。リポジトリに書かれているリソースを使えば、生産性が2倍になることは間違いありません。私がこの記事で紹介していない、素晴らしいリソースを見つけることができるでしょう。リソースの一部を紹介します。

  • IDE 拡張機能
  • プラグイン
  • プロジェクトの開始に役立つツール
  • プロジェクトを爆速スタートさせるためのUIコンポーネントとテンプレート
  • スターターとテーマ
  • コントリビュートできるTailwindオープンソースプロジェクト
  • あなたの旅をサポートするTailwindの学習リソース

まとめ

Tailwindは素晴らしいCSSフレームワークで、次のプロジェクトで使うことを検討すべきです。プロジェクトのキックスタートに使えるリソースはたくさんありますが、上記のリストが少しでもお役に立てれば幸いです。この記事をお友達やCSSフレームワークを学んでいる他のコード初心者と共有することを忘れないでください。

また、Roによって作られたDevs helping Devという素晴らしいコミュニティがあります。Discordに参加することができます。このチャンネルは開発者のメンタルヘルスに焦点を当てており、同じような経験をしている仲間からサポートを受けることができます。多くの人が失業したり、技術系にキャリアを変えたりしている中、このコミュニティは思いやりがあり、あなたの旅の助けになるでしょう。あなたに会えるのを楽しみにしています。Twitter handle @devshelpingdevs🥰

この投稿が役に立ったら、あなたの仲間やTailwind CSSを学んでいる初心者の方とシェアしてください。コーヒーをおごってもらってもいいですよ 🙂。

Buy me a coffee

giphy.gif

訳者感想

自分もTailwind CSS大好き人間で、最近はNext.js x Tailwind最高！となっていたので、この記事はかなり有用だな、と感じました。
自分は、こういうツールは使わずに、全て自分で理解した上でコードを書きたい、とどうしても考えてしまう人間なのですが、これらのツールは本当に素晴らしいので、これからはどんどん使って爆速でプロダクトを作っていきたいです。

特に

  • TailwindInk
  • Tailblocks
  • Tailwind Gradient Generator

はかなり有用な気がしています。
素晴らしい記事をありがとうございました Jane✨

訳者について

2019年5月よりバンクーバーを拠点に移し、現在スタートアップの開始に向けて試行錯誤しているソフトウェアでデベロッパーです。

近頃は、VCの方と話しながらアイディアのブラッシュアップなどを行いながらMVPの検証を進めています。

フリーランス案件も募集し始めました！React、NodeJs、TypeScript等フロント、バックエンド問わず行えます。是非宜しくお願い致します。

もしよろしければ、以下SNSもよろしく願いします！

Twitter: @taishikat0_Ja
Note: 日本人でも英語圏で戦えることを証明したい。28歳が会社を辞め、個人開発者としてカナダでひたすらもがき続けた一年間とこれから
Linkedin: Taishi Kato

↧

Tyハロトレ24日目

September 18, 2020, 4:58 am
$
0
0

CSS

em

一般的なフォントサイズは、16px = 1em
なので、2emだと、32px

見出しのフォントサイズの大きさ

タグフォントサイズ
h132px
h224px
h319px
h416px
h513px
h611px
p16px

::beforeと::after

more_after2.png

/* テキストを追加する場合 */.more::before{/* afterも同様 */content:"追加するテキスト";}/* 画像を追加する場合 */.more::before{/* afterも同様 */content:"追加する画像パス";}/* 空の指定も可能 */.more::before{/* afterも同様 */content:"";}

vertical-align

vertical-alignプロパティは、行のなかでのテキストや画像などの縦方向の揃え位置を指定する際に使用します。
　middleだと中央揃えになります。

classとid

タグフォントサイズ
class複数も可能なので、複数指定したいときに使う
id唯一無二なので、一箇所だけ指定したいときに使う

classは複数指定できる

.akagumi{color:#ff0000;}.aogumi{color:#0000ff;}

classes2.png

改行タグ

　<br>と<br />の2つの書き方がありますが、改行タグを使うときはどちらか1つに揃えましょう。

font-weight

font-weightで使うのは、normal、boldくらいです。

GW1回目

グループで話し合いをして、
Webサイトの企画と制作します。

話すことと聞くことに集中

マッサージ治療院のWebサイトを作ります。
TOPページのデザイン（Ps+Ai）は最低 + α（HTMLとCSSを組み込む）

川越にあるマッサージ治療院で、
フリー素材やイラレで足りない部分を補います。

役回り

リーダー・・・話を進める人で、まとめ役
議事録・・・情報をチャットワークでシェア

Webサイト情報

川越
マッサージ鍼灸治療院

↧

【初心者におすすめ】WEB開発で重宝しているWEBサービス＆拡張機能たち5選

September 18, 2020, 6:53 am
$
0
0

どうも7noteです。フロントエンジニアなら知っておきたいツールまとめ

私的に利用しているツールを紹介。全部無料で使えます！

1. 「検証ツール(F12)」

開発に必須です。ブラウザに標準装備されていることがほとんどですが、特にオススメはgoogleChromeの検証ツールをよく使います。

img1.png

できること

  • HTMLやCSSのソースを確認＆お試し調整が可能
  • javascriptのデバッグ等にコンソールが見れる
  • サーバーとの通信情報が見れる
  • ローカルストレージなどの情報を閲覧
  • なんか他にもいろいろできることたくさん

特に駆け出しの方はHTMLやCSSを確認することで、誤字だったり、CSSの優先順位の影響で効かないCSSを確認したりするのに重宝します。
使い方などは検索すればいろいろ出てくるのでここでは省略。

2. 「User-Agent Switcher for Chrome」

ユーザーエージェントを切り換えられるchromeの拡張機能

User-Agent Switcher for Chrome

img2.png

PCでもユーザーエージェントを変更することができます。
これにより、javascriptなどでスマートフォンにだけ対応させているスクリプトの挙動をPCでも確認できるので楽にデバッグが行なえます。
ただ、実機でやってみるとやっぱり動かないという事もあり得るので注意が必要です。

3. 「PerfectPixel by WellDoneCode (pixel perfect)」

1pxのズレも許されないあなたに。パーフェクトピクセル。

PerfectPixel by WellDoneCode (pixel perfect)

img3.png

こんなの欲しかった！というツールです。

できること

  • ブラウザ上に画像（デザインデータ）を重ねられる
  • 画像データの透明度や表示位置を自由に変えられる
  • 設定をロックできるので、ページスクロールしながら上から下まで全部チェックできる
  • 開発者ツールで微調整しながらズレを直すことができる

過去に記事を書きましたので、こちらの記事も参考ご覧ください

4. 「パンダ（通称）」

画像を圧縮して容量を軽くしてくれるWEBサービスです。

https://tinypng.com/

img4.png

動作も早く使いやすいのが特徴。
WEBサイトは少しでも容量を軽くする事が重要視されているので、画像の圧縮などは必須です！！

5. 「I love♥ PDF」

こちらは画像ではなく、pdfの変換や圧縮などが行なえるWEBサービス

https://www.ilovepdf.com/ja

img5.png

pdfの場合はよくこのページを利用します。

おまけ. 「OneClickCSS」

OneClickCSS

img6.png

こちらはHTMLのソースから1クリックでCSSを自動生成してくれるもの。
便利なのですが、どうしてもクラス名だけ、とかセレクタだけ、とかしかできないので吐き出した後調整が必要！
中～大規模であればないよりはあった方が嬉しいツールですね。

まとめ

他にもいくつかありますが、ひとまずよく使う5個+1個を紹介しました。
また気が向いたら他のツールも紹介できればと。

おそまつ！

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

↧
↧

Djangoを使って10分で作るCSS環境

September 19, 2020, 4:44 am
$
0
0

プロローグ

CSSの勉強用環境をDjangoで作ります。

Djangoが導入済みであれば10分想定です。

内容には影響ないかと思いますが、実行環境です
OS : Windows10
python : Python 3.7.6
django : 3.1

手順

フォルダ作成、プロジェクト作成、アプリ作成

C:\work\02_実施>mkdir 20200919_htmlcss
C:\work\02_実施>cd 20200919_htmlcss
C:\work\02_実施\20200919_htmlcss>django-admin startprojecthtmlcssC:\work\02_実施\20200919_htmlcss>cd htmlcssC:\work\02_実施\20200919_htmlcss\htmlcss>python manage.py startapptest_appC:\work\02_実施\20200919_htmlcss\htmlcss>dir
 ドライブ Cのボリューム ラベルがありません。
 ボリューム シリアル番号は D48D-C505です

 C:\work\02_実施\20200919_htmlcss\htmlcss のディレクトリ

2020/09/19  19:38    <DIR>          .
2020/09/19  19:38    <DIR>          ..
2020/09/19  19:38    <DIR>htmlcss2020/09/19  19:38               685manage.py
2020/09/19  19:38    <DIR>test_app1個のファイル                 685バイト
               4個のディレクトリ   8,932,749,312バイトの空き領域

アプリ認識(appsに定義されているアプリ名をsetting.pyに追記)

C:\work\02_実施\20200919_htmlcss\htmlcss>cd htmlcssC:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>type ..\test_app\apps.py
fromdjango.apps importAppConfigclassTestAppConfig(AppConfig):
    name='test_app'
htmlcss/setting.py
# Application definition
INSTALLED_APPS=['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles','test_app.apps.TestAppConfig',]

アクセス先の設定(プロジェクトのurls.pyとアプリのurls.pyに設定)

C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad urls.py
htmlcss/urls.py
fromdjango.contribimportadminfromdjango.urlsimportpath,includeurlpatterns=[path('admin/',admin.site.urls),path('',include('test_app.urls')),]
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>copy urls.py ..\test_app\
        1個のファイルをコピーしました。
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\urls.py
test_app/urls.py
fromdjango.urlsimportpath,includefrom.importviewsurlpatterns=[path('',views.index),]

アクセス先のhtmlを指定と作成

C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\views.py
test_app/views.py
fromdjango.shortcutsimportrender# Create your views here.
defindex(request):returnrender(request,'index.html')
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\templates
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html
index.html
<html><head></head><body><p>hello, world</p></body></html>

ようやくCSS(css認識と作成、htmlからの呼び出し)

C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py
htmlcss/setting.py
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
importosSTATIC_URL='/static/'STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),)
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\static\css
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\static\css\style.css
style.css
.T1{background-color:#99cc00}
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.html
index.html
{%load static%}
<html><head><linkhref="{% static 'css/style.css'%}"rel="stylesheet"></head><body><divclass='T1'><p>hello, world</p></div></body></html>

webサーバの起動とブラウザで確認

C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>start
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>python ..\manage.py runserverC:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>start http://localhost:8000

完成！！！
1.png

エピローグ

これで好きなようにCSSをジャンジャン試せます

↧

【初心者でもわかる】フォーム作りに必須！inputとlabelを紐づける方法

September 19, 2020, 5:50 am
$
0
0

どうも7noteです。inputとlabelの位置関係から、紐づける方法について。

フォームを作成する時にちょっとオシャレなボタンにしようと思いinputに装飾を入れたい時、inputとlabelの関係性を知っているとスムーズなコーディングができます。

inputとlabelの位置関係から紐づける方法は大きく2種類あるのでそれぞれ見ていきます。

labelタグの中にinputがある場合

<label><inputtype="radio"name="">選択項目<label>

この場合自動的に、ラジオボタンの「◎」の部分をクリックするだけでなく、文字の部分やlabel要素の中をクリックすることで、inputにチェックを付けることができるようになります。

uchi.gif

labelタグの外にinputがある場合

<inputtype="radio"name=""id="hogehoge"><labelfor="hogehoge">選択する<label>

この場合、例のようにinputにidを指定し、labelにfor=""と書きinputに指定したidと同じものを指定します。

soto.gif

これをすることにより、inputが遠く離れた場所にあったとしても紐づけることができlabel要素をクリックすることでinputにチェックを付けることができます。

まとめ

この方法を使うことで、inputのチェックがついているかどうかを判定する:checkedを使いlabelタグや他の要素の装飾を変更する方法があります。
それについてはまた明日投稿予定なのでよかったら見てください。

inputしかつかった事がなく、label要素を初めて知った時は感激でした。input要素だけだと特にラジオボタンやチェックボックスがクリックやタップしにくい事があるので、検索フォームや問い合わせフォームを作るときはlabelを入れておきたいところです。

おそまつ！

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

↧
Search

CSSのみで作るドロップダウンメニュー

September 19, 2020, 7:38 am
↧

【初心者でもわかる】ラジオボタンのデザインを変更して、好きなケーキにしてしまう

September 20, 2020, 1:01 am
$
0
0

どうも、7noteです。ラジオボタンのデザインを変更して、オシャレなケーキに変えてしまう方法を紹介

ラジオボタンのあの「〇」って、好きなデザインに変更する方法があるってご存知でしたか？
通常のラジオボタンは機種やブラウザによってちがいますが、こんな感じのシンプルなものが多いですが・・・

普通のラジオボタン

normal.png

これを好きなデザインに変えてしまいましょう。
せっかくなので美味しそうなものに変えてみましょう。

label要素を使うので、label要素って何？という方は前回の記事をご覧ください。
【初心者でもわかる】フォーム作りに必須！inputとlabelを紐づける方法

材料はこちら(1人前)

ファイルCSSプロパティ意味
index.htmlinputタグ
labelタグ		ボタンやフォームなどを書く時に使うもの
inputと紐づけて使うもの
style.css::before
::after		疑似要素っていいます。今回は両方使います。
cake01.pngショートケーキの画像
cake02.pngチョコケーキの画像
cake03.pngカップケーキの画像

作り方

  1. index.htmlにラジオボタンを用意。
  2. style.cssで、inputを見えなくして、beforeにお皿を用意。
  3. チェックされた時、afterにそれぞれのケーキを用意して完成。

1.index.htmlにラジオボタンを用意。

index.html
<ulclass="select"><li><inputtype="radio"name="cake"id="cake01"><labelfor="cake01">ショートケーキ</label></li><li><inputtype="radio"name="cake"id="cake02"><labelfor="cake02">チョコケーキ</label></li><li><inputtype="radio"name="cake"id="cake03"><labelfor="cake03">カップケーキ</label></li></ul>

2.style.cssで、inputを見えなくして、beforeにお皿を用意。

style.css
ulli{padding-left:20px;}input{display:none;}label::before{content:"";width:20px;height:20px;display:inline-block;background:url(dish.png)no-repeat;}

3. クリックされた時、afterにそれぞれのケーキを用意して完成。

style.css
label{position:relative;}input:checked+label::after{content:"";width:20px;height:20px;display:inline-block;position:absolute;top:0;left:0;}input#cake01:checked+label::after{background:url(cake01.png)no-repeat;}input#cake02:checked+label::after{background:url(cake02.png)no-repeat;}input#cake03:checked+label::after{background:url(cake03.png)no-repeat;}

＼完成／

kansei.gif

解説・作り方のコツ

  • inputは、labelタグの前に書きます。そうすることで、:checkedでチェックの判定ができるのでその結果を次のlabel要素に反映することができます。
  • 反映させるには隣接セレクタ（+）を使い、:checkedがある時のみ:afterを表示するように作っています。

まとめ

一番好きなケーキはいちごのショートケーキ。

素材データ配布

真似して作りたい人はこの画像をダウンロードして使ってください！

dish.png

cake01.png
cake02.png
cake03.png

おそまつ！

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

↧
↧

BEM再入門【Block編】

September 20, 2020, 2:15 am
$
0
0

はじめに

どうもこんにちは。

消防士からフロントエンドエンジニアに転職したものです。
これまで自己学習を続けてきたものの、アウトプットらしきものをしたことがなかったので今回から少しづつ投稿していきたいと思います。

3投稿分くらいは、CSS設計の話になってきますがお付き合いを…
また、何かあれば質問や訂正等をしていただけると自己学習にも繋がるので幸いです。

BEMって何?

BEM（ベム）とは「Block,Element,Modifire」の頭文字を略です。
OOCSSと同様、採用している会社も多いのではないでしょうか。

名前の通り、Block,Element,Modifireに分けてcssを設計していくという考え方です。

今回はそのうちの「Block」についてまとめていきたいと思います。

Block基本

基本の考え方

大元の考え方として、どこでも使い回せるというのがあります。
なので、Block自体にはレイアウト系のスタイルをあててはいけません。

クラス名の付け方

クラス名の付け方ですが、その要素が何なのかを見て理解できる名前をつけます。
ここで注意するのが見た目を表すような命名はあまりよくありません。

例1)
// レイアウトを表すような命名なので×
<pclass="red-txt">テスト</p>例2)
//注意分を表しているため○
<pclass="caution-txt">テスト</p>

例1のようにしてしまうと、これをどこかで青色のテキストでフォントサイズ等はこのまま使いまわしたいという時に使えません。
なので、見た目を表すような命名は避け、例２のようにします。

ちなみにBlockの命名規則ですが、一つの単語、例えば「header,footer,menu」や、複数の単語の場合は「-」で単語同士を「header-nav」のようにつなげて命名します。

まとめ

これでBEMのBlockの基礎の基礎は理解できました。
次回はElementについてまとめていこうと思います。

↧

.stylelintrc

September 20, 2020, 6:07 am
$
0
0

.stylelintrc

.stylelintrcはStylelintの設定ファイルです。

Stylelint

CSS、SCSSのリンターで、一部のルールは自動修正にも対応しています。
プラグインを追加して新しいルールを追加することもできます。

Stylelintのインストール

terminal
npm i -D stylelint

実行

terminal
//lintのみ
npx stylelint src/css/**/**.css
npx stylelint src/scss/**/**.scss

//lint + 自動修正
npx stylelint src/css/**/**.css --fix
npx stylelint src/scss/**/**.scss --fix

記法

形式

ファイル名ファイル形式
.stylelintrc.jsonJSON形式
.stylelintrc.yamlYAML形式
.stylelintrc.ymlYAML形式
.stylelintrc.jsJavaScript形式
.stylelintrcJSON形式、YAML形式

JSONの場合

.stylelintrc.json
{
  "extends": [
    "元にするルールセット名1",
    "元にするルールセット名2"
  ],
  "plugin": [
    "プラグイン名1",
    "プラグイン名2",
  "rules": {
    "ルール名1": "値",
    "ルール名2": ["値"{
     "オプションのルール名": "値"
    }]
  }
}

JavaScriptの場合

.stylelintrc.js
module.exports = {
   extends: [
     '元にするルールセット名1',
     '元にするルールセット名2'
   ],
   plugin: [
     'プラグイン名1',
     'プラグイン名2'
   ],
   rules:{
     'ルール名1': '値', 
     'ルール名2': ['値', { 
       'オプションのルール名': '値' 
     }]
   }
};

YAMLの場合

.stylelintrc.js
extends:
 - 元にするルールセット名1
 - 元にするルールセット名2
plugins:
 - プラグイン名1
 - プラグイン名2
rules:
 ルール名1: 値
 ルール名2:
  - 値
  - オプションのルール名:
   - 値

extends

Stylelintで使えるルールは多いので、全部を1から書くのは大変です。
extendで既存のルールのセットを読み込んで、rulesで変えたいルールだけ上書きするのが一般的な使い方です。

一般的なルールセット

ルールセット名内容
stylelint-config-recommended最小限のCSSのルールセット
stylelint-config-standard一般的なCSSのルールセット
config-recommended-scssSCSSのルールセット
stylelint-config-primerGitHubのCSSのルールセット
stylelint-config-wordpressWordPressのルールセット
stylelint-config-twbs-bootstrapBootstrapのルールセット

stylelint-config-recommended

インストール
terminal
npm i -D stylelint-config-recommended
.stylelintrcの設定変更
.stylelintrc
{
 "extends": "stylelint-config-recommended"
}

stylelint-config-standard

インストール
terminal
npm i -D stylelint-config-standard
.stylelintrcの設定変更
.stylelintrc
{
 "extends": "stylelint-config-standard"
}

stylelint-config-recommended-scss

インストール
terminal
npm i -D stylelint-config-recommended-scss
.stylelintrcの設定変更
.stylelintrc
{
 "extends": "stylelint-config-recommended-scss"
}

stylelint-config-wordpress

インストール
terminal
npm i -D stylelint-config-wordpress
.stylelintrcの設定変更
.stylelintrc
{
 "extends": "stylelint-config-wordpress"
}

stylelint-config-twbs-bootstrap

インストール
terminal
npm i -D stylelint-config-twbs-bootstrap
.stylelintrcの設定変更(CSS)
.stylelintrc
{
 "extends": "stylelint-config-twbs-bootstrap/css"
}
.stylelintrcの設定変更(SCSS)
.stylelintrc
{
 "extends": "stylelint-config-twbs-bootstrap/scss"
}

stylelint-config-primer

インストール
terminal
npm install --save --dev stylelint-config-primer
.stylelintrcの設定変更
.stylelintrc
{
 "extends": "stylelint-config-primer"
}

Rules

Possible errors

問題のある書き方を検知します。

Color(色)

無効なHEXでの色指定を禁止

.stylelintrc
"color-no-invalid-hex":true
Font family(フォントファミリー)

フォントファミリー名の重複を禁止

.stylelintrc
"font-family-no-duplicate-names": true

//オプション
"ignoreFontFamilyNames": [正規表現, "文字列"]

フォントファミリー名の中に、総称ファミリー(serif、sans-serif、monospaceなど)を書く事を必須にする

.stylelintrc
"font-family-no-missing-generic-family-keyword": true

//オプション
"ignoreFontFamilies": [正規表現, "文字列"]
Function(関数)

calc関数内の無効な式を禁止

.stylelintrc
"function-calc-no-invalid": true

calc関数内でスペースのない演算子を禁止

.stylelintrc
"function-calc-no-unspaced-operator":true

linear-gradient()での無効な方向の値を禁止

.stylelintrc
"function-linear-gradient-no-nonstandard-direction": true
String(文字列)

(エスケープされていない)文字列の改行を禁止

.stylelintrc
"string-no-newline": true
Unit(単位)

不明な単位を禁止

.stylelintrc
"unit-no-unknown": true
　
//オプション
"ignoreUnits": [正規表現, "文字列"]
"ignoreFunctions":  [正規表現, "文字列"]
Property(プロパティ)

不明なプロパティを禁止

.stylelintrc
"property-no-unknown": true
　
//オプション
"ignoreProperties": [正規表現, "文字列"]
"ignoreSelector"s:  [正規表現, "文字列"]
"checkPrefixed": true (デフォルト)
"checkPrefixed": false
Keyframe declaration(キーフレーム宣言)

キーフレーム宣言内で!importantを禁止

.stylelintrc
"keyframe-declaration-no-important": true
Declaration block(宣言ブロック)

宣言ブロック内で重複するプロパティを禁止

.stylelintrc
"declaration-block-no-duplicate-properties": true
　
//オプション
"ignore": ["consecutive-duplicates"]
"ignore": ["consecutive-duplicates-with-different-values"]
"ignoreProperties": [正規表現, "任意の文字列"]

ロングハンドプロパティを上書きするショートハンドプロパティを禁止

.stylelintrc
"declaration-block-no-shorthand-property-overrides": true
Block(ブロック)

空のブロックを禁止

.stylelintrc
"block-no-empty": true

//オプション
"ignore": ["comments"]
Selector(セレクタ)

不明な疑似クラスセレクタを禁止

.stylelintrc
"selector-pseudo-class-no-unknown": true

//オプション
"ignorePseudoClasses": [正規表現, "文字列"]

不明な疑似要素セレクタを禁止

.stylelintrc
"selector-pseudo-element-no-unknown": true

//オプション
"ignorePseudoElements": [正規表現, "文字列"]

不明なタイプセレクタを禁止

.stylelintrc
"selector-type-no-unknown": true

//オプション
"ignore": ["custom-elements", "default-namespace"]
"ignoreNamespaces": [正規表現, "文字列"]
"ignoreTypes": [正規表現, "文字列"]
Media feature(メディア・フィーチャー)

不明なメディア・フィーチャー名を禁止

.stylelintrc
"media-feature-name-no-unknown": true

//オプション
"ignoreMediaFeatureNames": [正規表現, "任意の文字列"]
At-rule(@ルール)

不明な@ルールを禁止

.stylelintrc
"at-rule-no-unknown": true

//オプション
"ignoreAtRules": [正規表現, "任意の文字列"]
Comment(コメント)

空のコメントを禁止

.stylelintrc
"comment-no-empty": true
General / Sheet(一般/シート)]

詳細度が高いセレクタより後に、詳細度が低いセレクタを禁止

.stylelintrc
"no-descending-specificity": true

//オプション
"ignore": ["selectors-within-list"]

スタイルシート内の@importルールの重複を禁止

.stylelintrc
"no-duplicate-at-import-rules": true

スタイルシート内でのセレクタの重複を禁止

.stylelintrc
"no-duplicate-selectors": true

//オプション
"disallowInList": true
"disallowInList": false (デフォルト)

空のソースを禁止

.stylelintrc
"no-empty-source": true

余分なセミコロンを禁止(自動修正可能)

.stylelintrc
"no-extra-semicolons": true

CSSでサポートされていない行頭//でのコメントを禁止(SASSなどは除く)

.stylelintrc
"no-invalid-double-slash-comments": true

Limit language features

書き方に制限をかけます。

Alpha-value(アルファ値)

アルファ値の指定をパーセントか、数値に固定(自動修正可能)

.stylelintrc
//数値の場合
"alpha-value-notation": "number"

//パーセントの場合
"alpha-value-notation": "percentage"

//オプション
"exceptProperties": [正規表現, "任意の文字列"]
Hue(色相)

色相の指定を数値か角度に固定(自動修正可能)

.stylelintrc
//角度の場合
"hue-degree-notation": "angle"

//数値の場合
"hue-degree-notation": "number"
Color(色)

カラー関数の指定方法の指定(自動修正可能)

.stylelintrc
//モダンの場合
"color-function-notation": "modern"

//従来の記法の場合
"color-function-notation": "legacy"

名色での色指定

.stylelintrc
//可能な限り必須の場合
"color-named": "always-where-possible"

//禁止の場合
"color-named": "never"

//オプション
"ignore": ["inside-function"]
"ignoreProperties": [正規表現, "任意の文字列"]

16進数での色指定を禁止

.stylelintrc
"color-no-hex": true
Length(長さ)

長さゼロの単位を禁止(自動修正可能)

.stylelintrc
"length-zero-no-unit": true

//オプション
"ignore": ["custom-properties"]
Font weight(フォント・ウェイト)

数値か、名前付き(可能な場合)のfont-weight値を必須にする
名前付きの値が予想される場合は、有効な名前のみを要求する

.stylelintrc
//数値の場合
"font-weight-notation": "numeric"

//名前つきの値の場合
"font-weight-notation": "named-where-possible"

//オプション
"ignore": ["relative"]
Function(関数)

許可する関数のリストを指定

.stylelintrc
"function-allowed-list": ["関数名1","関数名2","関数名3"]

許可しない関数のリストを指定

.stylelintrc
　"function-disallowed-list": ["関数名1","関数名2","関数名3"]

「//」で始まるURL指定を禁止

.stylelintrc
"function-url-no-scheme-relative": true

許可するURLスキームのリストを指定

.stylelintrc
"function-url-scheme-allowed-list": ["任意の文字列",正規表現]

許可しないURLスキームのリストを指定

.stylelintrc
"function-url-scheme-disallowed-list": ["任意の文字列",正規表現]
Keyframes(キーフレーム)

キーフレーム名のパターンを指定

.stylelintrc
"keyframes-name-pattern": ["任意の文字列",正規表現]
Number(数値)

数値で使用できる小数点以下の桁数を制限

.stylelintrc
"number-max-precision": 数値

//オプション
"ignoreUnits": [正規表現, "任意の文字列"]
Time(時間)

時間値の最小ミリ秒数を指定

.stylelintrc
"time-min-milliseconds": 数値

//オプション
"ignore": ["delay"]
Unit(単位)

許可する単位のリストを指定

.stylelintrc
"unit-allowed-list": ["単位名1","単位名2","単位名3"]

//オプション
"ignoreProperties": { unit: ["プロパティ名", 正規表現] }

許可しない単位のリストを指定

.stylelintrc
"unit-disallowed-list": ["単位1","単位2","単位3"]

//オプション
"ignoreProperties": { unit: ["プロパティ名", 正規表現]  }
"ignoreMediaFeatureNames": { unit: ["プロパティ名", 正規表現]  }
Shorthand property(ショートハンド・プロパティ)

省略形のプロパティで冗長な値を禁止(自動修正可能)

.stylelintrc
"shorthand-property-no-redundant-values": true
Value(値)

値のベンダープレフィックスを禁止(自動修正可能)

.stylelintrc
"value-no-vendor-prefix": true

//オプション
"ignoreValues": ["任意の文字列"]
Custom property(カスタム・プロパティ)

カスタムプロパティのパターンを指定

.stylelintrc
"custom-property-pattern": ["任意の文字列",正規表現]
Property(プロパティ)

許可するプロパティのリストを指定

.stylelintrc
"property-allowed-list": ["任意の文字列1","任意の文字列1","正規表現1","正規表現2"]

許可しないプロパティのリストを指定

.stylelintrc
"property-disallowed-list": ["任意の文字列1","任意の文字列1","正規表現1","正規表現2"]

プロパティのベンダープレフィックスを禁止(自動修正可能)

.stylelintrc
"property-no-vendor-prefix": true

//オプション
"ignoreProperties": [正規表現, "任意の文字列"]
Declaration(宣言)

1つの省略形プロパティに結合できる長い形式のプロパティを禁止

.stylelintrc
"declaration-block-no-redundant-longhand-properties": true

//オプション
"ignoreShorthands": [正規表現, "任意の文字列"]

宣言内で!importantを禁止

.stylelintrc
"declaration-no-important": true

宣言内で許可するプロパティと単位のペアのリストを指定

.stylelintrc
"declaration-property-unit-allowed-list": 
{
  "プロパティ1": ["単位1", "単位2"],
  "プロパティ2": ["単位1"],
  "プロパティ3": []
}

宣言内で許可しないプロパティと単位のペアのリストを指定

.stylelintrc
"declaration-property-unit-disallowed-list": 
{
  "プロパティ1": ["単位1", "単位2"],
  "プロパティ2": ["単位1"],
  "プロパティ3": []
}

宣言内で許可するプロパティと値のペアのリストを指定

.stylelintrc
"declaration-property-value-allowed-list": 
{
  "任意の文字列1": ["値1"],
  "任意の文字列2": [正規表現],
  "正規表現": [正規表現]
}

宣言内で許可しないプロパティと値のペアのリストを指定

.stylelintrc
"declaration-property-value-disallowed-list": 
{
  "任意の文字列1": ["値1"],
  "任意の文字列2": [正規表現],
  "正規表現": [正規表現]
}
Declaration block(宣言ブロック)

単一行の宣言ブロック内の宣言の数を制限

.stylelintrc
"declaration-block-single-line-max-declarations": 数値
Selector(セレクタ)

許可する属性演算子のリストを指定
(属性演算子は"=", "|="など)

.stylelintrc
"selector-attribute-operator-allowed-list": ["属性演算子1","属性演算子2","属性演算子3"]

許可しない属性演算子のリストを指定
(属性演算子は"=", "|="など)

.stylelintrc
"selector-attribute-operator-disallowed-list":  ["属性演算子1","属性演算子2","属性演算子3"]

クラスセレクタのパターンを指定

.stylelintrc
"selector-class-pattern": ["任意の文字列",正規表現]

許可するコンビネーターのリストを指定
(コンビネーターは、>、+、~、半角スペース)

.stylelintrc
"selector-combinator-allowed-list": ["コンビネーター1"、"コンビネーター2"、"コンビネーター3"]

許可しないコンビネーターのリストを指定
(コンビネーターは、>、+、~、半角スペース)

.stylelintrc
"selector-combinator-disallowed-list": ["コンビネーター1"、"コンビネーター2"、"コンビネーター3"]

IDセレクタのパターンを指定

.stylelintrc
"selector-id-pattern": ["任意の文字列",正規表現]

セレクタ内の属性セレクタの数を制限

.stylelintrc
"selector-max-attribute": 数値

//オプション
"ignoreAttributes": [正規表現, "任意の文字列"]

セレクタ内のクラスの数を制限

.stylelintrc
"selector-max-class": 数値

セレクタのコンビネーターの数を制限

.stylelintrc
"selector-max-combinators": 数値

セレクタ内の複合セレクタの数を制限

.stylelintrc
"selector-max-compound-selectors": 数値

セレクタ内の隣接する空行の数を制限(自動修正可能)

.stylelintrc
"selector-max-empty-lines": 数値

セレクタ内のIDセレクタの数を制限

.stylelintrc
"selector-max-id": 数値

//オプション
"ignoreContextFunctionalPseudoClasses": [正規表現, "任意の文字列"]

セレクタ内の疑似クラスの数を制限

.stylelintrc
"selector-max-pseudo-class": 数値

セレクタの詳細度を制限

.stylelintrc
"selector-max-specificity": "IDの詳細度,classの詳細度,typeの詳細度"

セレクタ内のタイプの数を制限

.stylelintrc
"selector-max-type": 数値

//オプション
"ignore": ["child", "compounded", "descendant", "next-sibling"]
"ignoreTypes": [正規表現, "任意の文字列"]

セレクタ内のユニバーサルセレクタの数を制限

.stylelintrc
"selector-max-universal": 数値

ルール内にネストされたルールのセレクタのパターンを指定

.stylelintrc
"selector-nested-pattern": ["任意の文字列",正規表現]

タイプによるセレクタの修飾を禁止

.stylelintrc
"selector-no-qualifying-type": true

//オプション
ignore: ["属性名", "クラス名", "ID名"]

セレクタのベンダープレフィックスを禁止(自動修正可能)

.stylelintrc
"selector-no-vendor-prefix": true

//オプション
"ignoreSelectors": [正規表現, "任意の文字列"]

許可する疑似クラスセレクタのリストを指定

.stylelintrc
"selector-pseudo-class-allowed-list": ["任意の文字列",正規表現]

許可しない疑似クラスセレクタのリストを指定

.stylelintrc
"selector-pseudo-class-disallowed-list": ["任意の文字列",正規表現]

許可する疑似要素セレクタのリストを指定

.stylelintrc
"selector-pseudo-element-allowed-list":  ["任意の文字列",正規表現]

疑似要素にのコロンを「1つ」か「2つ」に統一(自動修正可能)

.stylelintrc
//コロン1つ
"selector-pseudo-element-colon-notation": "single"

//コロン2つ
"selector-pseudo-element-colon-notation": "double"

許可しない疑似要素セレクタのリストを指定

.stylelintrc
"selector-pseudo-element-disallowed-list":  ["任意の文字列",正規表現]
Media feature(メディア・フィーチャー)

カスタムメディアクエリ名のパターンを指定

.stylelintrc
"media-feature-name-allowed-list": ["任意の文字列",正規表現]

許可しないメディア・フィーチャー名のリストを指定

.stylelintrc
"media-feature-name-disallowed-list": ["任意の文字列",正規表現]　

メディア・フィーチャー名のベンダープレフィックスを禁止(自動修正可能)

.stylelintrc
"media-feature-name-no-vendor-prefix": true

許可するメディア・フィーチャー名と値のペアのリストを指定

.stylelintrc
"media-feature-name-value-allowed-list": ["任意の文字列",正規表現]
Custom media(カスタムメディア)

カスタムメディアクエリ名のパターンを指定

.stylelintrc
"custom-media-pattern": ["任意の文字列",正規表現]
At-rule(@ルール)

許可する@ルールのリストを指定

.stylelintrc
"at-rule-allowed-list": ["@ルール名1","@ルール名2","@ルール名3"]

許可しない@ルールのリストを指定

.stylelintrc
"at-rule-disallowed-list": ["@ルール名1","@ルール名2","@ルール名3"]

@ルールのベンダープレフィックスを禁止(自動修正可能)

.stylelintrc
"at-rule-no-vendor-prefix": true

@ルールに必須のプロパティのリストを指定

.stylelintrc
"at-rule-property-required-list": 
{
  "@ルール名": ["プロパティ1", "プロパティ2", "プロパティ3"]
}
Comment(コメント)

コメント内の許可しない単語のリストを指定

.stylelintrc
"comment-word-disallowed-list": ["任意の文字列1","任意の文字列2","正規表現1","正規表現2"]
General / Sheet(一般/シート)]

ネストの深さを制限

.stylelintrc
"max-nesting-depth": 数値

//オプション
"ignore": ["blockless-at-rules"]
"ignore": ["pseudo-classes"]
"ignoreAtRules": ["/regex/", /regex/, "string"]

不明なアニメーションを禁止

.stylelintrc
"no-unknown-animations": true

Stylistic issues

CSSとしては影響は無いものの、大文字や小文字の統一や改行など、個人での書き方が違ってきやすい部分を統一するのに使います。

Color(色)

16進数での色指定を「小文字」か「大文字」のどちらかに統一(自動修正可能)

.stylelintrc
//小文字の場合
"color-hex-case": "lower"

//大文字の場合
"color-hex-case": "upper"

16進数での色指定を「短い表記」か「長い表記」のどちらかに統一(自動修正可能)

.stylelintrc
//短い表記の場合
"color-hex-length": "short"

//長い表記の場合
"color-hex-length": "long"
Font family(フォント・ファミリー)

フォントファミリ名を引用符で囲むかどうかを指定

.stylelintrc
//引用符が必要な場合にのみ引用符を使用し、それ以外の場合は引用符を使用しない
"font-family-name-quotes": "always-where-required"

//引用符が推奨されている場合にのみ引用符を使用し、その他の場合は引用を禁止
"font-family-name-quotes": "always-where-recommended"
　
//キーワードではないすべてのフォントファミリ名は引用符で囲む
"font-family-name-quotes": "always-unless-keyword"
Function(関数)

関数のカンマの後に改行を「必須」か、スペースを「禁止」(自動修正可能)

.stylelintrc
//必須
"function-comma-newline-after": "always"
　
//複数行の時必須
"function-comma-newline-after": "always-multi-line"
　
//複数行の時禁止
"function-comma-newline-after": "never-multi-line"

関数のカンマの前に改行「必須」か、スペース「禁止」を(自動修正可能)

.stylelintrc
//必須
"function-comma-newline-before": "always"

//複数行の時必須
"function-comma-newline-before": "always-multi-line"

//複数行の時禁止
"function-comma-newline-before": "never-multi-line"

関数のカンマの後に1つのスペースを「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"function-comma-space-after": "always"

//禁止
"function-comma-space-after": "never"

//単一行の時必須
"function-comma-space-after": "always-single-line"

//単一行の時禁止
"function-comma-space-after": "never-single-line"

関数のカンマの前に1つのスペース「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"function-comma-space-before": "always"

//禁止
"function-comma-space-before": "never"

//単一行の時必須
"function-comma-space-before": "always-single-line"

//単一行の時禁止
"function-comma-space-before": "never-single-line"

関数内の連続する空行の数を制限(自動修正可能)

.stylelintrc
"function-max-empty-lines": 数値

関数名を「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"function-name-case": "lower"

//大文字
"function-name-case":"upper"

関数の括弧の内側に改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"function-parentheses-newline-inside": "always"

//複数行の時必須
"function-parentheses-newline-inside": "always-multi-line"

//複数行の時禁止
"function-parentheses-newline-inside": "never-multi-line"

関数の括弧の内側に1つのスペースを「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"function-parentheses-space-inside": "always"

//禁止
"function-parentheses-space-inside": "never"

//単一行の時必須
"function-parentheses-space-inside": "always-single-line"

//単一行の時禁止
"function-parentheses-space-inside": "never-single-line"

URLの引用符の「必須」か「禁止」の統一

.stylelintrc
//必須
"function-url-quotes": "always"

//禁止
"function-url-quotes": "never"

//オプション
"except": ["empty"]

関数の後のスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"function-whitespace-after": "always"

//禁止
"function-whitespace-after": "never"
Number(数値)

1未満の小数の、先頭のゼロの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"number-leading-zero": "always"

//禁止
"number-leading-zero": "never"

数字の後続ゼロを禁止(自動修正可能)

.stylelintrc
"number-no-trailing-zeros": true
String(文字列)

文字列を囲む場合「シングルクォーテーション」か「ダブルクォーテーション」に統一(自動修正可能)

.stylelintrc
//シングルクォーテーション
"string-quotes": "single"

//ダブルクォーテーション
"string-quotes": "double"

//オプション
"avoidEscape": true (デフォルト)
"avoidEscape": false
Unit(単位)

単位を「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"unit-case": "lower"

//大文字
"unit-case": "upper"
Value(値)

キーワード値を「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"value-keyword-case": "lower"

//大文字
"value-keyword-case": "upper"

//オプション
"ignoreKeywords": [正規表現, "任意の文字列"]
"ignoreProperties": [正規表現, "任意の文字列"]
"ignoreFunctions": [正規表現, "任意の文字列"]
Value list(値リスト)

値リストのカンマの後の改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"value-list-comma-newline-after": "always"

//複数行の時必須
"value-list-comma-newline-after": "always-multi-line"

//複数行の時禁止
"value-list-comma-newline-after": "never-multi-line"

値リストのカンマの前の改行を「必須」か、空白を「禁止」

.stylelintrc
//必須
"value-list-comma-newline-before: "always"

//複数行の時必須
"value-list-comma-newline-before: "always-multi-line"

//複数行の時禁止
"value-list-comma-newline-before": "never-multi-line"

値リストのカンマの後に1つのスペースを「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"value-list-comma-space-after": "always"

//禁止
"value-list-comma-space-after": "never"

//複数行の時必須
"value-list-comma-space-after": "always-single-line"

//複数行の時禁止
"value-list-comma-space-after": "never-single-line"

値リストのカンマの前に1つのスペースが「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"value-list-comma-space-before": "always"

//禁止
"value-list-comma-space-before": "never"

//複数行の時必須
"value-list-comma-space-before": "always-single-line"

//複数行の時禁止
"value-list-comma-space-before": "never-single-line"

値リスト内の連続する空行の数を制限(自動修正可能)

.stylelintrc
"value-list-max-empty-lines": 数値
Custom property(カスタム・プロパティ)

カスタムプロパティの前の空行を「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"custom-property-empty-line-before": "always"

//禁止
"custom-property-empty-line-before": "never"

//オプション
"except": ["after-comment", "after-custom-property", "first-nested"]
"ignore": ["after-comment", "first-nested", "inside-single-line-block"]
Property(プロパティ)

プロパティを「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"property-case": "lower"

//大文字
"property-case": "upper"
Declaration(宣言)

宣言の先頭の後に1つのスペースを「必須」か「禁止」(自動修正可能)

.stylelintrc
//必須
"declaration-bang-space-after": "always"

//禁止
"declaration-bang-space-after": "never"

宣言の前に1つのスペースを「必須」か「禁止」(自動修正可能)

.stylelintrc
//必須
"declaration-bang-space-before": "always"

//禁止
"declaration-bang-space-before": "never"

宣言のコロンの後の改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"declaration-colon-newline-after": "always"

//複数行の時必須
"declaration-colon-newline-after": "always-multi-line"

宣言のコロンの後に1つのスペースを「必須」か「禁止」(自動修正可能)

.stylelintrc
//必須
"declaration-colon-space-after": "always"

//禁止
"declaration-colon-space-after": "never"

//単数行の時必須
"declaration-colon-space-after": "always-single-line"

宣言のコロンの前の1つのスペースを「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"declaration-colon-space-before": "always"

//禁止
"declaration-colon-space-before": "never"

宣言の前の空行を「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"declaration-empty-line-before": "always"

//禁止
"declaration-empty-line-before": "never"
　
//オプション
"except": ["after-comment", "after-declaration", "first-nested"]
"ignore": ["after-comment", "after-declaration", "first-nested", "inside-single-line-block"]
Declaration block(宣言ブロック)

宣言ブロックのセミコロンの後の改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"declaration-block-semicolon-newline-after": "always"

//複数行の時必須
"declaration-block-semicolon-newline-after": "always-multi-line"

//複数行の時禁止
"declaration-block-semicolon-newline-after": "never-multi-line"

宣言ブロックのセミコロンの前の改行を「必須」か、空白を「禁止」

.stylelintrc
//必須
"declaration-block-semicolon-newline-before": "always"

//複数行の時必須
"declaration-block-semicolon-newline-before": "always-multi-line"

//複数行の時禁止
"declaration-block-semicolon-newline-before": "never-multi-line"

宣言ブロックのセミコロンの後に1つのスペースを「必須」か「禁止」に統一（自動修正可能）。

.stylelintrc
//必須
"declaration-block-semicolon-space-after": "always"

//禁止
"declaration-block-semicolon-space-after": "never"

//単一行の時必須
"declaration-block-semicolon-space-after": "always-single-line"

//単一行の時禁止
"declaration-block-semicolon-space-after": "never-single-line"

宣言ブロックのセミコロンの前の1つのスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"declaration-block-semicolon-space-before": "always"

//禁止
"declaration-block-semicolon-space-before": "never"

//単一行の時必須
"declaration-block-semicolon-space-before": "always-single-line"

//単一行の時禁止
"declaration-block-semicolon-space-before": "never-single-line"

宣言ブロック内の末尾のセミコロンの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"declaration-block-trailing-semicolon": "always"

//禁止
"declaration-block-trailing-semicolon": "never"
Block(ブロック)

ブロックの閉じ括弧の前の空行の「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//複数行の時必須
"block-closing-brace-empty-line-before": "always-multi-line"

//禁止
"block-closing-brace-empty-line-before": "never"

//オプション
"except": ["after-closing-brace"]

ブロックの閉じ括弧の後に改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"block-closing-brace-newline-after": "always"

//単数行の時必須
"block-closing-brace-newline-after": "always-single-line"

//単数行の時禁止
"block-closing-brace-newline-after": "never-single-line"
　
//複数行の時必須
"block-closing-brace-newline-after": "always-multi-line"

//複数行の時禁止
"block-closing-brace-newline-after": "never-multi-line"

//オプション
"ignoreAtRules": [正規表現, "任意の文字列"

ブロックの閉じ括弧の前に改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"block-closing-brace-newline-before": "always"
　
//複数行の時必須
"block-closing-brace-newline-before": "always-multi-line"

//複数行の時禁止
"block-closing-brace-newline-before": "never-multi-line"

ブロックの閉じ括弧の後の1つのスペースを「必須」か「禁止」の統一

.stylelintrc
//必須
"block-closing-brace-space-after": "always"

//禁止
"block-closing-brace-space-after": "never"

//単数行の時必須
"block-closing-brace-space-after": "always-single-line"

//単数行の時禁止
"block-closing-brace-space-after": "never-single-line"

//複数行の時必須
"block-closing-brace-space-after": "always-multi-line"

//複数行の時禁止
"block-closing-brace-space-after": "never-multi-line"

ブロックの閉じ括弧の前の1つのスペースを「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"block-closing-brace-space-before": "always"

//禁止
"block-closing-brace-space-before": "never"

//単数行の時必須
"block-closing-brace-space-before": "always-single-line"

//単数行の時禁止
"block-closing-brace-space-before": "never-single-line"

//複数行の時必須
"block-closing-brace-space-before": "always-multi-line"

//複数行の時禁止
"block-closing-brace-space-before": "never-multi-line"

ブロックの開き括弧の後の改行を必須(自動修正可能)

.stylelintrc
//必須
"block-opening-brace-newline-after": "always"

//複数行の時必須
"block-opening-brace-newline-after": "always-multi-line"
　
//複数行の時禁止
"block-opening-brace-newline-after": "never-multi-line"

ブロックの開き括弧の前の改行を「必須」か、スペースを「禁止」(自動修正可能)

.stylelintrc
//必須
"block-opening-brace-newline-before": "always"

//単数行の時必須
"block-opening-brace-newline-before": "always-single-line"

//単数行の時禁止
"block-opening-brace-newline-before": "never-single-line"

//複数行の時必須
"block-opening-brace-newline-before": "always-multi-line"

//複数行の時禁止
"block-opening-brace-newline-before": "never-multi-line"

ブロックの開き括弧の後の1つのスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"block-opening-brace-space-after": "always"

//禁止
"block-opening-brace-space-after": "never"

//単数行の時必須
"block-opening-brace-space-after": "always-single-line"

//単数行の時禁止
"block-opening-brace-space-after": "never-single-line"

//複数行の時必須
"block-opening-brace-space-after": "always-multi-line"

//複数行の時禁止
"block-opening-brace-space-after": "never-multi-line"

ブロックの開き括弧の前に1つのスペースが「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"block-opening-brace-space-before": "always"
　
//禁止
"block-opening-brace-space-before": "never"

//単数行の時必須
"block-opening-brace-space-before": "always-single-line"

//単数行の時禁止
"block-opening-brace-space-before": "never-single-line"
　
//複数行の時必須
"block-opening-brace-space-before": "always-multi-line"
　
//複数行の時禁止
"block-opening-brace-space-before": "never-multi-line"
Selector(セレクタ)

属性セレクタ内のブラケットの内側に1つのスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"selector-attribute-brackets-space-inside": "always"

//禁止
"selector-attribute-brackets-space-inside": "never"

属性セレクタ内の演算子の後の1つのスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"selector-attribute-operator-space-after": "always"

//禁止
"selector-attribute-operator-space-after": "never"

属性セレクタ内の演算子の前に1つのスペースを「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"selector-attribute-operator-space-before": "always"

//禁止
"selector-attribute-operator-space-before": "never"

属性値の引用符を「必須」か「禁止」の統一

.stylelintrc
//必須
"selector-attribute-quotes": "always"

//禁止
"selector-attribute-quotes": "never"

セレクタのコンビネーターの後に1つのスペースを「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"selector-combinator-space-after": "always"

//禁止
"selector-combinator-space-after": "never"

セレクタのコンビネーターの前に1つのスペースを「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"selector-combinator-space-before": "always"

//禁止
"selector-combinator-space-before": "never"

セレクタの子孫コンビネーターに非スペース文字を禁止(自動修正可能)

.stylelintrc
"selector-descendant-combinator-no-non-space": true

疑似クラスセレクタを「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"selector-pseudo-class-case": "lower"

//大文字
"selector-pseudo-class-case":"upper"

疑似クラスセレクタ内の括弧の内側に1つのスペースを「必須」か「禁止」の統一(Autofixable)

.stylelintrc
//必須
"selector-pseudo-class-parentheses-space-inside": "always"

//禁止
"selector-pseudo-class-parentheses-space-inside": "never"

疑似要素セレクタを「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"selector-pseudo-element-case": "lower"

//大文字
"selector-pseudo-element-case": "upper"

タイプセレクタを「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"selector-type-case": "lower"

//大文字
"selector-type-case": "upper"
Selector list(セレクタ・リスト)

セレクタ・リストのカンマの後の改行を「必須」か、空白を「禁止」(自動修正可能)

.stylelintrc
//必須
"selector-list-comma-newline-after": "always"

//複数行の時必須
"selector-list-comma-newline-after": "always-multi-line"

//複数行の時禁止
"selector-list-comma-newline-after": "never-multi-line"

セレクタ・リストのカンマの前の改行を「必須」か、スペースを「禁止」(自動修正可能)

.stylelintrc
//必須
"selector-list-comma-newline-before": "always"

//複数行の時必須
"selector-list-comma-newline-before": "always-multi-line"

//複数行の時禁止
"selector-list-comma-newline-before": "never-multi-line"

セレクタ・リストのカンマの後に1つのスペースを「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"selector-list-comma-space-after": "always"

//禁止
"selector-list-comma-space-after": "never"

//単一行の時必須
"selector-list-comma-space-after": "always-single-line"

//単一行の時禁止
"selector-list-comma-space-after": "never-single-line"

セレクタ・リストのカンマの前に1つのスペースの「必須」か「禁止」の統一（自動修正可能）。

.stylelintrc
//必須
　"selector-list-comma-space-before": "always"

//禁止
"selector-list-comma-space-before": "never"

//単一行の時必須
"selector-list-comma-space-before": "always-single-line"

//単一行の時禁止
"selector-list-comma-space-before": "never-single-line"
Rule(ルール)

ルールの前の空行を「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"rule-empty-line-before": "always"

//禁止
"rule-empty-line-before": "never"

//複数行のルールの前には空行必須
"rule-empty-line-before": "always-multi-line"

//複数行のルールの前には空行禁止
"rule-empty-line-before": "never-multi-line"
Media feature(メディア・フィーチャー)

メディア・フィーチャーのコロンの後の1つのスペースを「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"media-feature-colon-space-after": "always"

//禁止
"media-feature-colon-space-after": "never"

メディアフィーチャーのコロンの前に1つのスペースが「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"media-feature-colon-space-before": "always"

//禁止
"media-feature-colon-space-before": "never"

メディアフィーチャー名を「小文字」か「大文字」に統一(自動修正可能)

.stylelintrc
//小文字
"media-feature-name-case": "lower"

//大文字
"media-feature-name-case": "upper"

メディアフィーチャー内の括弧の内側に1つのスペースを「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"media-feature-parentheses-space-inside": "always"

//禁止
"media-feature-parentheses-space-inside": "never"

メディア・フィーチャーの範囲演算子の後に1つのスペースの「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"media-feature-range-operator-space-after": "always"

//禁止
"media-feature-range-operator-space-after": "never

メディア・フィーチャーの範囲演算子の前に1つのスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"media-feature-range-operator-space-before": "always"

//禁止
"media-feature-range-operator-space-before": "never"
Media query list(メディア・クエリ・リスト)

メディアクエリリストのカンマの後の改行を「必須」にするか、スペースの「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"media-query-list-comma-newline-after": "always"

//複数行のとき必須
"media-query-list-comma-newline-after": "always-multi-line"

//複数行のとき禁止
"media-query-list-comma-newline-after": "never-multi-line"

メディアクエリリストのカンマの前に改行の「必須」か「禁止」の統一

.stylelintrc
//必須
"media-query-list-comma-newline-before": "always"

//複数行のとき必須
"media-query-list-comma-newline-before": "always-multi-line"

//複数行のとき禁止
"media-query-list-comma-newline-before": "never-multi-line"

メディアクエリリストのカンマの後に1つのスペースを「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"media-query-list-comma-space-after": "always"

//禁止
"media-query-list-comma-space-after": "never"

//複数行のとき必須
"media-query-list-comma-space-after": "always-single-line"

//複数行のとき禁止
"media-query-list-comma-space-after": "never-single-line"

メディアクエリリストのカンマの前のスペースの「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"media-query-list-comma-space-before": "always"

//禁止
"media-query-list-comma-space-before": "never"

//複数行のとき必須
"media-query-list-comma-space-before": "always-single-line"

//複数行のとき禁止
"media-query-list-comma-space-before": "never-single-line"
At-rule(@ルール)

@ルールの前の空行の「必須」か「禁止」の統一(自動修正可能)

.stylelintrc
//必須
"at-rule-empty-line-before": "always"

//禁止
"at-rule-empty-line-before": "never"

@ルール名の「小文字」か「大文字」を統一(自動修正可能)

.stylelintrc
//小文字
"at-rule-name-case": "lower"

//大文字
"at-rule-name-case": "upper"

@ルール名の後の改行を「必須」にする

.stylelintrc
//必須
"at-rule-name-newline-after": "always"

//複数行の時必須
"at-rule-name-newline-after": "always-multi-line"

@ルール名の後に1つのスペースを「必須」にする(自動修正可能)

.stylelintrc
//必須
"at-rule-name-space-after": "always"

//単一行の時必須
"at-rule-name-space-after": "always-single-line"

@ルールのセミコロンの後の改行を「必須」にする(自動修正可能)

.stylelintrc
"at-rule-semicolon-newline-after": "always"

@ルールのセミコロンの前に1つのスペースの「必須」か「禁止」の統一

.stylelintrc
//必須
"at-rule-semicolon-space-before": "always"

//禁止
"at-rule-semicolon-space-before": "never"
Comment(コメント)

コメントの前の空行を「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"comment-empty-line-before": "always"

//禁止
"comment-empty-line-before": "never"

//オプション
"ignoreComments": [正規表現, "任意の文字列"]

コメントマーカーの内側の空白を「必須」か「禁止」に統一(自動修正可能)

.stylelintrc
//必須
"comment-whitespace-inside": "always"

//禁止
"comment-whitespace-inside": "never"
General / Sheet(一般/シート)]

インデントの指定(自動修正可能)

.stylelintrc
"indentation": 数値

//オプション
"baseIndentLevel": 数
"baseIndentLevel": "auto"
"indentInsideParens": "twice"
"indentInsideParens": "once-at-root-twice-in-block"
"indentClosingBrace": true
"indentClosingBrace": false
"except": ["block", "param", "value"]
"ignore": ["inside-parens", "param", "value"]

「UNIX」か「Windows」の改行を指定(自動修正可能)

.stylelintrc
//UNIXの場合
"linebreaks": "unix"

//Windowsの場合
"linebreaks": "windows"

連続する空行の数を制限(自動修正可能)

.stylelintrc
"max-empty-lines": 数値　

//オプション
"ignore": ["comments"]

行の長さの制限

.stylelintrc
"max-line-length": 数値

//オプション
"ignore": ["non-comments"]
"ignore": ["comments"]
"ignorePattern": 正規表現

行末の空白を禁止(自動修正可能)

.stylelintrc
"no-eol-whitespace": true

//オプション
"ignore": ["empty-lines"]

ソースの終わりの改行無しを禁止(自動修正可能)

.stylelintrc
"no-missing-end-of-source-newline": true

最初の行を空にするのを禁止(自動修正可能)

.stylelintrc
"no-empty-first-line": true

Unicode BOMを「必須」か「禁止」に統一

.stylelintrc
//必須の場合
"unicode-bom": "always"

//禁止の場合
"unicode-bom": "never"

Plugin

stylelint-declaration-block-no-ignored-properties

displayの値によって無視されてしまうプロパティを検知します。
例：display: inline の要素ではwidthを指定しても無効です。

インストール
terminal
npm i -D stylelint-declaration-block-no-ignored-properties
.stylelintrcの設定変更
.stylelintrc
{
 "plugins": [
   "stylelint-declaration-block-no-ignored-properties"
  ],
  "rules": {
    "plugin/declaration-block-no-ignored-properties": true,
  }
}
stylelint-no-unsupported-browser-features

ブラウザ非対応のプロパティがないかを検知
browserslistで対応ブラウザのバージョンを指定し、サポートされていないプロパティを検知

インストール
terminal
npm i -D stylelint-no-unsupported-browser-features
.stylelintrcの設定変更
.stylelintrc
{
 "plugins": [
   "stylelint-no-unsupported-browser-features"
 ],
 "rules": {
   "plugin/no-unsupported-browser-features": [true, {
     "ignore": ["除外"]
   }]
 }
}

.browserslistrcで対象ブラウザを指定する

Order(プロパティの順番)

Prettierではプロパティの並び順は変更できません。

stylelint-order

自動修正でプロパティをアルファベット順に並べ替えます。

インストール
terminal
npm i -D stylelint-order
.stylelintrcの設定変更
stylelintrc
{
  "plugins": [
    "stylelint-order"
  ],
  "rules": {
    "order/properties-alphabetical-order": true
  }
}

stylelint-config-rational-order

関連するプロパティごとに並び替えます。

インストール
terminal
npm i --D stylelint-config-rational-order
.stylelintrcの設定変更
.stylelintrc
{
  "extends": [
    "stylelint-config-rational-order"
  ]
}

stylelint-config-recess-order

機能単位での並び替えを行います。

インストール
terminal
npm i -D stylelint stylelint-config-recess-order
.stylelintrcの設定変更
.stylelintrc
{
  "extends": [
    "stylelint-config-recess-order"
  ]
}

StylelintとPrettierを連携させる

stylelint-prettierを使ってStylelintからPrettierを呼び出します。

インストール

prettierと.prettierrcはすでに用意している前提です。

terminal
npm i -D stylelint-prettier stylelint-config-prettier

.stylelintrcの設定変更

.stylelintrc.js
{
  "extends": ["stylelint-prettier/recommended"],
}

prettierの設定を上書きする場合はrulesに書きます。

.stylelintrc
{
  "extends": ['stylelint-prettier/recommended'],
  "rules":{
    "prettier/prettier": [true, {
      "singleQuote": false
    }],
   }
}

SCSS用のルールを追加する

stylelint-scss

stylelintはSCSSに対応していますが、stylelint-scssプラグインでSCSS用のルールをさらに追加できます。

インストール

terminal
npm i -D stylelint-scss

.stylelintrcの設定変更

.stylelintrc
{
  "plugins": ['stylelint-scss'], 
  "extends": [
    'stylelint-prettier/recommended',
  ],
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true,
  }
}

stylelint-scssで使えるルール

Stylelintから除外するファイルの指定

プロジェクトルートに.stylelintignoreを作成します。

.stylelintignore
/src/css/**/*.css
/src/scss/**/*.scss

.stylelintrcのジェネレータ

Stylelint Config Generator

↧

(´ω｀) ... VueのTable {width,align}を一括指定するディレクティブつくりました

September 20, 2020, 8:43 pm
$
0
0

前回、DatGuiをBackEnd APIを検証するための登録画面に利用している。って記事を記載した。がだれからも良いねはなくLGTMも来なくて内心ビビってる。マジか。と思った。というかツイッターのフォロワーは未だ増えないままだ。この現状を見てInputMaskをぶっこんだ話なんかも展開する予定だったがやめた。そしてQiitaフォントサイズ大きいなってことで自分でブログを作ろうと思った。プロトタイプはあるし順調だ。だからその話もメモ代わりにQiitaで展開していくつもりだ。そこで動作するサンプルなんかも公開しよう。その間の記事はQiitaにメモ代わりで投稿することにした。

1.前提

趣味で何かを開発していたら、テーブルの列が後から増えてくる（登録する項目なんか）ってのはよくある話だ。少なくとも自分の間じゃそうだ。最初のプロトタイプを作るときは名前なんて姓だけで十分だしあとIDとPASSの３項目でテーブル作って社員登録機能を作る。みたいな最小限の構成で組み始めている。できた次に社員名いっとくか。メールアドレスいっとくか。みたいに項目を増やしていく。（機能が出来たら次のデータを作る。棚田だ）
image.png

2.問題

ここで起きてくる問題はCSSだ。今や<tag>の中にstyleをぶっこむなんて真似も全くしてこなかった俺だが、このような作り方の前では後から項目が増えるからID指定やCLASS指定でやろうと面倒くさくなってくる。nth-child(n)で最初は指定していたが列間の途中に項目を増やす状況になると、配列途中に値を挿入するみたいに以降の全番号を手で振りなおすという愚かさだ。面倒くさい（姓と名は左寄せのほうがいいな）

sample.css
tabletrtd:nth-child(1){width:6em;text-align:center;}tabletrtd.employee-name{width:6wm;text-align:center;}tabletrtd#employee-name{width:6em;text-align:center;}tabletrtd[data=employee_name]{width:6em;text-align:center;}

3.結局

タグの中に書き込んだ方が一番手っ取り早い。という結論に至った。周りはどうかな？どうやってるか知りたい。だが、なぜ毎回widthやtext-alignを打ち込まなくちゃならないんだ？面倒くさい。APIを検証するためのこの画面ではテーブルの項目は永遠と増え続ける。テーブル自体もだ。そのたびに書くのは面倒だ。その間の時間を省いてチロルチョコを食べた方がいい。健康的な考えだ。

sample.html
<table><tr><tdstyle='width:6em;text-align:center;'></td></tr></table>

4.ということでディレクティブを作った

前置きが長かった。要はセルのtdのwidthとalignを{attribute:value}をvalueの一括指定でDOM作ってくれたら便利だなという話だ。ソースはこれ。

directive.vue
Vue.directive('style',function(el,binding,vnode){vnode.context.$nextTick(function(){vararr=binding.value.split(',')switch(binding.arg){case'align':_.each(el.children,function(el,i){varalign=arr[i]=='l'?'left':arr[i]=='r'?'right':'center'el.classList.add(align)})break;case'width':_.each(el.children,function(el,i){el.style.width=(arr[i]==undefined)?'auto':arr[i]+'em'})break;}})})

5.使い方

ディレクティブをかますだけ。<tr>に。列の幅指定はヘッダだけで良く配置指定はボディに組み込んでいるが、確かにv-style:alignは効率的じゃないかもしれない。全セルに指定することになるからループも多い。ここだけCSSにした方がいいかも。どうやるのがベストだと思うか知りたい。ダブルクォートの間にシングルクォートを挟むのはこれ自体を文字列として評価してもらうためだ。

それからこのコードはLODASHに依存している。_.each()のとこだけだ。

sample.html
<table><thead><trv-style:width="'7,7,7,5,5,5,5,5,5,5,5,5,5,auto'"></tr></thead><tbody><trv-for='v,k,n in list'v-style:align="'c,l,l,c,c,c,c,c,c,c,c,c,c,c'"></tr></tbody></table>

image.png

↧
Viewing all 8492 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>