動かざることバグの如し

近づきたいよ 君の理想に

css

Bulma CSSで画像とテキストを横並びにする方法

css

あんまりBulma使ってる人見ないよね。。。 環境 Bulma CSS 0.75 完成イメージ ちょうどこんな感じ コード 上のサンプル見れば終了なんだが一応説明 <div class="columns is-vcentered"> <div class="column has-text-centered"> <figure class="image is-128x128 is-inline-block"> <img src="https://bulma.io/images/placeholders/128x128.png"> </figure> </div> </div>

毎回flexboxでググるのツラくなってきたので自分用まとめ

css

多分一番見やすい基本的な使い方まとめ 日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス 応用まとめ ロゴだけ左端に、ほかは右寄せにってのがすごく役に立った(:first-child と margin-right: auto; の合わせ技) Fl…

2018年に軽量CSSフレームワークを選ぶなら「milligram」

css

個人でサクッとサービス作りたいときに、毎回Bootstrapだと飽きてきたのでちょっと浮気してみたメモ。 ここでいう軽量とは シンプル、最小限を目指したCSSフレームワークのこと CSSフレームワークのくせにJavascript必須とか論外 Bootstrapより機能少なくて…

親要素を無視してブラウザ幅100%で表示するCSS

css

CSSでは基本的にコンテンツを.containerとか.mainのdivで囲む。 大抵そのdiv要素はwidth768pxとかなんだけど、一部だけその要素を突き抜けてブラウザ幅いっぱいに表示したくなるときがある。 その時の回避法がいくつかあるんだけど、一番スマートで汎用的な…

左右前後の中央寄せをするイマドキのCSS

css

コード これだけ .box { display: flex; align-items: center; justify-content: center; } サンプル jsfiddle.net ブラウザ対応状況 https://caniuse.com/#search=flexcaniuse.com IE11でも使えるっぽいしもう解禁でいいでしょ>flex