Semantic UI の Loader を読んだ。ローダーにテーマは 3 個ある。 ローダーはコンテンツが読み込み中であることを示すために使う。クルクル回るいつものアレを画像（ CSS で描画されるが面倒なので画像と呼ぶ）だけで表示するか、テキストラベル付きで表示す…
Semantic UI の List を読んだ。リストにテーマはない。 リストは親要素に .ui.list をつけて表示する。div 要素でリストを表現する場合は、追加で子要素に .item を指定して表示する。リストは入れ子にすることができ、階層をつくりだせる。 div 要素で指定…
Input Semantic UI の Input を読んだ。入力欄にテーマは 2 個ある。 入力欄は以下のように、.ui.input コンテナーで input 要素を包んで表示する。 <div class="ui input"> <input type="text" placeholder="Search"> </div> フォーカス、読み込み中、入力無効、エラーなどいくつか状態をあらわすクラスがある。 また、見た目を変…
Icon Semantic UI の Icon を読んだ。アイコンにテーマはない。 Semantic UI はアイコンを Font Awesome 5.0.8 のものを使い、アイコンフォントで表示する。 <i class="icon users"></i> アイコンには状態があり、無効な状態は i.disabled.icon、読み込み中の状態は i.icon.loading で…
Semantic UI の Header を読んだ。ヘッダーにテーマは 5 個ある。 ヘッダーはコンテンツの短い要約を示すのに使われる。ヘッダーにはいくつかタイプがあり、ひとつはページヘッダーである。これはページにおけるセクションの階層をあらわすために使われ、h1.…
Divider Semantic UI の Divider を読んだ。Divider にテーマはない。 Divider とはコンテンツを分断する線のこと。縦に並ぶコンテンツを分断する水平線は .ui.divider で表示する（ラベル付きの水平線にしたければ .ui.horizontal.divider を指定する）。横…
Semantic UI の Container を読んだ。コンテナーにテーマはない。 コンテナーは幅と配置に関する指定を持ち、ウィンドウサイズによって表示を変化させる（つまりレスポンシブ対応している）。 ブレークポイントはモバイル、タブレット、小型モニター、大型モ…
Semantic UI の Button のページを読んだ。ボタンのテーマは 11 個ある。 .ui.button でボタンを表示できる。このクラスはどの HTML 要素にも指定できるが、キーボードフォーカス可能なボタンにしたければ tabindex="0" を <button> に追加すること。また、.ui.prima</button>…
Reset について。Semantic UI の Reset は最新の Normalize CSS を使っている。加えて、要素の幅が揃うように box-sizing をすべての要素に指定している。3 つのテーマが用意されており、Default, Basic, Resetcss がある。Resetcss はその名の通り Reset CS…
Usage には 2 つのページがあるが、説明が書いてあるのはほとんど Theming だけ。もうひとつの Layout はテーマや UI 部品のサンプル。 Semantic UI ではデフォルト変数を変更することでテーマを上書きできる。テーマの上書きについて学ぶにはサンプルプロジ…
Semantic UI というスタイルが LESS で書かれたフレームワークがある。特長として書かれていることをいくつか抜粋する。 BEM や SMACSS のような効果を別のアプローチで実現。その結果、簡潔で直感的な HTML が書けるようになる JavaScript を含んでいる 継…
Coming from Bootstrap というページがあって、Bootstrap の代わりとして Bulma はどう機能するか、という話がされている。Bootstrap の情報が少し古い気がするので、まぁ参考程度に（たとえば、機能の比較表で Bootstap にCard コンポーネントがないと書か…
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 つの要…
Introduction - React Sketch.app (Quickstart) 上記ドキュメントの通りにするだけなんだけど、途中詰まったところもあったので一通りまとめておく。 React Sketch.app を git clone する。 [path/to/] $ git clone https://github.com/airbnb/react-sketcha…
Introduction - React Sketch.app (Quickstart) を進めていると、$npm run render でエラー。 [path/to/react-sketchapp/examples/basic-setup] $ npm run render ... Copied src/manifest.json in 10ms TypeError: null is not an object (evaluating 'con…
Bulma Modifiers を読んだ。 Bulma の CSS クラスについて。ほとんどの要素は修飾子（ Modifier ）を持っていて、この修飾子のクラス名は .is- または .has- 接頭辞から始まる。たとえば .button クラスは単体として使ってもボタンを表示できるが、.button.i…
React Static をビルド http://localhost:3000 でつくったプロジェクト（サイト）を確認できるようにする。 まずは React Static を使えるようにする。これはプロジェクトごとに必要なわけではなく、最初一回すれば ok 。 # React Static を使えるようにする…
React Static でつくったサイトのルートディレクトリで $npm run storybook をしたときにエラーがでた。 ERROR in ./.storybook/addons.js Module build failed: Error: [BABEL] /Users/path/to/project/.storybook/addons.js: Couldn't resolve extends cla…
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 要素は兄弟要素で指定し、関連付けをするた…
