カテゴリー: CSS

Laravel + Bootstrap4でレスポンシブ・フォントサイズ（Responsive font sizes/rfs）を有効にする【#np2020】

Bootstrap.jpg Bootstrap v4.3から、デバイスやビューポートのサイズに合わせてフォントサイズを変更することが出来る「レスポンシブ・フォントサイズ」に対応しています。ドキュメントを読むと、

RFSは、 $enable-respond-font-sizes Sass変数を true に変更してBootstrapを再コンパイルすることで有効になる
と書いてあります。 Laravelの場合、Bootstrapのソースコードはnode_modulesディレクトリ以下にあり、そこに設定ファイルもあるのですが、このディレクトリはレポジトリに登録されていないために環境によってかわることがあるし、Nodeのトラブルを解決する為に削除→再インストールをされることもあるディレクトリです。なので、ここの設定を変更してもあんまり意味がありません。 ていうかそもそも「laravel/node_modules/bootstrap/scss/vendor/_rfs.scss」では、 
// Disable RFS by setting $enable-responsive-font-sizes to false
$enable-responsive-font-sizes: true !default;
となっていて最初から有効になってます。そうなのねー

続きを読む

SCSSコンパイル時に「Incompatible units rem and px」エラー【#np2020】

npmのサムネイル画像 以下の構成をコンパイルしようとしたときに 

├ resouces
│    ├ _variables.scss
│    └ app.scss
└ public
└ app.css
次の様なエラーが出ました。 
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
^
Incompatible units rem and px.
最初何のことだかさっぱりわからなかったのですが、これ要するに、
数式に含まれている要素の単位は同じじゃないとダメだよ
ということなんですね。 ソースを見返してみると「_variables.scss」の中で「$font-size-base 」が「px」で指定されていましたが、ここはBootstrap4が使っている部分なので「rem」で指定しないといけません。 というわけで「14px」を「0.9rem」に変換して再度コンパイルしたら無事成功。なるほど。

続きを読む

レスポンシブかつグリッドな「Responsive Grid System」 【feedpost tips】

ResponsiveGridSystem.jpg 昨日リリースしたTumblr用ツール「feedpost」で採用している技術を紹介するシリーズ。3回目はサイトデザインを支えるCSS「Responsive Grid System」。その名の通り「Grid System」でありながら「Responsive」であるという特徴を持った……なんだろう、「CSSテンプレート」とでも呼べば良いのかな？ その特徴や導入の仕方などについては、以下のサイトを読んでもらえれば大体わかるので気になる方は読んでみてください。

Responsive Grid Systemの仕様が変更となり、僕のレスポンシブデザインの作り方もちょっと変わりそうなので共有 | バンクーバーのうぇぶ屋

先日、WEB Designingさんに執筆させてもらったResponsive Grid Systemですが、なんと原稿が出来て入稿し、発売間近くらいのタイミングで仕様変更され、めちゃめちゃ焦ったセナです。皆さんこんにちわ。 さて、というわけで、今日は僕が日頃お世話になっているResponsive Grid Systemの仕様変更に伴い、ちょっとResponsive Grid Systemの使い方をもう一度見なおしてみる目的と、Web Designingさんに執筆させて頂いた内容に現在のバージョンと相違が見られるので、その簡単なご説明をさせて頂ければと思います！ 執筆記事の方を楽しみに見て頂いている皆さん「あれ？なんか違うくない？」と混乱させてしまいましたら本気で失礼しました！この記事から最新バージョンの仕様がちょっとでも説明できれば幸いです！

追記では、思い出話しがてら簡単な説明などを。

続きを読む

CSSで指定出来る色名

05_02.jpg CSSにおける色の指定はこれまですべて「#ff0000」形式で統一してきました。 理由は、

  • 「色名指定」では柔軟な設定が出来ない（一段階濃くとか）
  • ブラウザに解釈を任せたくない
で、特に設定の柔軟性については、コーディングしている統合環境の補完で「aqua」「black」「brue」などの17色しか表示されないのもそう考える理由の1つになっていました。でも、違うのね、もっとたくさん指定出来る色名あるのね、というのが今回の本題です。いまさらですが知りませんでした。 参考になるサイトはたとえばこちら。 CSS/HTML色見本 全部で140色もの色名が色見本・RGB値と共にリストアップされています。これを見て自分がよく使っていた色が「OrangeRed」とか「DarkRed」で指定出来るんだと解ってちょっと目鱗でした。自分程度の柔軟性なんて、既に設定されている範囲の中でしかなかったです。なんとまあ。 数字を細かく調整して柔軟に設定した色って、後で忘れちゃうことが結構あるんですよね……作業の効率を考えたら「色名」で設定する方のもありかなあと。特にCSSに不慣れな人が参画するプロジェクトにおいては、色を「色名」で指定すると見通しが良くなって良いのではないかなと思います。色コードやRGB値で表示される色を想像しろと言っても厳しいものがありますし。 そんなことを考えて、最近は、文字色や背景色をできる限り「色名」で指定するようにしています。

続きを読む

gistの埋め込みを入れると表示が崩れる件

17_02.jpg ブログにコードの一部だけを載せたいようなとき、githubのgistにアップしてその埋め込みをブログに貼るというのを良くやるのですけど、このところずっとその埋め込みの表示が崩れて難儀してました。 上の画像にあるとおり、

  • スクロールバーが2重に出てしまう
  • コードの一番上に隙間が出来る
  • 行番号とコードの行がずれる
といった感じに崩れてしまって、コードは読めるものの見栄えがよくない。とはいえ埋め込みってことは通常CSSの管理はサービス側の仕事だし、こっちでやれることはないんだろうな……と思ってたらそうでもなかった。これiframeじゃなくて生のHTMLタグを書き出してるんですね。そうだったのか。だからCSSをこちらで設定してやれば崩れるのを修正出来ると。

続きを読む

「Responsive Grid System」使ったらFirefoxで表示が乱れた→clearfixの問題

28_01_02.jpg 上のようになって欲しいのに、こうなってしまう。 28_01_01.jpg ソースはこんな感じ。 






beta with RGS








Insert page content here.
どうやら「row」クラスに設定されている「margin-bottom:20px」がなぜか上側にも反映されているらしい。問題が起きるのはFirefoxだけで、IE9、Chromeでは全く問題なく表示されました。 （Safariはしらん）

続きを読む

[CSS3] 先頭の要素にだけ別の設定をする（疑似クラス「:nth-child(n)」を覚えた）

Webデザインにおいてカラムをいくつか並べて、間に境界線を引くという場合がよくあります。

イメージ

25_01.jpg こういう場合これまで、1行目の2要素に適当なクラス名を付けた上で、それ以外の要素にborderを設定する…というような対処を行ってきました。

ソース例

    

  • 

  • 

#sample-list li {
padding: 20px;
border-top: solid 1px dotted;
}
#sample-list li.first {
border-top: none;
}

続きを読む