Drupal7にTwitter Bootstrap3 – Themeの環境でIE8をサポートする

Mar 23, 2015
AD:

本来であれば、Twitter Bootstrap3はIE8をサポートしているはずなんですが、なぜかDrupalのTwitter Bootstrap Themeを使用するとIE8でうまくいきませんでした。
下記の内容で問題なく表示されるようになりました。
原因はIE8がCDNをサポートしていないのが問題ではないかと言われていますが、実際のところなぜ起きるのかは追っていません。

モジュールのインストール

下記の2つのモジュールをインストール
Bootstrap Library
Respond.js

CSS&JSのAggregate and compress化

下記のページより変更が可能です。
/admin/config/development/performance
Screen Shot 2015-03-23 at 11.08.28 am

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 25

Ubuntu(12.04) にlessをインストール

Feb 22, 2013
AD:

過去のサイトで、Lessを使用しているものがあったので、lessをインストール

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 25

lessで@importしたらcacheが残って変更が反映されない件

Feb 13, 2012
AD:

WordPressのRoots Themeの中でlessが使われているのですが、ちょっとトラブったのでそのメモです。

問題は、lessの@importしたらcacheが残って変更が反映されない

それで、調べると同じような問題に起きている人がいる模様。
https://github.com/cloudhead/less.js/issues/47

解決方法

結局、下記のスクリプト追加して解決できました。
[php]
[/php]

ちなみに、bootstrap.lessの中はこんな感じです。

[php]
// CSS Reset
@import “reset.less”;

// Core variables and mixins
@import “variables.less”; // Modify this for custom colors, font-sizes, etc
@import “mixins.less”;

// Grid system and page structure
@import “scaffolding.less”;
@import “grid.less”;
@import “layouts.less”;
[/php]

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 1 | Pocket: 1 | Total: 2 | Feedly: 25

Ubuntuにlessをインストール&設定

Feb 11, 2012
AD:

最近、WordpressのRoots Themeを触っているのですが、その中でlessが使われていたのでそのメモ

lesscの場所を確認

コマンドを入力させやすくしておく

: Could not find RubyGem less と出てエラー

調べてみると、sudoでインストールしたので、lesscのコマンドもsudoで実行しないといけないらしい。。。

既に、Rubyの開発環境はrvmで導入済みの状態です。

せっかくなので、Roots Themeのlessでのcssを書き出しもメモしておきます。

ちなみに、上のRoots Themeは、標準では、css/の中にあるcssを読み込むんですが、下記のやり方だとlessの中に書き出されます。

上記のコマンドを試したけどダメだったので、./inc/roots-actions.phpを書き換えました。

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 1 | Pocket: 0 | Total: 1 | Feedly: 25

CSSによる画像ロールオーバーのちらつきを防ぐ方法

Sep 23, 2009
AD:

最近、久しぶりデザインをすることが増えたので、CSSを触っているんですが
CSSを使って画像ロールオーバー使うことがあるのですが、それが画面を開いた段階では、a:hoverに指定した画像を読み込みに行ってくれなくて
困っておりました。そこで下記方法を思いつき対応しました。

サンプル

画像を一枚にまとめます

使用した画像
rollover

htmlのソース

CSS

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 25

text-indent:-9999pxでaタグにつく横棒を消す方法のメモ

Sep 29, 2008
AD:

今更ですが、よく忘れるのでメモしておきます。

にすると点線自体が消えるので すべてのブラウザでクリック領域がわかりにくくなります

にするとMacのIEでおかしくなる(確かリンク自体機能しなくなるとか)という点を除けばこちらの方がいいと思います。
もしくは Macにのみハックを使用するなどがもっとも

個人的に、「text-indent:-9999px」は使いたくないですが、どうしても昔のテーブルで作られたものを
コーディングし直すときにつかったりします。

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 25

meadow(Emacs)のCSS css-mode.elのメモ

Jul 23, 2008
AD:

css-mode.el

Ctl+C + Ctl+U = url()を挿入
Ctl+C + Ctl+C = /* */を挿入
M+tab キーで CSS の属性を入力補完してくれる。

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 2 | Pocket: 0 | Total: 2 | Feedly: 25

IE6をCSSで中央配置にする際のメモ

Jul 10, 2008
AD:

IE6をCSSで中央配置する際に、よく忘れるのでメモしておきます。

IE6には過去のIEの互換性のため、DOCTYPEの有無により、標準準拠モードと互換モードを切り替えるようです
(DOCTYPEスイッチだって)
で、互換モードだとtext-align:centerとか指定しないと中央配置されない。
HTML 4.01の標準モードだと、互換モードになるので、ちゃんと、htmlの一番上に宣言を明確に書くといいらしい。

参考として、

メモ
IE5(Win), IE5.5(Win), IE5.2(Mac)、ネスケ4もmargin:autoが未サポートだって。

Twitter: 0 | Facebook: 0 | Google Plus: 0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 25

ARCHIVES