Bulma Doc ( Components ) を読んだ。Elements や Form にも一部あるが、Components は構造を持つクラスとして分類されている。 Breadcrumb はパンくずリストをあらわし、インラインリストのアイテム間に自動的に境界線を挿入する。また、現在地を示すために…

Bulma Doc ( Elements ) を読んだ。 Elements には他の要素を包括する Box やインターフェイス要素のボタンが分類されている。 まず Box は他の要素を包括する要素である。 つぎに Button たが、これはそのままボタン。ひとつのベースクラス .button と、色…

Bulma Doc ( Form ) を読んだ。 Bulma はデザインの一貫性を保つためにブラウザのフォームコントロールをカスタマイズしている。フォームコントロールには何種類かあって、 .label ... 項目名 .input ... 入力欄 .textarea ... 複数行の入力欄 .select ... …

Layout - Bulma を読んだ。 Bulma はサイトの幅を決めるコンテナー（.container）を持つ。どこでも使えるクラスだが、主に以下のクラスの子要素とし指定される。 .navbar .hero .section .footer コンテナーのサイズ $desktop、$widescreen、$fullhd とあり…

Bulma Columns を読んだ。 Bulma は Flexbox を使ったレスポンシブ対応のカラムを持っている。このカラムを使うには、親要素に .columns を指定して、その子要素に .column を指定する。 カラム幅を指定するには Modifier クラスを使う。たとえば、3 つの要…

Bulma Modifiers を読んだ。 Bulma の CSS クラスについて。ほとんどの要素は修飾子（ Modifier ）を持っていて、この修飾子のクラス名は .is- または .has- 接頭辞から始まる。たとえば .button クラスは単体として使ってもボタンを表示できるが、.button.i…

Bulma っていう CSS Framework を読み始めた。 とりあえず概要のまとめ。 CSS ファイルを一つ読み込むだけで使える シンプルな変数セットを変更することで自分だけのデザインテーマに CSS クラスの指定で簡単にスタイルを適用できる 必要なモジュールだけ読…

https://jsfiddle.net/user/dashboard/ Dashboard 画面で Minify されていた CSS を DirtyMarkup: CSS Beautifier で適当に整形して読んだ。JSFiddle は普段からよく使っているが、今回コードを読むときにサイトの表示はあまり見てない。 CSS は整形後 1100…

https://jsfiddle.net Editor 画面で Minify されていた CSS を DirtyMarkup: CSS Beautifier で適当に整形して読んだ。JSFiddle は普段からよく使っているが、今回コードを読むときにサイトの表示はあまり見てない。 CSS は整形後 700行くらい。 アンチエイ…

https://evilmartians.com/chronicles html { font-size: 1.6666666666666667vw; } font-size を vw で指定してるのが気になったので、Minify されていた CSS を DirtyMarkup: CSS Beautifier で適当に整形して帰り道に読んだ。サイトの表示はあまり見てない…

インプットグループ - Bootstrap4移行ガイド インプットグループ（ .input-group ）を使うと、基本的なフォーム部品を拡張することができる たとえば、入力欄にプレフィックスやサフィックス（ Bootstrap4 ではこれを "アドオン" と呼ぶ）をつけることができ…

気づけば夜。 Mustard UI CSS フレームワーク。Flexbox をつかったグリッドシステム、入力エラー時にも対応したフォームのスタイル、料金表のコンポーネントあたりが珍しいと思った。 CSS ICON CSS だけでつくったアイコン。各ページの詳細には CSS のコード…

昨日の続き。 Flex ユーティリティクラスと .col-auto をうまく使えば、行に収まるだけコンテンツが入るようになる フォーム内のヘルプテキストは .form-text を指定する ヘルプテキストをインラインで表示したければ .form-text.text-muted を指定する ヘル…

前回途中で読むのをやめてしまっていた。フォーム | Bootstrap4移行ガイド の続きを読む。 チェックボックスとラジオボタン、どちらも .form-check-input を指定してコンポーネントの見た目にする label と input 要素は兄弟要素で指定し、関連付けをするた…

メディアクエリは便利だし使うけど、あんまり使いたくない。まだ理由がふわっとしてるけど、とりあえず書いとく。 メディアクエリを書くだけコードが増える。しかもそのコードが条件分岐のコードで、○○のサイズでは〜みたいなことが細かく指定されてるから、…

フォーム - Bootstrap4移行ガイド Rebootのフォームスタイルをクラスで展開する フォーム部品を使うには適切な type 属性の指定が必要 .form-group で囲うことでフォームの部品同士を分けれる input、select、textarea のようなテキスト形式のコントロールは…

Bootstrap 4.1 · Bootstrap のんびりドキュメント読んでる間に v4.1 でてた。ユーティリティクラスが増えたみたいで、`.flex-shrink-*` で Flexbox を使った要素の伸び縮みを制御できるようになったり、`.shadow-*` でシャドウがつけれるようになったみたい…

#出会えたことに感謝したいCSSベスト3 っていうのがあったらしい。font-size:4vw はなんだろう。気になるね。 今さらツイートするのはなんだか恥ずかしいので、自分のベスト 3 はここにでも書く。 calc() max-width display: flex 適当に扱ってもなんとなく…

@mixin header-base() に文字と行間の指定をまとめた。 @mixin header-base($font-size) { font-size: $font-size; font-weight: bold; line-height: 1.25; } @mixin h1 ~ h4 で基本の見出しスタイルを用意した。これらの Mixin には上下の余白も指定した。 …

はてなブログの CSS カスタマイズについて。Sass の Mixin と変数を使えばテーマの量産がもっと簡単になるんじゃないか。 はてなブログの CSS は、同じ見出しのスタイルでも .entry-title と .archive-heading で違う。他にも日付やカテゴリーなど、似たよう…

基準色から色相、彩度、明度を計算する Sass の関数をつくった。 @function calc-color($color, $hue, $saturation, $lightness) { @if $lightness < 0 { // 明度の指定が負の値なら darken() 関数を使う @return darken(desaturate(adjust-hue($color, $hue…

ツールチップ - Bootstrap4移行ガイド ツールチップは、オリジナルな title 属性みたいなもの。リンクにカーソルを合わせたときに説明文が書かれた吹き出しを表示する ツールチップはパフォーマンス上の理由で任意で取得されるため、自分で初期化する必要が…

スクロールスパイ - Bootstrap4移行ガイド スクロール位置に基づいて、ナビゲーションの現在地を更新するコンポーネント。現在アクティブなリンクを表示する util.js が必要 Bootstrapのナビゲーションコンポーネント、またはりすとグループコンポーネントで…

「プログレスバー - Bootstrap4移行ガイド」を読んだ。 最大値に対して進行状況をあらわすコンポーネント HTML5 の progress 要素は使わずに表示できるコンポーネント .progress で包括要素（最大値を示す要素）を表示 .progress-bar で進行状況をあらわす要…

ポップオーバー - Bootstrap4移行ガイド このコンポーネントを動作させるには popper.js が必要。ポップオーバーの位置を決めるのに使われる ソースファイルから JavaScript を構築する場合は util.js が必要 ツールチップコンポーネントと依存関係がある ti…

ページ送り - Bootstrap4移行ガイド ページャーやページネーションと呼ばれるコンポーネント 一覧に載せる量が多すぎるとコンテンツを分割することがあるが、この分割したペーのナビゲーションとして使うことができる このコンポーネントを使うには、.pagina…

1カラムのレイアウトにしたのと、白銀比をベースサイズに据えたのと、ブログタイトルをデスクトップでは追従するようにしたのが特長かな（モバイルは表示領域が狭いので追従しない。あと、position: sticky を使ってるのでサポートされてないブラウザでは追…

ナビゲーションバー - Bootstrap4移行ガイド ナビゲーションバーコンポーネントを使うと、サイトでよく見るヘッダーをつくることができる ナビゲーションバーを表示するには、.navbar とレスポンシブ可能な折り畳みのために .navbar-expand{-sm|-md|-lg|-xl}…

ナビゲーション - Bootstrap4移行ガイド 複数のリンクが水平・垂直方向に並んだコンポーネント ナビゲーションコンポーネントを使うには .nav を指定し、その中でいくつかのクラスを指定する ナビゲーションの配置には基本的にFlexboxが使われている ナビゲ…

モーダル - Bootstrap4移行ガイド Webページのひとつ上にレイヤーを重ね、ユーザーに限定的な行動をさせるコンポーネント Bootstrapのモーダルは背景（backdrop）をクリックすると閉じるボタンを押した時と同じように、消える モーダルコンポーネントを使う…