WEB制作(html・css(スタイルシート))に関する各種メモ書き:タグ「css」での検索

Google Chromeでローカルにあるcssファイルを直接編集し保存する

cssファイルを編集するときに Google Chromeのデベロッパーツールで値を変更した後、 エディターにその値を持って行きエディターを使って保存したりしてないでしょうか?

そんな面倒なことをしなくても Google Chrome 自体に .css を保存する機能があります。

Google Chromeでローカルにあるcssファイルを直接編集し保存する。(編集作業の高速化)

● ローカルのフォルダをGoogleChromeに読み込ませる

1. Google Chromeを立ち上げる

2. 右クリックし「検証」を選択する

デベロッパーツールのウィンドウが画面下表示されます

3. デベロッパーツール内メニューの「Sources」を選択する

4. ソースリストの何もないところを右クリックし「Add folder to workspace」を選択する

5. 編集したいcssファイルが入っているフォルダを選択する

● 読み込んだローカルのフォルダ内の css をリンクさせる

6. 直接編集したい ローカルのhtmlファイル をgooglechromeで開く

7. googlechromeで直接編集したいファイルを右クリックし「Map to network resource...」を選択すると

現在ブラウザで開いている同盟のcssファイル一覧が表示されるのでその中からリンクさせたいファイルを選択する

これで準備はokです。 後は自由に編集しその後に「Command+s」(Macの場合)を押すと保存されリロードしてもその状態がリセットされず残っています。

No.1164
09/18 09:14

edit

css
高速化

emmet LiveStyle を使って SCSS の変更を即座にブラウザに反映させる

web制作時に「cssを変更/保存」→「ブラウザのリロード」はとても面倒です。
そこでemmet LiveStyle を使って SCSS の変更を即座にブラウザに反映させましょう。
簡単に言うとオートリロード機能ですが、実際にはリロードは起こりません。リロードせずに即座に反映してくれます。
それ以外にも

  • SASS, SCSS(Compass) にも対応します。
  • Chromeのデベロッパーツール(Windows : F12  Mac : Command + Option + i )で変更した内容をエディタ側に反映させる

事ができます。

● 1. 必要なアプリ

  • Google Chrome
  • Sublime Text3

● 2. Chrome Extention「Emmet LiveStyle」のインストール

https://chrome.google.com/webstore/detail/emmet-livestyle/diebikgmpmeppiilkaijjbdgciafajmg?hl=ja
からインストールします。
インストール後 「ウィンドウ」→「拡張機能」から以下のようにセッティングします。

● 3. Sublime Text「Emmet LiveStyle」のインストール

Sublime Text から
「Command + Shift + p」→「install」→「live style」でLiveStyle をインストールします。

● 4. ファイルをそれぞれ開く

css(scss)ファイルをSublime Textで、htmlファイルをChromeで開きます。

● 5. Chromeの右上のアイコンから「Enable LiveStyle」

LiveStyleをon にしたら 即座に反映させる css(scss)ファイルを選びます。

以上で即座に反映させる環境ができます。

添付ファイル1
No.1031
05/09 12:10

edit

添付ファイル

css
scss

compass(SCSS)でretina,ロールオーバー対応のcssスプライトを自動生成するmixin

compassは各自インストールしておいてください。

● 1. config.rbの準備

compassを使うときはサイトの最上位フォルダに config.rb を置きますが、ここでは以下の様な設定を使用します。
以下のコードをファイル名 `config.rb` で htmlを制作する最上位フォルダに置いておきます

# パスの設定
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

# 書き出すCSSのスタイル  :expanded or :nested or :compact or :compressed
output_style = :expanded

# コメントを残すかどうか?
line_comments = false		

# 相対パスを使うかどうか?
relative_assets = true

# CSSスプライトのランダム文字列を削除
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.mv filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
  end
end
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end

● 2. mixin ファイルの準備

以下のコードをファイル名 `_sprite-css.scss` で scssフォルダに置いておきます

@mixin sprite-common($map, $pixel_raito:1) {
    margin: 0;
    padding: 0;
    background-image: $map;
    background-repeat: no-repeat;
    display: block;
    overflow:hidden;
    text-indent: 100%;
    white-space: nowrap;
    $sprite_image_path: sprite-path($map);
    $sprite_width: round(image-width($sprite_image_path) / $pixel_raito);
    $sprite_height: round(image-height($sprite_image_path) / $pixel_raito);
    @include background-size($sprite_width, $sprite_height);
}
@mixin sprite-item($map, $name, $pixel_raito:1) {
    width: image-width(sprite-file($map, $name)) / $pixel_raito;
    height: image-height(sprite-file($map, $name)) / $pixel_raito;
    $pos: sprite-position($map, $name);
    background-position: (nth($pos, 1) / $pixel_raito) (nth($pos, 2) / $pixel_raito);
}
@mixin sprite-css-hover($class_name, $dir_path) {
    $map: sprite-map($dir_path + '*.png');
    .#{$class_name} {
       background-image: $map;
    }
}
@mixin sprite-css($dir_path, $pixel_raito:1) {
    $map: sprite-map($dir_path + '*.png');
    $dir_name: sprite-map-name($map);
    .#{$dir_name} {
        @include sprite_common($map, $pixel_raito);
    }
    @each $name in sprite-names($map) {
        .#{$dir_name}_#{$name} {
            @include sprite_item($map, $name, $pixel_raito);
        }
    }
}

● 3. スプライトを生成する画像ファイルをセット

cssスプライトを作りたい画像ファイルをフォルダ `img/splites/navi/に置きます。 ロールオーバーさせたい画像ファイルををフォルダimg/splites/navi_over/` に置きます。
画像の例

├── sprites/
│   ├── navi/
│   │   ├── file1.png
│   │   ├── file2.png
│   │   ├── file3.png
│   ├── navi_over/
│   │   ├── file1_over.png
│   │   ├── file2_over.png
│   │   ├── file3_over.png

● 4. scssファイルの作成

好きな名前のscssファイル(ここでは `style.scss` とします。)を scss フォルダに作成して以下のように記述します
(2行だけです。これだけでCSSスプライト画像の生成とCSSコードの書き出しが行われます。)

@include sprite-css("sprites/navi/", 2);    // フォルダ名, 倍率
@include sprite-css-hover("navi", "sprites/navi_over/");    // クラス名, フォルダ名

● 5. compass から scss → css 変換の実行

compassを起動して scss→css 変換を実行します。 (codekitやsublimetextを使用することをおすすめします。)

● 6. HTMLを用意する

htmlは以下のように記述します

<link rel="stylesheet" href="./css/style.css">
<ul>
<li><a class="navi navi_file1" href="#">メニュー1</a></li>
<li><a class="navi navi_file2" href="#">メニュー2</a></li>
<li><a class="navi navi_file3" href="#">メニュー3</a></li>
</ul>

これでretina, ロールオーバー対応のメニューができます。 ちなみに生成されるCSS `style.css` は以下の様なものになります。

.navi {
  margin: 0;
  padding: 0;
  background-image: url('../img/sprites/navi.png');
  background-repeat: no-repeat;
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -moz-background-size: 150px, 150px;
  -o-background-size: 150px, 150px;
  -webkit-background-size: 150px, 150px;
  background-size: 150px, 150px;
}
.navi_file1 {
  width: 150px;
  height: 25px;
  background-position: 0 0;
}
.navi_file2 {
  width: 150px;
  height: 25px;
  background-position: 0 -25px;
}
.navi_file3 {
  width: 150px;
  height: 25px;
  background-position: 0 -50px;
}
.navi:hover {
  background-image: url('../img/sprites/navi_over.png');
}

参考: http://bit.ly/1WgkQtD

No.1030
05/11 10:03

edit

css
compass
scss

Mac OSXへの SCSS, Compass簡単導入方法

●1. Xcodeをインストールする

●2. Command line Toolsをインストールする

(要apple developerアカウント) https://developer.apple.com/downloads/?name=for Xcode
から対応するOSXバージョンの「Command line Tools (OSX10.XX)for Xcode X.X」 をダウンロードしインストール

●3. SASS, Compass をインストールする

ターミナルから

sudo gem install sass
sudo gem update --system
sudo gem install compass

でインストールする。

インストールの確認は

sass -v
compass -v

●4. Sublime Text をインストールする

Sublime Textはシェアウェアですが、シェアウェア登録する前でも機能制限なく試すことができます(たまに保存時にダイアログが出るくらいです。) https://www.sublimetext.com

●5. Sublime Textの Package Controll をインストールする

https://packagecontrol.io/installation
に表示されるコードを
Sublime Textの【View】→【Show console】に入れて return を押すとインストール開始。
インストール完了後【Sublime Text】→【Preferences】→【Package Contol】がメニューにあればインストール成功

●5. Sublime Textのパッケージをインストールする

Command + Shift + p + install  「return」

で表示される画面から以下の4つのパッケージをインストールします。(インストール後は画面が元に戻るので再度 Command + Shift + p + install)

Sass
SASS Build
Scss
Compass
SublimeOnSaveBuild

インストール成功かどうかの確認は

Command + Shift + p + list  「return」

で表示される画面に全てのパッケージがあるかどうかで確認します。

●6. パスの追加

以下のファイルをSublime Text で開く

/Users/【ユーザー名】/Library/Application Support/Sublime Text 3/Packages/Compass/Compass.sublime-build

開いたファイルはjsonファイルなので、一番最後の行の後ろにカンマ「,」をつけて以下の行を追加

	"osx" : {"path": "/usr/local/bin:/Users/【ユーザー名】/.rbenv/shims:$PATH" }
No.1029
05/07 13:39

edit

css

CSSによるDIV(ブロック)要素の横並び方法4種類

CSSによるDIV(ブロック)要素の横並び方法4種類

デモはこちら

#1.floatによる横並び

注意点

  • 親要素 :after に 「content」「display」「clear」要素を追加する。
  • または親要素に clearfix を指定する

css

.div_float:after {
  content:'';
  display:table;
  clear:both;
}
.div_float .cell {
  border: 1px solid black;
  float: left;
}
</style>

html

<div class="div_float">
<div class="cell">aaa</div>
<div class="cell">bbb<br>bbb</div>
<div class="cell">ccc</div>
</div>

実際の表示

aaa
bbb
bbb
ccc

#2.display: inline-blockによる横並び 「display: inline-block」は幅や高さなどを指定できるインライン要素です。

注意点

  • 親要素に font-size: 0; を指定してブロック間の隙間をなくす
  • 子要素に font-size: 12pt; を指定してフォントの大きさを指定する

css

  .div_inline_block{
    font-size: 0;
  }
  .div_inline_block .cell {
    font-size: 12pt;
    border: 1px solid green;
    display: inline-block;
  }

html

<div class="div_inline_block">
  <div class="cell">aaa</div>
  <div class="cell">bbb<br>bbb</div>
  <div class="cell">ccc</div>
</div>

実際の表示

aaa
bbb
bbb
ccc

#3.「display:table;」「display:table-cell;」による横並び

注意点

  • 親要素に display:table; を指定(実はなくてもOK。)
  • 子要素に display:table-cell; を指定

css

  .div_table{
    display:table;
  }
  .div_table .cell {
    display: table-cell;
    border : 1px solid red;
  }

html

<div class="div_table">
  <div class="cell">aaa</div>
  <div class="cell">bbb<br>bbb</div>
  <div class="cell">ccc</div>
</div>

実際の表示

aaa
bbb
bbb
ccc

#3.4.「display:flex;」による横並び

注意点

  • 親要素に「display: flex;」を設定
  • 子要素は自動的にflexアイテムになる
  • 古いブラウザ用にベンダープレフィックスが必要

css

    .div_flex{
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
    }
    .div_flex .cell {
      border : 1px solid purple;
    }

html

  <div class="div_flex">
    <div class="cell">aaa</div>
    <div class="cell">bbb<br>bbb</div>
    <div class="cell">ccc</div>
  </div>

実際の表示

<div class="cell">aaa</div>
<div class="cell">bbb<br>bbb</div>
<div class="cell">ccc</div>

 

参考 : http://flexboxin5.com 参考 : http://bit.ly/1VT62NP
参考 : http://bit.ly/1obD69i

添付ファイル1
No.1003
05/26 14:53

edit

添付ファイル

css

スマホサイト制作時に設定しておくと良いhtml, css 項目

スマホサイト制作時に設定しておくと良いhtml, css項目

1. リンクを押した時に押した領域に色をつける

a{
	-webkit-tap-highlight-color: rgba(200,200,200,0.2);	
}

2. 画像がはみ出すのを防ぐ

img{
	max-width: 100%;
	height: auto;
}

3. ボーダーを追加した時に width, height が増えるのを防ぐ

*{
	box-sizing: border-box;
}

4. スマホで見た時に横に移動(左右にグラグラ)するのを防ぐ

<body>
 <div class="wrapper">
  ここに記述していきます。
  </div>
</body>
.wrapper{
	overflow: hidden;
}

5. フォーム入力時に画面がズームするのを防ぐ

  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
No.1001
05/19 17:15

edit

携帯スマホサイト
css

CSS3の実用的なアニメーション

CSS3が未対応なブラウザIE9のシェア低下にともなって

JavaScriptで行っていた簡単なアニメーション処理をCSS3で行うのが実用的になってきました。
そこで、CSS3の実用的なアニメーションを紹介します。

Simple Icon Hover Effects(マウスオーバー時にアイコンの縁にエフェクトを掛ける)

http://goo.gl/xApnVD

CSSのみで実装するキャプションエフェクト 20 | NxWorld(画像マウスオーバー時にキャプション(説明文)をアニメーションで出現させ表示する)

http://goo.gl/ld5EIC

Original Hover Effects with CSS3

http://goo.gl/SkHEG4

Inspiration for Button Styles and Effects | Codrops(ナビゲーションやSubmitボタンのマウスオーバー時のアニメーション)

http://goo.gl/sQaZE7

Creative Link Effects(文字だけのナビゲーションボタンのマウスオーバー時のアニメーション)

http://goo.gl/RpklMj

Dribbble - Download by xjw

http://bit.ly/1IatBAl

3D Thumbnail Hover Effects

http://goo.gl/2YEH9d

Grid Item Animation Layout | Codrops(画面遷移時のエフェクト。デモページ自体もレスポンシブになっています。)

http://goo.gl/jVngPB

No.986
12/17 16:43

edit

css
アニメーション

横幅指定せずに(サイズが可変な)DIVをセンタリングするCSS

一般的には<DIV>をセンタリングするには `margin: 0 auto; width:500px;` というふうに


##■ ページネーションなどサイズが可変なDIVをセンタリングするには
```
<div class="pagination_block">
	<div class="pagination">
		<a href="#">1</a>
		<strong>2</strong>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
	</div>
</div>
```
```
. pagination_block {
	text-align: center;
	font-size:0;
}
. pagination {
	display: inline-block;
}
```
とやればOKです。
親要素のスタイル ``` font-size:0; ``` で余計な隙間を作らないようにしています。


## ■ インラインブロック(display: inline-block;) 要素とは?
「ブロック要素」は上から下に並びますが「インラインブロック要素」は横に並びます。
画像ファイル<img>タグをイメージするとわかりやすいでしょう。  
以下の様な特徴があります。

- margin , padding を上下左右に指定できる。
- width , height を指定することができる。
- vertical-align を指定することができる。
- 親ブロックのtext-align が有効。

です。

No.962
12/21 14:40

edit

css

画像やCSS,JavaScriptにブラウザキャッシュを適用させる

画像やCSS,JavaScriptにブラウザキャッシュを適用させて表示を高速化する方法です。

ちなみにGoogle Adsenseでは以下の様なアラートが出ることがあります。

<b>ブラウザのキャッシュを活用する</b>

静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。

設定方法は次の通り

.htaccess に以下の内容を記述してサイトのトップに設置

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 week"
ExpiresByType image/jpeg "access 1 week"
ExpiresByType image/gif "access 1 week"
ExpiresByType image/png "access 1 week"
ExpiresByType image/x-icon "access 1 week"
ExpiresByType text/css "access 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
</IfModule>

ただしキャッシュがきくということは、画像ファイルなどを差し替えた時にうまく変更が反映されない可能性があります。

強引にキャッシュを無効にして画像ファイルを差し替える

<img src="aaa.jpg?123456789" />

というふうに ?123456789 クエスチョンマークの後にランダムな数字などを追加します。

これでキャッシュを無効にすることが出来ます。



引用 : http://pcmanabu.com/alarm-of-google-adsense-cash/

No.904
07/14 14:06

edit

css
.htaccess

複数の画像を1枚にくっつけて保存し、サイト表示を高速化させる(CSS Sprite)

CSS sprite を使用するとサイトの表示が高速になります。

手法としては、複数の画像を1枚に画像にくっつけて保存(mysprite.png)し、表示するときに

position: absolute;
top: -210px; /* 上下にずらす */
top: 0px;        /* 左右にずらす */

でずらすというもの。

Google で使われているCSS Sprite の方法

html

<a class="menu_test" href="#"><img src="/css/mysprite.png"</a>

css

a.menu_test {
	display: block;
	overflow: hidden;
	position: relative;
	width : 50px;
	height : 20px;
}
	.menu_test img{
		position: absolute;
		top: -210px;
	}
	/* ロールオーバー */
	.menu_test img:hover{
		position: absolute;
		top: -230px;
	}

これだけ。簡単です。

zipで複数画像を圧縮して送るとCSS Sprite を作成してくれる。

http://ja.spritegen.website-performance.org/

Fireworks用エクステンション ■CSS Sprite Extension

http://web.r-studio.jp/fieworks/articles/introduce_csssprite_extension.html

No.745
10/25 09:19

edit

css

CSSチェックしエラー訂正するサイト【cleancss.com】

CSSをチェックしてエラー訂正をしてくれるサイト

http://www.cleancss.com/

No.439
06/16 16:24

edit

css

Windows版IEで画像をブロック要素にしてマージンをセットするとずれる

<img src="test.gif" style="display:block ;margin-top:10px; margin-bottom:10px;" />

みたいな指定をすると Windows版IE(IE6で確認)でずれることがある。

この場合は<div>を挟んでやるとなおる。

<div>
<img src="test.gif" style="display:block ;margin-top:10px; margin-bottom:10px;" />
</div>

(※↑ 実際は外部cssに記述します。)


No.431
06/16 16:25

edit

css

DIVの中を下揃えで配置する

DIVの中を下揃えで配置を行うには

.test{
	position:absolute;
	bottom: 0;
}

でOK!

例:

<HTML>
<BODY>
<H1 style="height:500px;border:solid 1px red;position:relative;">
<span style="position:absolute;bottom:0">テキストテキストテキストテキストテキストテキスト</span>
</H1>
</BODY>
</HTML>
添付ファイル1
shita.html ( 369.0 Bytes ) ダウンロード
No.427
04/21 10:32

edit

添付ファイル

css

css レイアウトで画像ボタンのメニューを作成する方法(css sprite)

よく使われる例。
http://kleza.blogspot.com/2009/04/css-sprite.html

背景画像だけを表示してテキストを隠すやり方。
「Dwyer Method」がおすすめです。
http://www.mezzoblue.com/tests/revised-image-replacement/
No.350
08/02 14:37

edit

css

構造のマークアップなしでフロートをクリアする方法「clearfix」

今更ですが。最近ではIE6,7,8に対応する必要がなくなってきたので clearfixのCSS記述は短くなっています。

● HTMLに記述

<div class="clearfix">
  <div style="float:left; width:100px; height:100px; border:1px solid red;">子DIVタグ:カラム1</div>
  <div style="float:left; width:100px; height:100px; border:1px solid red;">子DIVタグ:カラム2</div>
</div>

● clearfix(今のやり方 Windows IE6 , IE7 に対応する必要が無い場合)

.clearfix:after {content:''; display:table; clear:both;}

clearfix(昔のやり方。参考までに。)

.clearfix:after{
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix{
    display:inline-block;
    min-height:1%;  /* for IE 7*/
}
/* Hides from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
No.288
12/15 14:30

edit

css

CSSレイアウト時のよくやる失敗と対処法

windows ie 全盛の時のtipsですが残しておきます。

■ floatでレイアウトしたときのボックスの間に隙間が出来る
→隙間が出来るボックス要素全てに float 要素を追加

■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る
→ 下記を追加
 img { display: block; }

■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる
→ずれる<div>等に vertical-align を設定する(top 又は bottom)

■ <td>内のフォントが正しく指定したとおりでない(Win IE  Mac IE)
→<td>の中に<span>をいれて対応する

■ MacIEで<div>を floatさせると表示が崩れる。
→ フロートさせるdiv の width height 属性を指定する 

■ <ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると
隙間が出来てしまう
→ overflow:hidden;
font-size:1px; を追加
line-height プロパティ値をチェック

■ background-imageで指定した画像が表示されない
外部CSSに記述している場合、そのCSSファイルからの相対パスで表記する必要があるので、パスの記述に間違いがないか調べる

■ Windows版 IE 6 で 高さ 1px の div が作成できない。(10pxくらいのdivになってしまう)
→height:1px; overflow:hidden;
と記述する。

■ Windows版 IE 6 で float 時の margin が 2倍に解釈されてしまう。
→display: inline; を加える
(CSS2 の仕様では「float を指定した要素は display の指定を無視する」のでほかのブラウザでもOK)
float: left; display: inline; を1セットと覚えておくと楽。

■ Windows版 IE 7 でcssのみでブロック要素をセンタリングできない。
→ センタリングしたい要素に margin:0 auto;
→ 親要素に 	text-align: center;
(厳密にはIEのレンダリングモードによるのでまずそれをチェックすること)
No.157
05/08 16:50

edit

css

Windows IE を判別してJavaScriptやCSSを適用する

Windows IE を判別してIEだけにJavaScriptやCSSを適用するには以下のように条件分岐コメント(タグ)を使用します。

ただし

IE バージョン10以降(IE 10, 11)では条件分岐コメントは適用されません

なのでIE10 ,11 の場合はJavaScriptを使用して条件分岐する必要があります。

■ 条件分岐コメント使用例

指定のバージョン(IE バージョン8の場合に ie_only.css を読み込ませる)
<!--[if IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

指定のバージョン以上(IE バージョン8,9の場合に ie_only.css を読み込ませる)
<!--[if gte IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

指定のバージョン以下(IE バージョン8,7,6,5 の場合に ie_only.css を読み込ませる)
<!--[if lte IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

指定のバージョンより上(IE バージョン9の場合に ie_only.css を読み込ませる)
<!--[if gt IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

指定のバージョン未満(IEバージョン 7,6,5 の場合に ie_only.css を読み込ませる)
<!--[if lt IE 8]>
    <link rel="stylesheet" href="ie_only.css" type="text/css" />
<![endif]-->

■JavaScript使用例(Windows IE 10,11 用)

// (IE バージョン5, 6, 7, 8, 9, 10, 11の場合に ie_only.css を読み込ませる)
<script type="text/javascript" >
if (navigator.userAgent.indexOf('msie') >= 0 || navigator.userAgent.indexOf('Trident') >= 0){
		var d = document;
		var link = d.createElement('link');
		link.href = 'ie_only.css';
		link.rel = 'stylesheet';
		link.type = 'text/css';
		var h = d.getElementsByTagName('head')[0];
		h.appendChild(link);	
}
</script>
No.35
04/09 14:06

edit

css
IE

複数のCSSスタイルを指定するには?

<p>タグにクラス「note」「emph」という複数のクラスを指定するには

<p class="note emph">テキスト</p>

という風に半角スペースで区切って記述する

No.5
06/16 16:36

edit

css

ブラウザごとの差異をリセットするCSSデフォルト(reset.css)の設定

ブラウザごとの表示の差をなくすために下記のようなリセットをするCSSを最初に読み込ませるといいです。(おすすめ順)
厳密には
・正規化するCSS(ブラウザの違いだけを揃えるCSS「normalize.css」「sanitize.css」)
・リセットするCSS(全てのスタイルを一旦リセットするCSS「eric meyer reset css 2.0」)
という違いがありますが、どれか1つを選んでhtmlの最初に読み込ませるという点では同じです。

● Normalize.css(GitHubやBootstrapで採用されています。オススメ)

https://necolas.github.io/normalize.css/

● sanitize.css

http://10up.github.io/sanitize.css/

● eric meyer reset css 2.0

http://meyerweb.com/eric/tools/css/reset/

No.4
03/23 21:00

edit

Bootstrap
検索エンジン
css