Css - シドニーで働くプログラマーのBlog(今はIT会社の経営者)

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

Mar 23, 2015

AD:

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

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

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

drush en bootstrap_library respondjs -y

1	drush en bootstrap_library respondjs -y

CSS&JSのAggregate and compress化

下記のページより変更が可能です。
/admin/config/development/performance

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

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

Feb 22, 2013

AD:

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

$ gem install less
$ less --version
less 444
Copyright (C) 1984-2009 Mark Nudelman

1

2

3

4

$ gem install less

$ less --version

less 444

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

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:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 1 | Pocket: 1 | Total: 2 | Feedly: 0

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

Feb 11, 2012

AD:

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

$ sudo gem install less 
Successfully installed libv8-3.3.10.4-x86-linux
Successfully installed therubyracer-0.9.9
Successfully installed commonjs-0.2.0
Successfully installed less-2.0.9

1

2

3

4

5

$ sudo gem install less

Successfully installed libv8-3.3.10.4-x86-linux

Successfully installed therubyracer-0.9.9

Successfully installed commonjs-0.2.0

Successfully installed less-2.0.9

lesscの場所を確認

$ locate lessc
/var/lib/gems/1.8/bin/lessc
/var/lib/gems/1.8/gems/less-2.0.9/bin/lessc
/var/lib/gems/1.8/gems/less-2.0.9/lib/less/js/bin/lessc

1

2

3

4

$ locate lessc

/var/lib/gems/1.8/bin/lessc

/var/lib/gems/1.8/gems/less-2.0.9/bin/lessc

/var/lib/gems/1.8/gems/less-2.0.9/lib/less/js/bin/lessc

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

$ sudo ln -s /var/lib/gems/1.8/bin/lessc /usr/bin/

1	$ sudo ln -s /var/lib/gems/1.8/bin/lessc /usr/bin/

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

$ lessc hoge.less &gt; hoge.css
/usr/lib/ruby/1.8/rubygems.rb:779:in `report_activate_error': Could not find RubyGem less (&gt;= 0) (Gem::LoadError)
	from /usr/lib/ruby/1.8/rubygems.rb:214:in `activate'
	from /usr/lib/ruby/1.8/rubygems.rb:1082:in `gem'
	from /usr/bin/lessc:18

1

2

3

4

5

$ lessc hoge.less > hoge.css

/usr/lib/ruby/1.8/rubygems.rb:779:in `report_activate_error': Could not find RubyGem less (>= 0) (Gem::LoadError)

from /usr/lib/ruby/1.8/rubygems.rb:214:in `activate'

from /usr/lib/ruby/1.8/rubygems.rb:1082:in `gem'

from /usr/bin/lessc:18

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

$ sudo lessc hoge.less &gt; hoge.css

1	$ sudo lessc hoge.less > hoge.css

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

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

$ cd ./wp-content/themes/roots/css/less
&#20840;&#20307;
$ sudo lessc bootstrap.less &gt; bootstrap.css
&#12524;&#12452;&#12450;&#12454;&#12488;&#31995;
$ sudo lessc responsive.less &gt; bootstrap-responsive.css

1

2

3

4

5

$ cd ./wp-content/themes/roots/css/less

全体

$ sudo lessc bootstrap.less > bootstrap.css

レイアウト系

$ sudo lessc responsive.less > bootstrap-responsive.css

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

$ sudo lessc ./less/bootstrap.less &gt; bootstrap.css
$ sudo lessc bootstrap.less &gt; ../css/bootstrap.css

1 2	$ sudo lessc ./less/bootstrap.less > bootstrap.css $ sudo lessc bootstrap.less > ../css/bootstrap.css

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

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 1 | Pocket: 0 | Total: 1 | Feedly: 0

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

Sep 23, 2009

AD:

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

サンプル

画像を一枚にまとめます

使用した画像

htmlのソース

&lt;p class="rollover"&gt;&lt;a href="#"&gt;&#12522;&#12531;&#12463;&lt;/a&gt;&lt;/p&gt;

1	<p class="rollover"><a href="#">リンク</a></p>

CSS

p.rollover a{
	display:block;
	width:150px;
	height:50px;
	text-indent:-9999px;
	overflow:hidden;
}
p.rollover a{
	background:url(rollover.jpg) top left no-repeat;
}
p.rollover a:hover{
	background:url(rollover.jpg) top right no-repeat;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

p.rollover a{

display:block;

width:150px;

height:50px;

text-indent:-9999px;

overflow:hidden;

}

p.rollover a{

background:url(rollover.jpg) top left no-repeat;

}

p.rollover a:hover{

background:url(rollover.jpg) top right no-repeat;

}

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

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

Sep 29, 2008

AD:

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

outline: none;

1	outline: none;

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

overflow:hidden;

1	overflow:hidden;

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

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

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

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:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 2 | Pocket: 0 | Total: 2 | Feedly: 0

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

Jul 10, 2008

AD:

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

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

参考として、

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br>
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br><input type="hidden" name="question" value='&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
'>

1

2

3

4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br>

'>

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

Twitter:
Warning: Undefined array key "Twitter" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Facebook: 0 | Google Plus:
Warning: Undefined array key "Google+" in /home/sazaeau/mizoshiri.com/public_html/blog.mizoshiri.com/wp-content/plugins/sns-count-cache/sns-count-cache.php on line 2897
0 | Hatena: 0 | Pocket: 0 | Total: 0 | Feedly: 0

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

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

CSS&JSのAggregate and compress化

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

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

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

解決方法

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

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

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

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

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

画像を一枚にまとめます

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

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

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

Search Keyword

Meta

FacebookPage

Popular Posts

My Tags

Status

Links

ARCHIVES