CSS – ページ 2 – 東京発、雲に乗って

2017年10月30日2017年11月10日

jQueryでスタイルに!importantを指定する

jQueryでスタイルを設定する方法は、基本的に以下のような記述ですが

$(セレクタ).css('margin', '10px');

1	$(セレクタ).css('margin', '10px');

スタイルに!importantを指定する場合は、この方法は使用できません。

// これは反映されない
$(セレクタ).css('margin', '10px !important');

1 2	// これは反映されない $(セレクタ).css('margin', '10px !important');

!importantを指定する場合はcssTextを使用します。

$(セレクタ).css('cssText', 'margin: 10px !important;');

1	$(セレクタ).css('cssText', 'margin: 10px !important;');

ただし、このcssTextはスタイルを置き換えるメソッドですので
他で指定されているスタイルは無効になりますので注意が必要です。

2017年6月6日2017年6月6日

【JavaScript】外部のCSSファイルを動的にロード

外部のCSSファイルをJavaScriptから動的にロードする関数です。

var loaded_styles = {};
var load_css = function(src) {
  if(sdl.loaded_styles[src]) {
    return;
  }
  var head = document.getElementsByTagName('head')[0];
  var link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = src;
  head.insertBefore(link, head.firstChild);
  var loaded_styles[src] = 1;
};

var loaded_styles = {};

var load_css = function(src) {

if(sdl.loaded_styles[src]) {

return;

}

var head = document.getElementsByTagName('head')[0];

var link = document.createElement("link");

link.rel = "stylesheet";

link.type = "text/css";

link.href = src;

head.insertBefore(link, head.firstChild);

var loaded_styles[src] = 1;

};

使い方

load_css('/libs/css/style.css');

1	load_css('/libs/css/style.css');

2017年4月26日2017年4月26日

【CSS】カーソル形状の一覧

CSSで指定できるカーソル形状で、よく使われるものをリストアップしました。
文字にカーソルを合わせるとカーソル形状が変化します。

auto
default
pointer
move
wait
help
not-allowed
progress
n-resize
w-resize
nw-resize
ne-resize
all-scroll
col-resize
row-resize

2017年4月26日

【CSS】vertical-alignが効かないときに確認すること

縦方向の表示位置を整えてくれるスタイル「vertical-align」ですが、
横方向の「text-align」と比べて使用できる条件は限られています。

まずvertical-alignが使用できるのは
・インライン要素
・テーブル要素
のみです。divタグやpタグに、ただvertical-alignを指定しただけでは反映されません。

反映させるにはテーブル要素にしてしまいます。

display: table-cell;

1	display: table-cell;

それと、縦方向のサイズが指定されていなかったり、％で指定されていたりしても反映されません。
具体的なサイズで指定します。

height: 200px;

1	height: 200px;

2016年8月27日2017年3月1日

【CSS】Font Awesomeで簡単にアイコンが使える

Font Awesomeを使うと、ウェブページ上で簡単にアイコンを使えます。
こんな感じです。

新規
開く
保存
削除

テキストのみの場合と比べて見栄えがぐっとよくなりますよね。

使い方は、

まず
Font Awesomeの公式サイトから一式ダウンロードします。

ダウンロードしたらzipを解凍してサーバーにアップします。

あとは、ページでCSSをロードするだけ。

<link rel="stylesheet" href="アップした場所/font-awesome/css/font-awesome.min.css"/>

1	<link rel="stylesheet" href="アップした場所/font-awesome/css/font-awesome.min.css"/>

（フォルダ名のバージョンは削除しています）

上の4つのアイコンは、以下のように記述すれば表示できます。

<i class="fa fa-plus"></i> 新規
<i class="fa fa-folder-open-o"></i> 開く
<i class="fa fa-floppy-o"></i> 保存
<i class="fa fa-trash-o"></i> 削除

新規

開く

保存

削除

簡単ですよね。

とてもたくさんのアイコンが用意されていて、
こちらで探すことができます。