中野ピク氏の絵のブログ

絵を描いたり、絵についての文を書いたりします。

シンプルで実用的!BEMとSCSSで作って学ぶ!とても易しいCSS設計チュートリアル

はじめに

第1章 準備をしよう

第2章 とても易しいCSS設計の「特に重要なポイント」を学ぼう

第3章 モジュールの作成を通して「覚えて役立つポイント」を学ぼう

第4章 モジュールを組み合わせてページを作ろう

  • 第4章の概要
  • ブログサービストップページを作ろう(準備中)

Bootstrapのモジュールを列挙してみる | 中野ピク氏流CSS設計の話

はじめに

CSSのクラス命名する参考にBootstrapで定義されているクラス名を列挙していきます。

全て列挙するというよりは自身が気になるものを適当に自分のためにまとめていくだけです。

今後のCSS設計とクラス命名に役立てたいと思います。

主にBootstrap4.5のクラス名などです。

Bootstrapは(こちら)はじめに - Bootstrap 4.5 - 日本語リファレンス

Layout

Breakpoints

// Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

Containers

  • container
  • container-sm
  • container-md
  • container-lg
  • container-xl
  • container-fluid

Grid system

  • row
  • col-12
  • col-sm-12
  • col-md-12
  • col-lg-12
  • col-xl-12
  • justify-content-md-center

Utilities for layout

{対象}-{breakpoint}-{value}みたいにするのよさそう。

  • d-{breakpoint}
  • d-{breakpoint}-{value}
    • none
    • inline
    • inline-block
    • block
    • table
    • table-cell
    • table-row
    • flex
    • inline-flex

Content

Images

  • img-fluid

Tables

  • table

Figures

  • figure
  • figure-img
  • figure-caption

コンポーネント

Glyphicons

アイコンフォントです。fontawesomeみたいなそういうのです。 - glyphicon - glyphicon-asterisk

Alerts

  • alert
  • alert-primary
  • alert-secondary
  • alert-success
  • alert-danger
  • alert-warning
  • alert-info
  • alert-light
  • alert-dark

Badges

  • badge (カテゴリ分けしたり、Newとかのラベル)
  • badge-primary
  • badge-secondary
  • badge-success
  • badge-danger
  • badge-warning
  • badge-info
  • badge-light
  • badge-dark
  • badge-pill (形状)

Breadcrumbs

  • breadcrumb

Button (Button groups, Button dropdowns)

ボタングループとボタン自体のmodifierみたいなクラス群です。 - btn-group - btn - btn-default - btn-toolbar - btn-group-lg - btn-group-justified - btn-primary - btn-success - btn-info - btn-warning - btn-danger - btn-lg (large) - btn-sm (small) - btn-xs (extra small)

Cards

  • card
  • card-title
  • card-body
  • card-text

Dropdowns

ドロップダウンだけどselectタグで出来ているわけではなく、上に表示されるものもあります。 - dropdown - dropup

Input groups

  • input-group
  • form-control (inputタグに付与するクラス)
  • input-group-lg
  • input-group-sm

Jumbotron

  • jumbotron

List group

  • list-group
  • list-group-item

Modal

  • modal

Navs

  • nav
  • nav-tabs

Navbar

  • navbar
  • navbar-default
  • navbar-brand
  • navbar-left
  • navbar-right
  • navbar-fixed-top
  • navbar-fixed-bottom
  • navbar-static-top
  • navbar-header
  • navbar-inverse

Pagination

  • pagination (1, 2, 3, 4, 5とか数字でページ指定するモジュール)
  • pagination-lg
  • pagination-sm

Popovers

  • popover (弾けて飛び出るの意)

Progress

  • progress
  • progress-bar

Spinners

  • spinner
  • spinner-border
  • spinner-grow

Thumbnails

  • thumbnail

状態を表すもの(modifierとして使われているようなもの)

  • disabled
  • active (タブ、)
  • stacked (縦に並べるとき、積み上げ)
  • justified
  • collapsed
  • inverse
  • rounded
  • horizontal
  • vertical
  • float-left
  • float-right
  • fluid (流体)
  • visible (表示状態)
  • hidden (display: none;の状態)
  • invisible (visibility: hidden;の状態)

サイズを表すもの

  • xl
  • lg
  • md
  • sm
  • xs

その他の単語(単体で使われてるもの)

  • divider (仕切り)
  • separator
  • caret
  • caption

Bootstrapではない参考クラス名

  • reveal (詳細な説明文などの要素が付加されているパターンにつけるmodifier名)
  • collection (リストグループと同じ意味)
  • collection-item (リストアイテムと同じ意味)
  • floating (position: fixed;で付いてくるときのmodifier名)
  • icon (glyphicon)

気づいたこと

  • info => warning => danger ぐらいで重要度を表現するのもよさそうだけど現場によっては3段階では足りなさそう

ドキュメントの背景を透明にする | Affinity Designer その0005

はじめに

ドキュメントの背景を透明にします。

pngなどで書き出すときに便利だと思います。

背景は別途オブジェクトで配置する手もあるかと思います。

公式ページ

公式ページでは以下のページで説明されています。

Affinity Designerヘルプ

引用になりますが、以下のように説明されています。

[透明な背景]—オンにすると、ページの背景が透明になります。

自分も説明

ウィンドウ上部のメニューから以下の画像のように「ファイル」「ドキュメント設定」の順にクリックします。

f:id:nakano_pixy:20190531162541p:plain

以下のようなダイアログボックスが開いたら、「カラー」タブをクリックし「透明な背景」にチェックを入れて「OK」をクリックすると背景が透明になります。

f:id:nakano_pixy:20190531162752p:plain

その他のこと

まだ私自身は機能を未確認ですが、アートボードの不透明度を設定する方法もあるようです。

Affinity Designerヘルプ

オブジェクトの配置座標を数値入力で正確に設定する | Affinity Designer その0004

はじめに

オブジェクトの配置座標を数値入力で正確に設定します。

公式ページ

公式ページでは以下のページで説明されています。

Affinity Designerヘルプ

自分も説明

以下の画像の右下にあるパネルから「変換」タブをクリックします。

左上や中心など基準となる点を選択して、XとYを入力することで正確な配置ができます。

f:id:nakano_pixy:20190531145852p:plain

右下部分だけ拡大すると以下のようになっています。

f:id:nakano_pixy:20190531150215p:plain

オブジェクトを回転したり傾斜させる | Affinity Designer その0003

はじめに

オブジェクトを回転させたり、斜めに歪ませるような変形をします。

公式ページ

公式ページでは以下のページで説明されています。

Affinity Designerヘルプ

自分も説明

以下の画像の右下にあるパネルから「変換」タブをクリックします。

左上や中心など基準となる点を選択して、回転や傾斜ができます。

f:id:nakano_pixy:20190531145852p:plain

右下部分だけ拡大すると以下のようになっています。

f:id:nakano_pixy:20190531150215p:plain

オブジェクトの拡大・縮小をする | Affinity Designer その0002

はじめに

オブジェクトを拡大・縮小します。

公式ページ

公式ページでは以下のページで説明されています。

Affinity Designerヘルプ

自分も説明

以下の画像の右下にあるパネルから「変換」タブをクリックします。

左上や中心など基準となる点を選択して、WとHの値を変更すると大きさが、またXとYで配置座標も正確に設定することができ、回転、傾斜などもできます。

f:id:nakano_pixy:20190531145852p:plain

右下部分だけ拡大すると以下のようになっています。

f:id:nakano_pixy:20190531150215p:plain