リストグループ - Bootstrap4移行ガイド 枠線で複数の要素が囲まれ、この要素ごとに仕切り線があるコンポーネント リストに .list-group、リストの子要素に .list-group-item を指定することでこのコンポーネントは表示できる リストの子要素をアクティブな…

ジャンボトロン - Bootstrap4移行ガイド ヒーローとか、メインビジュアルとも呼ばれる 大きな表示領域を使ってメッセージを伝えるコンポーネント 使うには .jumbotron を指定する 幅いっぱいのジャンボトロンを表示するには .jumbotron-fluid クラスを修飾子…

ドロップダウン - Bootstrap4移行ガイド スイッチを押すとメニューの表示・非表示が切り替わるコンポーネント マウスオーバーではなくクリックすることで表示を切り替える。任意でマウスオーバーの切替に変更可能 動作させるにはpopper.jsが必要 ソースファ…

折り畳み - Bootstrap4移行ガイド ボタン操作によりコンテンツを開閉するコンポーネント .collapse でコンテンツを隠す .collapse.show でコンテンツを表示 このコンポーネントは href 属性を持つリンク、または data-target 属性を持つボタンに使用できる …

カルーセル - Bootstrap4移行ガイド カルーセルはコンテンツのスライドショー CSS 3D変換とJavaScriptで構築されているコンポーネント このコンポーネントを動作させるには util.js が必要 カルーセルにはコンテンツを前後するコントロールボタンがオプショ…

デザインは情報を伝える手段で、CSS はデザインを Web で表現するための手段。手段の手段にあたる CSS は割と近い将来に必要なくなるかもしれない。 ぼく自身はデザインと CSS、どちらも楽しいから手放せない。あと正直に言うと、デザイナーでありながら自分…

カード - Bootstrap4移行ガイド カードコンポーネントはでかい。ヘッダーとフッターのオプション、多種多様なコンテンツ、文脈上的な背景色、強力な表示用のオプションが組み込まれている Flexboxで配置されている デフォルトで余白は設定されてないので、余…

今日雨降って寒かった。暖房つけてしのいだけど、あたたかすぎて昼いつの間にか寝てた。 いまの時間からBootstrapのコンポーネント見るのはしんどいので、この2ヶ月CSSでやってきたことのおさらいと、これからやりたいことを書く。 これまでの2ヶ月: CSS4を…

アラート - Bootstrap4移行ガイド .alert- 接頭辞で始まるクラス 必ず .alert ベースクラスと合わせて使う .alert クラス単独や、.alert-primary クラス単独ではコンポーネントは成立しない 短いメッセージと、オプションの閉じるボタンからなるコンポーネン…

境界ユーティリティ - Bootstrap4移行ガイド ボーダーと角丸用のユーティリティ .border クラスでボーダーを適用する 単方向の指定は .border-right などで、複数方向の指定は .border-right.border-bottom クラスなどでおこなう .border-0 クラスでボーダー…

※2018年3月18日時点 「CSS セレクター | MDN」を読んでそれぞれ試した。 デモの中で赤くなってるところがセレクターあたってるところ。ブラウザのサポート状況によってはデモの結果が確認できない場合があるので、そのときはMDNのページかCan I Useをチェッ…

Reboot - Bootstrap4移行ガイド RebootはNormalizeの上で構築される。HTML要素を対象にしたBootstrapフレームワークを有効にするための下地 単位を em か rem で統一 CSSのボックスモデルを box-sizing: border-box に変更 margin の相殺を避けるために marg…

概要 - Bootstrap4移行ガイド Bootstrap4のレイアウトに含まれるもの 包括コンテナー グリッドシステム メディア・オブジェクト ユーティリティクラス グリッドシステムにも使われる包括コンテナーは、.container クラスで指定する 包括コンテナーには、レス…

Bootstrapはできれば使いたくない。個人で使うにもチームで使うにも巨大すぎるシステムな気がして、触りたいと思えない。 しかし中身を知らずにそう言ってばかりはいられない。それにBootstrap製の案件がいつ舞い込んでくるかわからない。 備えあれば憂いな…

Bootstrap4移行ガイドを読みはじめた。 CSSフレームワークはこれまでにSkelton、Pure.css、あとグリッドレイアウトだけに用意されたフレームワークを使ったことがある。けれど実は大きなものはほとんど使ったことがない。ときどき気になってBootstrapとかFou…

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Types 昨日の続きで今日が最後。データ型をいくつか眺めていた。 まず <number> データ型がある。これは整数と小数、どちらも含む数値の型。 <number> データ型は単位を持たないただの数値である。 <number> データ型のあとに何か</number></number></number>…

https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Types データ型をいくつか眺めていた。 やっぱり普段使わないものほど理解するのが難しい。<basic-shape> データ型みたいに、型自体を使う機会が少ないものはドキュメントを読んでもへーっとしかならない。...clip-pat</basic-shape>…

「マージンの相殺 | MDN」を読んでる。 隣接兄弟要素の margin の相殺。よく知るやつ。あと要素の margin-top: 1em が前の要素の margin-bottom: .5em を相殺している。ばっちり相殺。 marginの相殺（隣接兄弟要素） | JSFiddle 親要素と先頭・末尾の子要素…

https://developer.mozilla.org/ja/docs/Web/CSS/Reference 今日はアルファベット順でT〜Zまで。これで終わり。 tab-size ... タブ文字（スペース）のサイズを決める text-align-last ... ブロック要素の最後の行の配置を指定する text-combine-upright ... …

https://developer.mozilla.org/ja/docs/Web/CSS/Reference 今日はアルファベット順でRとS。 radial-gradient ... 原点を要素の中心として、そこから放射状に延びるグラデーションをつくる repeat() ... CSS Grid Layoutで使うプロパティ。トラックリスト内…

https://developer.mozilla.org/ja/docs/Web/CSS/Reference 昨日はアルファベット順でNまで見たから、今日はOから。Qまで確認した。 orphans ... 印刷用。改ページされる際に残す最低行数を指定する overflow-wrap ... 自動生成される文字列のように、単語の…

https://developer.mozilla.org/ja/docs/Web/CSS/Reference 昨日はアルファベット順でFまで見たから、今日はEから。Nまで確認した。 image-orientation ... 画像の向きを回転させる image-rendering ... 拡大・縮小される画像の描画アルゴリズムのヒントをブ…

FlexboxとGrid Layoutで align-items: center を指定したときの表示を確認した。16pxのブロックに1pxの線を垂直中央配置したとき、どうなるか。IE11とEdgeはVirtualBoxを使った仮想環境で確認した。 結論、使うプロパティとブラウザによって結果が異なった。…

昨日の続き。CSSの知らないことを知るっていう。 https://developer.mozilla.org/ja/docs/Web/CSS/Reference 昨日はアルファベット順でCまで見たから、今日はDから。 @font-face ... Webフォントを指定する font-feature-settings ... OpenTypeフォントの先…

CSSのプロパティやせレクターを確認するにはMDNの以下のページを見るとよさそう。 https://developer.mozilla.org/ja/docs/Web/CSS/Reference 索引はアルファベット順でまとめられてる。A, B, Cの部分を見ただけでも知らないことがこれだけあった。 all ... …

このへん見てるといいのかな。一旦これで。 CSS | MDN タグ「css」を検索 - はてなブックマーク Archives - CSS Layout News Archives – CSS Weekly Forums Archive - CSS-Tricks Search Results for css on CodePen もうすこしギャラリー的なイメージで見れ…

デモ用にコード書いたりするときはCSS Color Nameを使う。以下のページをよく見る。 https://www.w3schools.com/cssref/css_colors.asp 一番よく使うのは color: tomato 。color: red` ほど強すぎず、使いやすい目に優しい色だと思う。 つぎは @namikuguri …

よくわからない動きをさせながら円周上に点を配置 | JSFiddle こんなコードになった。 li { ... $r: 40; @for $t from 1 through 100 { &:nth-child(#{$t}) { // 色 $hue: (360 / 100) * $t; $color: hsl($hue, 100, 68); background-color: $color; // アニ…

3年前を思い出しながら、Sassで円周上に点を配置してみる。 円周上に点を配置 | JSFiddle まずは関数定義。「Trigonometry In Sass | Unindented」に書かれているコードを書き写した。関数は全部で7つある（けど tan() は使ってないな）。 pow() fact() pi()…

昨日のやつをまたゴニョゴニョと触ってた。結果、ボールがすごい速さで移動するみたいなアニメーションができた。 クソアニメーション（ボール移動） | JSFiddle 昨日と違うのは transform: rotate() の代わりに transform: translate() を使ってるくらいで…