nlog

とめどなく流れるよだれ

css

CSS 関連の記事を眺めて

css

マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法 すべてのコンポーネントの周囲に padding を持たせて設計することを提案している。均等な余白が向いているのはアプリケーションかな。コンポーネントの周囲…

Semantic UI Doc ( Modules - Sidebar, Sticky, Tab, Transition ) を読む

css

Semantic UI の Sidebar、Sticky、Tab、Transition を読んだ。 JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。 Sidebar テーマはない。Sidebar はページのナビゲーションを見えないところに隠してお…

Semantic UI Doc ( Modules - Progress, Rating, Search, Shape ) を読む

css

Semantic UI の Progress、Rating、Search、Shape を読んだ。 JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。 Progress テーマは 4 つ。タスクの進行状況を伝えたいときに使う。 .ui.progress で指…

Semantic UI Doc ( Modules - Embed, Modal, Nag, Popup ) を読む

css

Semantic UI の Embed、Modal、Nag、Popup を読んだ。 JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。 Embed テーマはない。Embed は YouTube や Google Maps のような外部コンテンツをサイトんい貼…

Semantic UI Doc ( Modules - Accordion, Checkbox, Dimmer, Dropdown ) を読む

css

Semantic UI の Accordion、Checkbox、Dimmer、Dropdown を読んだ。 JavaScript など挙動に関する部分はわからないことが多かったので、ここではスタイルに関することを書く。 Accordion テーマは 2 つ。Accordion は開閉コンテンツを表示するのに使う。 .ui…

Semantic UI Doc ( Views - Card, Comment, Feed, Item, Statistic) を読む

css

Semantic UI の Card、Comment、Feed、Item、Statistic を読んだ。 Card テーマは 4 つ。Card は画像やテキストをひとまとまりの構造として見せたいときに使う。 Card 単体は .card で指定し、複数の Card を並べるときは .ui.cards でグループ化する。Flexb…

Semantic UI Doc ( Views - Advertisement ) を読む

css

Semantic UI の Advertisement を読んだ。広告(Advertisement)にテーマはない。 この Semantic UI の View は広告を表示するときに使う。たとえば AdSense 広告などに対応しているようだ。 CSS のスタイルはというとこんなふうになっており、ほとんど枠の…

Semantic UI Doc ( Collections - Table ) を読む

css

Semantic UI の Table を読んだ。テーブルにテーマは 4 個ある。 テーブルは基本的に項目とそれに紐づくデータの集合であり、情報を構造的に見せたいときに使う。Semantic UI のテーブルは、モバイルサイズになると自動的にコンテンツが縦に並ぶように設計さ…

CSS 関連の記事を眺めて

css

ぼんやりしてる今日この頃。夏の生ぬるい風を感じながら「へー、うふふ」と思った CSS の記事をまとめる。 【増枠】Meguro.css #1 @ oRo 目黒で夜な夜な CSS 話がおこなわれているらしい。CSS in ERB in JS とかやってる人がいたっぽい。勉強会に興味がある…

CSS 関連の記事を眺めて

css

ウェブ開発を爆速に!人気オススメCSSフレームワーク厳選38個まとめ【2018年最新版】 38 個もあったのか。Propeller はかわいい見た目してるし、サードパーティ製のものも含めたらコンポーネントの数も豊富。Material Design Lite は本家 Google が開発元で…

Semantic UI Doc ( Collections - Message ) を読む

css

Semantic UI の Message を読んだ。メッセージにテーマは 3 個ある。 メッセージはタイトルと文章が枠で囲まれた見た目をしていて、近くのコンテンツを説明するのに使う。 いくつかコンテンツのタイプがあり、タイトルと文章の通常メッセージに以下を追加・…

Semantic UI Doc ( Collections - Menu ) を読む

css

Semantic UI の Menu を読んだ。メニューにテーマは 4 個ある。 Flexbox を使ったナビゲーションの集合コンポーネント。 ナビゲーションの見た目はいくつか変更でき、タブのような見た目、グローバルナビゲーションような見た目 、サイドナビゲーションのよ…

Semantic UI Doc ( Collections - Grid ) を読む

css

Semantic UI の Grid を読んだ。グリッドにテーマはない。 グリッドはサイトのレイアウトを格子状に整理して並べるのに利用する。CSS の技術としては Flexbox を使っており、グリッドのセル同士の余白は padding を利用して空けている。また、セルの持つ余白…

CSS 関連の記事を眺めて

css

ワンランク上のコーダーは万が一の配慮も欠かさない、リンク切れの画像要素をスタイルするテクニック - コリス つい最近考えることがあった。パスの入力ミスや影響範囲の確認漏れはないほうが良いけど、絶対ないとは言い切れない。そういったときにリンク切…

Semantic UI Doc ( Collections - Form ) を読む

css

Semantic UI の Form を読んだ。フォーム にテーマは 4 個ある。 フォームは項目と入力フィールドのセットを構造化して見せるのに役立つ コンテンツには項目と入力フィールドをセットで表示する Field と、Field のグループを表示する Fields 、そして各入力…

Semantic UI Doc ( Collections - Breadcrumb, Form ) を読む

css

Breadcrumb Semantic UI の Breadcrumb を読んだ。パンくずリストにテーマはない。 .ui.breadcrumb でパンくずリストを表示できる。リストアイテムの区切り記号はスラッシュだが、アイコンフォントなどで別の記号に変更することもできる。 リストアイテムは…

Semantic UI Doc ( Elements - Step ) を読む

css

Semantic UI の Step を読んだ。ステップにテーマは 3 個ある。 ステップは一連の行動の中で、自分が今どのポイントにいるかを示す。基本的にグループで使うことを想定してつくられている。 <div class="ui steps"> <div class="step"> ... </div> <div class="active step"> ... </div> <div class="disabled step"> ... </div> </div> .ui.ordered.steps で順序付きリストにする…

Semantic UI Doc ( Elements - Segment ) を読む

css

Semantic UI の Segment を読んだ。セグメントにテーマは 2 個ある。 セグメントは関連コンテンツのグループをつくるのに使う。いくつかタイプがあり、「Raised」はページの上に浮遊しているような表示に、「Stacked」は複数のページが重なったような表示に…

Semantic UI Doc ( Elements - Rail, Reveal ) を読む

css

Rail Semantic UI の Rail を読んだ。レールにテーマはない。 レールはサイトのメインコンテンツに付随するオプションコンテンツを表示するのに使う。たとえば、ブログ記事がメインコンテンツで、前後の記事に移動するリンクがオプションコンテンツだ。 レー…

Semantic UI Doc ( Elements - Loader ) を読む

css

Semantic UI の Loader を読んだ。ローダーにテーマは 3 個ある。 ローダーはコンテンツが読み込み中であることを示すために使う。クルクル回るいつものアレを画像( CSS で描画されるが面倒なので画像と呼ぶ)だけで表示するか、テキストラベル付きで表示す…

Semantic UI Doc ( Elements - List ) を読む

css

Semantic UI の List を読んだ。リストにテーマはない。 リストは親要素に .ui.list をつけて表示する。div 要素でリストを表現する場合は、追加で子要素に .item を指定して表示する。リストは入れ子にすることができ、階層をつくりだせる。 div 要素で指定…

Semantic UI Doc ( Elements - Input, Label ) を読む

css

Input Semantic UI の Input を読んだ。入力欄にテーマは 2 個ある。 入力欄は以下のように、.ui.input コンテナーで input 要素を包んで表示する。 <div class="ui input"> <input type="text" placeholder="Search"> </div> フォーカス、読み込み中、入力無効、エラーなどいくつか状態をあらわすクラスがある。 また、見た目を変…

Semantic UI Doc ( Elements - Icon, Image ) を読む

css

Icon Semantic UI の Icon を読んだ。アイコンにテーマはない。 Semantic UI はアイコンを Font Awesome 5.0.8 のものを使い、アイコンフォントで表示する。 <i class="icon users"></i> アイコンには状態があり、無効な状態は i.disabled.icon、読み込み中の状態は i.icon.loading で…

Semantic UI Doc ( Elements - Header ) を読む

css

Semantic UI の Header を読んだ。ヘッダーにテーマは 5 個ある。 ヘッダーはコンテンツの短い要約を示すのに使われる。ヘッダーにはいくつかタイプがあり、ひとつはページヘッダーである。これはページにおけるセクションの階層をあらわすために使われ、h1.…

Semantic UI Doc ( Elements - Divider, Flag ) を読む

css

Divider Semantic UI の Divider を読んだ。Divider にテーマはない。 Divider とはコンテンツを分断する線のこと。縦に並ぶコンテンツを分断する水平線は .ui.divider で表示する(ラベル付きの水平線にしたければ .ui.horizontal.divider を指定する)。横…

Semantic UI Doc ( Elements - Container ) を読む

css

Semantic UI の Container を読んだ。コンテナーにテーマはない。 コンテナーは幅と配置に関する指定を持ち、ウィンドウサイズによって表示を変化させる(つまりレスポンシブ対応している)。 ブレークポイントはモバイル、タブレット、小型モニター、大型モ…

Semantic UI Doc ( Elements - Button ) を読む

css

Semantic UI の Button のページを読んだ。ボタンのテーマは 11 個ある。 .ui.button でボタンを表示できる。このクラスはどの HTML 要素にも指定できるが、キーボードフォーカス可能なボタンにしたければ tabindex="0" を <button> に追加すること。また、.ui.prima</button>…

Semantic UI Doc ( Global ) を読む

css

Reset について。Semantic UI の Reset は最新の Normalize CSS を使っている。加えて、要素の幅が揃うように box-sizing をすべての要素に指定している。3 つのテーマが用意されており、Default, Basic, Resetcss がある。Resetcss はその名の通り Reset CS…

Semantic UI Doc ( Usage ) を読む

css

Usage には 2 つのページがあるが、説明が書いてあるのはほとんど Theming だけ。もうひとつの Layout はテーマや UI 部品のサンプル。 Semantic UI ではデフォルト変数を変更することでテーマを上書きできる。テーマの上書きについて学ぶにはサンプルプロジ…

Bulma と Bootstrap の比較

css

Coming from Bootstrap というページがあって、Bootstrap の代わりとして Bulma はどう機能するか、という話がされている。Bootstrap の情報が少し古い気がするので、まぁ参考程度に(たとえば、機能の比較表で Bootstap にCard コンポーネントがないと書か…