混沌としてくるcssプロパティ

cssを書き込んでいくとプロパティ順序が混沌としてく...
可読性のためにも記述の順序を統一したいけど手動でやるのはめんどくさいので自動化できないかなーと思っていたらVScodeの丁度いい拡張機能があったので導入してみた。

インストールと設定

csscombというアドオンがあったので導入。

csscombとはフォーマッター機能にプラスしてcssプロパティのソート機能のオプションがある。便利。

設定はこんな感じ

 "csscomb.formatOnSave": true,
    "csscomb.ignoreFilesOnSave": [

    ],
    "csscomb.syntaxAssociations": {
    "postcss": "scss"
    },
    "csscomb.preset":"./.vscode/mycsscomb.json"
、

scssでも使いたいので"postcss"でscssを指定し"csscomb.preset"にcsscombの設定を記述したファイルを指定する。
mycsscomb.jsonの名前や場所はどこでもいい。適当にファイルを作成し以下の設定をする。

/.vscode/mycsscomb.json

{
    "exclude": [
        ".git/**",
        "node_modules/**",
        "bower_components/**"
    ],
    "always-semicolon": true,
    "block-indent": "  ",
    "color-case": "lower",
    "color-shorthand": false,
    "element-case": "lower",
    "eof-newline": false,
    "leading-zero": false,
    "quotes": "double",
    "remove-empty-rulesets": true,
    "space-after-colon": " ",
    "space-after-combinator": " ",
    "space-after-opening-brace": "\n",
    "space-after-selector-delimiter": "\n",
    "space-before-closing-brace": "\n",
    "space-before-colon": "",
    "space-before-combinator": " ",
    "space-before-opening-brace": "\n",
    "space-before-selector-delimiter": "",
    "strip-spaces": true,
    "unitless-zero": true,
    "vendor-prefix-align": false,
    "space-between-declarations": "\n",
    "sort-order": [
        [
            "background",
            "background-image",
            "background-size",
            "background-repeat",
            "content",
            "display",
            "position",
            "width",
            "height",
            "margin",
            "padding",
            "top",
            "botttom",
            "left",
            "right",
            "border",
            "color",
            "font",
            "font-size",
            "text-decoration",
            "text-align",
            "vertical-align",
            "writing-mode",
            "other text",
            "content"
        ]
    ]
}

sort-orderの部分がcssプロパティがソートする順序。backgroundのつぎにContentやdisplayが来るように設定した。
この辺はお好みで。

Ctr + s で自動整形してくれる。便利

　参考

• CSSの記述順で迷わない！汚いコードをキレイにしてコーディング速度をあげよう！VSCode拡張機能【CSScomb】
• 【Grunt】csscombでソートだけでなくインデントなどのフォーマットも整形する-

飲食店のHPでよく見るヘッダーがあり左にはロゴ、右には自店のsnsのアカウントの画像がある。
そして、その２つの要素を両端に置きたい時は親要素にdisplay:flex;とjustify-content:space-between;を使えば綺麗に納まる。
また、親要素にmargin,paddingでスペースを空けると見やすくなります。

はじめまして

はじめまして。Sheen Rulisonです。。カナダでFront-End Developerとして就職活動中の駆け出しエンジニアです。軽く経歴を話しますと、日本でSSOソフトウェアのカスタマーサポートとして、約５年働いた後、2019年3月へカナダへ渡り、HTML, CSS, JS, React, Node.js等を学びました
自分にとっても皆様にとっても有益な情報を共有できればと思います。disられ体制は整っておりますので、記事の内容に間違っている点や改善点等ございましたらご連絡いただけると涙がこぼれおちます。

どうも7noteです。見出しデザインに関するTips。

hタグにCSSを付ける時、どう書いていますか？
もしこのような書き方をしていれば、注意が必要かも！

index.html

<!-- 推奨しないCSSの付け方 -->

h2 {
  color: #f00;
  font-size: 200%;
  border-bottom: 1px solid #f00;
  margin: 0 0 50px;
}

なぜhタグに直接デザインのCSSを書いてはいけないのか？

例えば、何ページかあるサイトの開発をするとします。
このとき、全ページで使える共通のCSSファイルを用意するのが一般的かなと思いますが、
この共通のCSSファイルに上のようなCSSを書いてしまうと躓く可能性があります。

「サービスのページや会社概要のページは同じ見出しの見た目なので、html側ではh2タグを使って書きました。
しかし、お問い合わせのページでは見出し(h2)の見え方を後で変更しようという話になってしまいました。」

「急遽変更が必要だったため、お問い合わせのページ専用のCSSファイルに共通のh2のCSSを上書きするような書き方をしました。」

こうしてしまうと今後の修正の際に、共通のCSSファイルとお問い合わせのCSSファイルの2つに気を付けながら修正しなければなりません

また、お問い合わせの見出しデザインをほかの申込ページなどでも使うことになった場合、同じCSSが複数のファイルに分散してまたまた管理が大変になってしまいます。

このような場合でもclassで体裁を管理しておけば、クラスを付けたり外したりするだけで簡単に調整が可能になります。

まとめ

共通パーツの作りすぎにも注意

ある程度どこまで浸透するのかをしっかり把握していなければ、共通のパーツやCSSを安易に修正できなくなってしまいます。
そうならないためにも、分かりやすいクラス名とコメントを付けて管理を行ない、自分以外でも読めば分かるような作りで設計して作成をしましょう。

sample.css

/* よく使う赤色の下線付きの見出し */
.h-type01 {
  /* CSSデザイン */
}

/* フォームのあるページの見出し */
.h-type02 {
  /* CSSデザイン */
}

おそまつ！

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

基本的な使い方

親要素(例えばdiv)に display: flexをつけるだけ。

　ベンダープレフィックスってつける必要あるの？

一部のバージョンが古いブラウザでは対応していなかったりベンダープレフィックスが必要になりますが、それらのシェアも実際はほとんど0に近いので、気にしなくていいでしょう。
【2020年最新】Flexboxの対応ブラウザとベンダープレフィックスまとめ

---

最新のIE 11でもいくつかバグが報告されている

ともありますが、IEを想定しないなら、結局のところベンダープレフィックスは付けなくても大丈夫そう。

プロパティって色々あるけどどれ使えばいいの？

・大抵、「ブロック要素を手軽に横並びにしたい」という時に使うと思うので、その場合は、 justify-content (アイテムの水平方向の位置を指定する)と align-items (アイテムの垂直方向の位置を指定する)くらいかな。

・縦並びにしたかったら、flex-direction: column で、並び順を逆にしたければ flex-direction: row-reverse とか(でも使う頻度は多くない？)

・折り返しを制御するflex-wrap (デフォルトはnowrap で折り返さない)もあるけど、BootStrapのGrid System(col-とか)使えば、必要ない？

・align-content (アイテムの行の垂直方向の位置を指定する)は、行が複数になった時に使う、justify-content の縦版って感じかな(余白を埋めるか、どう割り振るか)。

参考

もう迷わない！CSS Flexboxの使い方を徹底解説

Webのテキストのレスポンシブ対応で、
PC表示で改行されないときはセンター寄せ、
SP表示で改行されてしまうときは、改行されたテキストのみ左寄せにしたいときがあります。（センター寄せだと気持ち悪い表示になる。）

そんなときはtext-aliginとdisplay inline-blockを使うと簡単に実装できることを知ったので、備忘録として書いています。

例となる画面はそのうち更新します。

レスポンシブはPC用とSP用でCSSを書き分けるのではなく、共通のソースで対応するというのが基本的な考え方みたいです。

index.js

import React from 'react';
import styles from './styles.css';

const App = () => {
  return (
    <div className={styles.accessory_container}>
      <div className={styles.accessory_text}>
        ながいてきすとーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
      </div>
    </div>
  );
};

export default App;

styles.css

.container {
  text-align: center;
}
.text{
  display: inline-block;
  text-align: left;
}

See the Pen display:flex と align-items: center by 熊瀬川直也 (@momonoki1990) on CodePen.

・そもそも div を横並びにするためには、親要素にdisplay: flex を指定すればよく、子要素に display: inline-block を指定する必要はなかった。 display: flex よくわかってない。理解したい。

参考

ブロック内でブロック要素を上下左右中央揃えにする技
上下中央揃えのCSSまとめ
Flexboxがたった3行で最も手軽

See the Pen padding-top: ~%とobject-fit:coverの併せ技 by 熊瀬川直也 (@momonoki1990) on CodePen.

object-fit: cover コンテナーに余白が出ないよう縦横比を維持しつつ、全体を覆うようにフィットさせ縦横中央に配置します。コンテナーからはみ出る部分はトリミングします。
【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー

→縦長の画像であればアスペクト比を保ったまま枠の横の長さに併せて画像を縮小し、縦のはみ出した部分を切り取り、横長の画像であればその逆のようなイメージでトリミングが行われる

・widthとheightを指定しないとトリミングは行われない。

See the Pen padding-top: ~%とobject-fit:coverの併せ技 by 熊瀬川直也 (@momonoki1990) on CodePen.

object-fit: cover コンテナーに余白が出ないよう縦横比を維持しつつ、全体を覆うようにフィットさせ縦横中央に配置します。コンテナーからはみ出る部分はトリミングします。
【CSS】object-fitはCSSだけで画像をコンテナーにフィットさせてトリミングもできるとっても素晴らしいプロパティー

→縦長の画像であればアスペクト比を保ったまま枠の横の長さに併せて画像を縮小し、縦のはみ出した部分を切り取り、横長の画像であればその逆のようなイメージでトリミングが行われる

・widthとheightを指定しないとトリミングは行われない。