トップ  > メモ一覧  > カテゴリ「CSSリファレンス」の絞り込み結果 : 29件

29件中 1 〜 10 表示  1 | 2 | 3  次の10件> 最後»

No.5281【引用】まだCSSで消耗してるの? marginとpaddingを使いこなす3つのヒント



まだCSSで消耗してるの? marginとpaddingを使いこなす3つのヒント

 

いざWebデザイナーとしてのキャリアをスタートしても、プロのレベルになるまでには壁がたくさん。PhotoshopやIllustratorなどでは簡単にパーツを配置できるのに、いざコーディングとなると「均等にそろわない」「1ピクセルだけズレてる」「まわり込みがきかない」なんてことはありませんか?
もしかしたらその原因の1つは、基本的なプロパティである「marginとpaddingの使いわけ」ができていないからかもしれません。
こ...

引用元

更新:2016/07/20 09:42 カテゴリ: HTML・CSS  > CSSリファレンス ▲トップ

No.5233 レスポンシブ! 画像幅100% && 一定サイズ以下には縮めない && 画像の中央位置は動かさない

800x500 の画像の想定


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.item {
    position:relative;
    overflow:hidden;
    width:100%;
    height:500px;
}
.item img {
    position:absolute;
    left:0;
    right:0;
    width:100%;
    min-width:800px;
    min-height:500px;
}
@media (max-width: 800px)
{
  .item img {
    left:50%;
    margin-left:-400px;
  }
}
</style>
<title>スマートフォン用基本ページ</title>
</head>
<body>
<div class="item">
<img src="http:/example.com/examples/001.jpg" alt="" />
</div>
</body>
</html>

引用元

更新:2015/02/13 15:22 カテゴリ: HTML・CSS  > CSSリファレンス ▲トップ

No.4298 firefox 半角英数折り返し問題対応

firefox 半角英数折り返し問題対応


更新:2012/02/21 16:36 カテゴリ: HTML・CSS  > CSSリファレンス ▲トップ

No.3655【引用】【画像の境界線について】


【画像の境界線について】
画像にリンクを設定すると、一般的なブラウザでは画像の周囲に境界線が表示されます。

この境界線を消したい場合は、次のように指定します。
<a href=" index.html " > <img src="tagindex.gif" alt="TAG index" border=" 0 " > </a>
img要素 に border="" を追加して、その値に 0 を指定します。

※ただし、 img要素のborder属性 は非推奨属性となります。(Strict DTDでは使用できません)

...

引用元

更新:2011/05/15 21:15 カテゴリ: HTML・CSS  > CSSリファレンス ▲トップ

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

複数の画像を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 を作成してくれる。

引用元

更新:2010/08/03 01:45 カテゴリ: HTML・CSS  > CSSリファレンス ▲トップ

No.2608 CSS Spriteを活用しよう

みなさんお馴染みのYouTube

このYouTubeのプレーヤーに使われている画像は実は↓のような一枚の画像が用意されていて、スタイルでうまく表示されているようです。


YouTube

画像をスライスして一枚ずつ読み込むよりも、このように一枚の画像にすると、スライスの手間が省けるのと、読み込みの再に、リクエストが一回で済むので、場合によってはこちらの方が早く読み込まれることになりそうです。

このテクニックをCSS Spriteって言うそうです。。(この手法自体は知ってましたが、CSS Spriteって呼ばれているのは知りませんでした…)

せっかくなので、本日はCSS Spriteをいろいろとまとめてみました。

1. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

一枚ずつ画像をスライスした場合と、CSS Spriteを使った場合の比較をされています。
サンプルのコードも公開されているので、わかりやすいですね。


CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

一枚の画像をCSSのbackground-positionで表示してみると。


CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

結果、HTTPリクエストは1回、トータルの画像サイズも7KBほど短縮されています。

2. Image Sprite Navigation With CSS

メニューのロールオーバーにCSS Spriteを使うのが一番分かりやすい例ですね。

↓のようにオーバーの画像もまとめて、一枚画像を用意して、hoverのbackground-positionを変更。


Image Sprite Navigation With CSS

3. Advanced CSS Menu

WebDesignerWallさんのメニューもとってもきれいですね。ファイルもダウロードできるので便利です。


Advanced CSS Menu

4. Dragon Interactive

jQueryとCSS Spriteを使った例。とってもきれいなメニューですね。


Dragon Interactive

↓このような画像が用意されています。


Dragon Interactive

5. JavaScript Sprite Animation Using jQuery

こちらもjQueryとCSS Spriteでページをパラパラとめくるような効果を出しています。

↓のような全ページの画像を一枚用意して。

JavaScript Sprite Animation Using jQuery

↓のようなページをめくる時の画像と組み合わせています。

JavaScript Sprite Animation Using jQuery

デモページはこちら

ページ右側をクリックすると次のページに、左側をクリックすると前のページにめくれたように見えますね~。

6. CSS Sprite Generator

もう既に画像スライスしちゃったよ~!って方にお勧めなのが、こちらのCSS Sprite Generator。スライスした画像をフォルダにまとめて、ZIPで圧縮して、このジェネレーターにアップロードすると、一枚の画像を作ってくれて、 CSSも生成してくれる優れものです。

CSS Sprite Generator

みなさんもCSS Spriteを活用してみてはいかがでしょう?

引用元

更新:2010/06/06 10:44 カテゴリ: HTML・CSS  > CSSリファレンス ▲トップ

No.2453 リストの「・」を消す

リストの「・」を消す

プラグインはリストで書かれていることが多いのですが、リストだと文頭に「・」を表示します。
この「・」を消す方法を紹介します。


スタイルシートの末尾に次の記述を加えてください。

li {
margin-left:0px;
list-style-type: none;
}


赤い数値は左側の余白の値です。お好みの余白になるように適当な数値を入れてください。

引用元

更新:2010/05/09 22:19 カテゴリ: HTML・CSS  > CSSリファレンス ▲トップ

No.2123 CSSだけでスタイリッシュな角丸ボタンが作れる『SexyButtons』が便利そう

CSSだけでスタイリッシュな角丸ボタンが作れる『Sexy Buttons』が便利そう

ちょっと素敵なCSSファイルのご紹介。

このCSSを読み込んで、簡単なマークアップをするだけで簡単にスタイリッシュな角丸ボタンが作れますよ。

icons

↑ こんなのが一発で作れます。

マークアップは以下のとおり。spanが二つあるのがまぁ、あれですが。

<button class="sexybutton"><span><span><span class="ok">Submit</span></span></span></button>

ちょっとしたWebサービスなんかに良いかもですね。詳細は以下からどうぞ。

» Sexy Buttons Quick Start Guide and Demo

こちらもあわせてどうぞ



引用元

更新:2010/02/25 07:44 カテゴリ: HTML・CSS  > CSSリファレンス ▲トップ

No.1911 CSSだけでタブメニューによるコンテンツ切り替えを実現する方法

CSSだけでタブメニューによるコンテンツ切り替えを実現する方法

Click to learn more...

これ、個人的に知らなかったのですが、有名な手法なんですかね?CSSだけでタブメニューを作れちゃう、というテクニックです。

JavaScriptで表示・非表示を切り替えるというのが定石だと思うのですが、JSが使えない時に便利かもですね。Opera用にちょっとしたHackが必要ですが、覚えておくと便利そうですな。

css

↑ CSSだけでタブメニューによるコンテンツ切り替えが可能です。

デモを見た方が早いかな・・・。

» DEMO: My very nice CSS tabbed portfolio

ソースを見ればなんとなくわかると思いますが、解説はこちら。

» Tabbed CSS only website template | Web development blog of Tibor Szász

引用元

更新:2009/12/23 14:17 カテゴリ: HTML・CSS  > CSSリファレンス ▲トップ

No.1782 ポジショニングで細かくレイアウト(position、top、right、bottom、leftプロパティ)

ポジショニングで細かくレイアウト(position、top、right、bottom、leftプロパティ)

 floatプロパティに比べ、さらに細かく配置方法や位置などを指定をすることができるのが、positionプロパティおよびtop、right、bottom、leftの各プロパティを利用する方法です。

positionプロパティ

  positionプロパティは、ボックスの配置方法を指定するプロパティです。値には、通常配置の「static」、相対配置の「relative」、絶 対配置の「absolute」、固定配置の「fixed」を指定することができます。実際の配置位置については、次項で説明するtop、right、 bottom、leftの各プロパティで指定します。

 図5のように、positionプロパティで「relative」を指定した場合、 要素本来の位置が基準となって配置されるのに対し、「absolute」や「fixed」では親ボックスの位置が基準となる、という点に注意しましょう。 「fixed」では、さらにスクロールに対して固定的に配置されます。

図5:positionプロパティによる配置方法と基準位置
図5:positionプロパティによる配置方法と基準位置

top、right、bottom、leftプロパティ

 ボックスの実際の配置位置については、top、right、bottom、leftの各プロパティで指定します。基準となるボックスから、指定した要素のボックスのマージンの外側までの距離を指定します。

 各プロパティは値として、「実数値+単位」や「%値」、初期値の「auto」を指定することができます。

top、right、bottom、leftプロパティの値と説明
説明
実数値+単位 相対配置のときはその要素本来の位置からの距離、絶対配置や固定配置のときは包含ブロックの四辺からの距離を基準として指定する。
%値 相 対配置のときはその要素自体の幅または高さを、絶対配置や固定配置のときは包含ブロックの幅または高さを基準とする。topとbottomは高さに対する 割合、leftとrightは幅に対する割合で指定する。基準となるボックスの高さが明確に指定されていない場合は、「auto」を指定した場合と同じ結 果になる。
auto 初期値。要素やボックスの種類などに応じて自動的に調整される。

相対配置の例

 では、「相対配置」の実際のサンプルをみていきましょう。

[リスト6]XHTMLソース/03.html
<h1>position: relative</h1>
<h2>相対配置</h2>
<p>「position:relative」は、要素本来の位置が基準になります。</p>

  h2に「position: relative」および「top: -60px」を指定します。この場合、h2要素は本来の位置から上に60px移動して表示されます。後に続くp要素のボックスの位置は、h2要素のボック スが本来の位置から移動していないものとして計算されます。

[リスト7]CSSソース:相対配置の例/03.css
h1 {
  color
: blue;
  font
-size: 50px;
}
h2
{
  position
: relative;  /* 相対配置 */
  top
: -60px;
  background
-color: black;
  color
: white;
}
図6:相対配置の例(左:適用前、右:適用後)
図6:相対配置の例(左:適用前、右:適用後)

 「position:relative」の適用前と適用後を重ねて移動距離を示したものが、次の図7になります。

図7:「position:relative」の適用前と適用後
図7:「position:relative」の適用前と適用後

 ここでは、topプロパティを使用していますが、他のプロパティの位置指定については、次の表を参考にしてください。

top、right、bottom、leftプロパティの説明
プロパティ 説明
top 基準となるボックスの上から指定したボックスの上までの距離を指定
right 基準となるボックスの右から指定したボックスの右までの距離を指定
bottom 基準となるボックスの下から指定したボックスの下までの距離を指定
left 基準となるボックスの左から指定したボックスの左までの距離を指定

  このサンプルでは、ブラウザのデフォルトスタイルを特に考慮していませんが、実際には、ブラウザによってデフォルトスタイルシートが異なる場合もありま す。必要に応じて、margin、padding、width、height、line-heightなどの各プロパティを指定すると良いでしょう。

引用元

更新:2009/11/29 11:01 カテゴリ: HTML・CSS  > CSSリファレンス ▲トップ
29件中 1 〜 10 表示  1 | 2 | 3  次の10件> 最後»

FuelPHP

Mac

web開発

プロマネ

マネタイズ

プレゼン

webサービス運用

webサービス

Linux

サーバ管理

MySQL

ソース・開発

svn・git

PHP

HTML・CSS

JavaScript

ツール, ライブラリ

ビジネス

テンプレート

負荷・チューニング

Windows

メール

メール・手紙文例

CodeIgniter

オブジェクト指向

UI・フロントエンド

cloud

マークアップ・テキスト

Flash

デザイン

DBその他

Ruby

PostgreSQL

ユーティリティ・ソフト

Firefox

ハードウェア

Google

symfony

OpenPNE全般

OpenPNE2

Hack(賢コツ)

OpenPNE3

リンク

個人開発

その他

未確認

KVS

ubuntu

Android

負荷試験

オープンソース

社会

便利ツール

マネー

Twig

食品宅配

WEB設計

オーディオ

一般常識

アプリ開発

サイトマップ

うずら技術ブログ

たませんSNS

rss2.0