個人の活動を継続するためには、最初に設定した目的を忘れるのが重要なのではないか。 目的を意識しすぎると、最初は好んで始めたことにも関わらず、目的に縛られて自分が不自由であると錯覚する。不自由な自分を開放するために時間をあけようとするが、一番…
メディアクエリは便利だし使うけど、あんまり使いたくない。まだ理由がふわっとしてるけど、とりあえず書いとく。 メディアクエリを書くだけコードが増える。しかもそのコードが条件分岐のコードで、○○のサイズでは〜みたいなことが細かく指定されてるから、…
フォーム - Bootstrap4移行ガイド Rebootのフォームスタイルをクラスで展開する フォーム部品を使うには適切な type 属性の指定が必要 .form-group で囲うことでフォームの部品同士を分けれる input、select、textarea のようなテキスト形式のコントロールは…
\v で今回使いたい正規表現を有効にする ここまで出来る！Vimの(ちょっと高度な)正規表現と検索/置換テクニック - Qiitaという記事がまだわかりやすかったけど、よく理解できていない 置換前に () で指定した部分が、置換後の \1 （\2, \3...）に展開される …
ダイエットの決意表明。 4年前と比べて 15kg くらい太った。一年に 4kg づつ増えてる。太り始めた最初の年はいろいろ幸せ続く年で、「幸せ太りだね」って笑えたけど今はもう笑えない。 太ると着れない服が増える、かがむと肉がつっかえる、走ると肉がすこし…
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）をクリックすると閉じるボタンを押した時と同じように、消える モーダルコンポーネントを使う…
リストグループ - 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を…
今朝開いたら利用できるようになってたので。 「設定 > 詳細設定 > HTTPS 配信」から有効に切り替え。切り換え後にいくつか対応。 ブログテーマの読み込み先を変更 なんかデザインの管理画面でスタイルが思いっきり飛ぶ。 実際の見た目に影響はなかったのだ…
アラート - Bootstrap4移行ガイド .alert- 接頭辞で始まるクラス 必ず .alert ベースクラスと合わせて使う .alert クラス単独や、.alert-primary クラス単独ではコンポーネントは成立しない 短いメッセージと、オプションの閉じるボタンからなるコンポーネン…
