CSS – ページ 3 – WebTecNote

[CSS] contentプロパティで挿入できるコンテンツ

2019/09/262010/03/23 by Tenderfeel

clearFixでお馴染みなCSSの擬似セレクタ::beforeと::afterではcontentプロパティというものが使えるわけですが、
::beforeと::afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。
しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、
今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。

※2019年現在は全ブラウザ対応しています。

挿入出来るモノ

大きく分けると３つです。

テキスト
プロパティの値
画像

続きを読む

[MooTools] SpriteNavigation Plugin

2019/06/272010/01/04 by Tenderfeel

MooToolsとCSSでFlashのような滑らかなマウスオーバーやカレント表示を実装するプラグイン。

spritenavigation plugin

元ネタはCreate a Sprited Navigation Menu Using CSS and MooToolsで、
よくやるコーディングに合わせて作り直しつつちょっとロジックを変えてクラス化した。
使用する際にはHTMLとCSSにいくつかルールがあります。

DEMOはこちら

Image

全部つなげて作る。順番はなんでもいいです。
デモのやつは上から、通常・マウスオーバー・クリック・カレント、になってます。

Download(psd file):
“SpriteNavigation Demo Base” をダウンロード nav.zip – 3091 回のダウンロード – 41.43 KB

続きを読む

[MooTools] mooContreGallery Plugin

2019/06/272009/11/15 by Tenderfeel

mooContreGalleryはhttp://www.contreforme.ch/のProjectsページで使われている
画像拡大、スクロール、インフォメーション表示など一連のエフェクトを貴方のサイトに実装するプラグインです。
本家サイトの動きをClass化＋最新バージョンに対応させつつ再現したものですが、
オプションを変更する事によってエフェクトをお好みにアレンジすることが出来ます。

当プラグインの公開についてはcontreforme sàrlの中の人に許可を頂きました。
This class original source created from contreforme sàrl. Thank you!

また、このプラグインは「これどうやって作るの？」という質問がきっかけで出来たものです。
jQueryではやる気が出ず、MooToolsでの回答になりましたが(笑)質問を送ってくれたH氏にも感謝！
チュートリアル記事はこちら »

続きを読む

[CSS&JS] 上下２つに分かれてるヘッダーナビゲーションを１つのリストで

2009/10/15 by

次の画像のようなヘッダー部分にある上下に分かれてるナビゲーションメニューを作るとき、

上下に分かれてるナビの例

上に並んでるHOME・サイトマップ・個人情報保護方針とその他のulを別にする手法がよくあると思うけど、
普通に１つのリストに書いてクラス振ってfloatとposition駆使して配置するという手もあります。
その方が分けるよりもなんとなく美しい感じがするじゃないですか、XHTMLソース的に考えて。

続きを読む

[css] フォームのボタンをスタイルシートで画像ボタンに変更する

2009/09/14 by

フォームのボタンについては以前、buttonタグにボタン画像をそのまま入れるという手法を書きましたが、もう一つ、ボタンの見た目をCSSで変更する手法がございます。この記事ではCSSでスタイリッシュなフォームボタンを作 … 続きを読む

[mootools] 別窓を開くアイコンとhrefの拡張子に応じたアイコンや属性を追加する

2019/06/272009/07/17 by Tenderfeel

mooExternalLinkクラスがもっさりしすぎてたので書き直しついでに色々追加しました。
完全に別物になったので名前も変更。ver1.2.3にも対応しています。
mooExternalLinkLiteは様子見て配布しようかな。

jQuery版も追々書き換えたい…。

こんなことします。

リンクの前にファイルタイプアイコンを追加
別窓で開くアイコンと属性を追加
PNG、JPG、GIFへのリンクにQuickBoxのrel属性を追加

上記３つはオン・オフ可。QuickBoxを使用する場合は別途ダウンロードが必要です。
ファイルタイプアイコンはhref末尾のpdfやzip等の拡張子で判別します。
有効な拡張子はドットを除いて２～３文字のものです。オプションで設定してない拡張子にはアイコンは出ません。

拡張子以外にhrefの内容で判別するものは次の通り

mailto:　→mail
https://　→https
window.print() →print

矢印で示しているのはアイコン画像の拡張子より前の部分です。
print.pngという画像を用意すればプリンターのアイコンをつけることができます。

続きを読む

[CSS] buttonタグの中に画像だけを入れる場合

2021/06/102009/07/07 by Tenderfeel

フォームのボタンをカスタマイズする場合にオーソドックスなのは、

type="image" を使う（タイプ属性にimageを指定する）
inputやbutton要素にbackground-imageを指定する

の2つなんだけど、buttonタグの中にボタンにしたい画像をそのまま入れる手もある。

普通に入れたらこうなるけれども、

CSSをちょっと弄れば…

中の画像入れ替えるだけでokな代物に。

続きを読む

[IE7]不自然な横スクロールバーが出るバグについて

2009/06/162009/06/16 by

ＩＥ7で変な横スクロールバーが出る件。font-style:italic、position、改行の三点セットでも発生するっぽい？

[CSS]２行以上あるテキストを上下中央に配置する

2009/04/022009/04/01 by

画像の隣にテキスト、というのではなくて文章だけの場合です。
テキストが一行ならline-heightでおｋだけど、行が複数あった場合はどうする？

Vertical Centering

テーブル使えば一発だけどdivでやろうとすると結構面倒くさい。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
        <title>Vertical Centering Text in DIV</title>
        <style>
            .centering {
                display: table;
                height: 300px;
                width: 300px; 
                background: #efefef;
                overflow: hidden;
            }
            .centering-body {
                display: table-cell;
                vertical-align: middle;
            }
        </style>
        <!--&#91;if lt IE 8 &#93;>
        <style>
            .centering {
                position: relative;
            }
            .centering-body {
                 position: absolute;
                 top: 50%;
            }
            .centering-body div {
                position: relative;
                top: -50%;
            }
        </style>
        <!&#91;endif&#93;-->
</head>
    <body>
<div class="centering">
    <div class="centering-body">
        <div><p>et Aenean Vestibulum morbi tristique netus Donec vitae, quam sit Pellentesque eleifend libero ultricies amet placerat Mauris vitae est. ac eu ante. tempor et feugiat egestas. semper. fames amet, malesuada tortor mi egestas sit turpis quam, eget, habitant leo. ultricies senectus </p></div>
    </div>
</div>
    </body>
</html>

続きを読む

[CSS]画像１枚でメニューボタンを作る

2009/02/19 by

tinyMCEや大手サイトなどでよく使われてる、メニューボタンの画像を１枚にまとめてしまう手法。
ボックスなどにも応用出来るので覚えとくと便利じゃないかなと思います。

続きを読む

[CSS] Flashを背景にする

2009/02/06 by

Flashを背景にしてるっぽく見せる手法についてのメモ。
Flashサイトにはしたくないけど背景をガシガシ動かしたい、みたいな時（無さそうだけど）に使えるんじゃないかなー。

まず普通に背景にしたいFlashと内容を追加する。flashのソースについては「ValidなFlash表示ソース」参照。

<div id="content">
<object type="application/x-shockwave-flash" width="500" height="300" title="title" data="index.swf">
  <param name="movie" value="index.swf" />
  <param name="quality" value="high" />
</object>
 <div class="section">
  <h2>Flash Background sample</h2>
  <p>背景をガンガン動かしたいならこんな手法もあるよっていう。</p>
 </div>
</div>

今更感漂うけど続くよー

続きを読む

[CSS]CSSだけで作る吹き出しのしっぽ

2008/12/022008/05/28 by

どんなボックスもしっぽさえつけりゃフキダシに見えるとエロイ人はいいました。
何故CSSだけで作るのか？それは…そこにCSSがあるからだ！

iframe対応のブラウザでご覧ください
直接見る»

まあ、崩れたりもするんですけど。

続きを読む

[CSS]Safari3.X用CSSハック

2008/04/162008/04/15 by

Safari3.1登場。爆速表示で非常に快適なブラウザです。
FireFoxがカスタムし過ぎか最近重いからこの速さはかなり新鮮。

FireFoxでチェックしながら作ってたら大抵Safariでも同じ表示になるんだけど、
今作ってるサイトでSafariがIE6系と同じ表示になる現象が発生したので
Safariにだけ適用するCSSハックを探してたらいいものがありました。

CSS Filter: Safari CSS Hack

Not that Safari 3.0 on Windows is a grade-A browser yet, and not that I have figured out any reasons to need to hack for this browser yet, but two good potential CSS filters include using :first-of-type and -webkit-min-device-pixel-ratio.

CSS, JavaScript and XHTML Explained » Targeting Safari 3 with CSS and JavaScript: Safari3 Hacks & Filters (2008-04-15)

続きを読む

[CSS]透過PNGと透過フィルターの使い方

2009/04/012008/04/12 by

要素を透過させる場合、アルファチャンネルPNGかCSSのフィルターどちらか使えば作ることが出来る。
アルファチャンネルPNGはPNG24とかの保存形式で、背景無し（またはマスクつき）の画像を保存すれば作成出来る。
Div等の背景を透過させる場合、アルファチャンネルPNGで80%くらいに透過させた画像を背景にすると、フィルターと変わらない効果を得られる。

透過フィルターを使った場合、中の要素まで透過してしまうという問題がある。
positionとか色々CSSを駆使すれば回避できないこともないが、アルファチャンネルPNGを使えば中の要素が透けることはない。

以下サンプル
iframe対応のブラウザでご覧ください
解説は続きに。

続きを読む

[CSS]スタイル優先順位の個別性と計算方法

2009/05/012008/04/06 by

クリエイターが身につけておくべき新・100の法則という本から紹介。
CSSは下に書いたものが優先されるプログラム的な仕様のほかに、優先順位を決めるルールがある。

よく知られてるのは以下の基本ルール。

CSS作成者による優先順位。
1. Webページ製作者が作成したCSS
2. Webブラウザ使用者が作成したCSS
3. WebブラウザのデフォルトCSS
記述位置が下のものが優先される。
!important宣言の付いたスタイルが最優先される。
!importantが付くと優先順位が変わる。
1. Webブラウザ使用者が作成したCSS（!important有）
2. Webページ製作者が作成したCSS(!important有）
3. Webページ製作者が作成したCSS
4. Webブラウザ使用者が作成したCSS
5. WebブラウザのデフォルトCSS

さらに、スタイルの個別性を決める数値というものが存在する。

続きを読む

[CSS]fieldsetにbackground指定するとIEではみ出す

2008/04/042008/03/12 by

fieldsetにbackground指定（color等）をしたとき、IEだけ上方向にはみ出して表示される。
原因はlegendにまで背景が適用されてしまうため。これはIEのバグらしい。

IEだけ背景なしにしてもよいが、そういうわけにもいかんという場合は、以下の方法で修正が可能。

続きを読む

[JS]Javascriptの有効・無効でCSSを変更する

2008/04/062008/02/28 by

javascriptが無効の時、有効で使ってるCSSだと表示がおかしくなる場合の回避方法について。

最近作ったサイトが、コンテンツの表示をmootoolsで動かしていて（スライドとかで）、javascript無効にするとまったく見えない状態になってしまう。
XHTMLソースを変更しているわけではないので、CSSだけ変更すれば見れる状態になる。（CSS無効でもXHTMLだからそれなりに見れる）
というわけで、javascriptの有効・無効でCSSを変更する方法についてのメモ。

続きを読む

[CSS] YUI Fonts CSS でフォントサイズを相対指定する

2014/09/262008/02/22 by Tenderfeel

デザイナーは絶対指定で（つまりｐｘ指定）自分が作ったラフ通りガッチガチに固定しろと主張する人がまだ多いと思うが、巷の流れに乗るなら相対指定にして然るべきという感じ。

しかし、いざ相対指定しようとしたら単位とか数値とかに迷ったりする。
emすら絶対指定だと切り捨てる厳しい人もいるらしいし、相対は継承されるから指定が難しい…
思ったサイズにならないこともしばしばある。
フォントサイズ固定してなきゃデザインが崩れる、なんてのもありがちで。

そこでこのブログのテーマVicunaでも使われてるYUI Fonts CSSの出番です。

続きを読む

[CSS]overflowとpositionを使うとスクロールできなくなる(IE)

2008/05/222008/02/20 by

外の要素にoverflow:autoなどを指定し、中の要素にposition:relativeを設定したとき、ＩＥではスクロールバーが出てもスクロールがされない。 IE6 bug with overflow and po … 続きを読む

[mootools]ボタンでスタイルシートを切り替える

2008/07/012008/02/15 by

mootoolsで最近ブログに多いスタイルシート切り替えのサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

スタイルの違うファイルを３種類用意し、それぞれボタンを押すと切り替わるようにするもの。
このサンプルは記憶させないので、ページを開くたびにシートがデフォルトに戻る。

続きを読む

0 00 00 00 0