mippe | Shared With: Everyone - 14 days ago | CSSQuoted: コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ウィンドウを下方に広げても、フッタは常に下部に張り付いたままで、逆にウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。
- mippe | Shared With: Everyone - 23 days ago | Firefox, css
先日リリースされたFirefox 3.0は順調にダウンロード数を伸ばしているようだ。執筆現在で2,600万ダウンロードに達しようとしており、Net Applicationsの報告によれば24日の時点ですでに世界で3%をこえるシェアを獲得している。Firefoxの採用率が高いヨーロッパでは5%をこえている。今後も順次シェアを伸ばし、主要ブラウザとしての位置を獲得することになりそうだ。
Firefox 3.0ではCSS 2.0および2.1がサポートされているほか、現在策定が進められているCSS3の機能も一部対応している。Firefox 3で導入されたCSSの新機能や改善点はCSS improvements in Firefox 3にまとまっているが、David Baron氏がまとめたSome new CSS features in Firefox 3がサンプルも含めてよくまとまっているので紹介しておきたい。
David Baron氏はMozillaでFirefoxの開発に関与しているデベロッパ。W3CのCSSワーキンググループで作業するなど、FirefoxとCSSに関して知識が深い。同氏がSome new CSS features in Firefox 3で特に紹介しているCSSの新機能は次のとおり。
inline-blockおよびinline-table
font-size-adjust
rgba()およびhsla()カラー
width、min-width、max-widthで指定できる新しい値 -moz-max-content、-moz-min-content、-moz-fit-content、-moz-available
white-space: pre-wrap
inline-blockおよびinline-tableは将来的にクロスブラウザ向けのWebサイトを作成する際に多様されることになる便利な機能として使われることになりそうだ。font-size-adjustは日本語にはほとんど関係がない。英語のように大文字と小文字が混在する言語でフォントサイズの調整をするために活用できる。Firefox 3.0 rgba()の使用例その1 - Some new CSS features in Firefox 3より抜粋
Firefox 3.0 rgba()の使用例その2 - Some new CSS features in Firefox 3より抜粋rgba()およびhsla()はCSS3で導入される機能。従来はopacity: 0.5のように指定していたものをrgba(0, 255, 0, 0.5)のようにRed-Green-Blue-AlphaやHue-Saturation-Lightness-Alphaで指定できる。これまでよりも豊かなカラー表現がまとめて指定できるようになる。Some new CSS features in Firefox 3はサンプルと説明の双方が簡潔にまとまっている。Firefox 3.0で新しく対応されたCSS機能の概要を知る上で有益なドキュメントだ。WebデザイナやWebデベロッパは一読しておきたい。
- mippe | Shared With: Everyone - 25 days ago | javascript, css, flash
Quoted: 売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ
- mippe | Shared With: Everyone - 25 days ago | javascript, css, design
動作環境は以下のとおり
・Internet Explorer 6 & 7
・Firefox 2.0
・Safari 2.0
・Opera 9.0導入は比較的簡単です。
ダウンロードしたファイルのうち、index.htmlを開いてみるとわかると思います。<link rel="stylesheet" href="bubbles.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/JavaScript" src="rounded_corners.inc.js"></script>
<script type="text/JavaScript">
window.onload = function() {
settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: true
}
var myBoxObject = new curvyCorners(settings, "rounded");
myBoxObject.applyCornersToAll();
}
</script>呼び出しはこれ。
これを<head>～</head>の中にいれる。後は表示したい部分で呼び出せばOK。
灰色背景の場合
<div class="bubble">
<blockquote>
<p>Works great for blog comments!</p>
</blockquote>
<cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite>
</div>バック灰色、淵が白の場合
<div class="bubble">
<div class="rounded">
<blockquote>
<p>Customize colors and styling to your taste from within the CSS, then simply edit the pointer tip image. Works on any background to fit with your design.</p>
</blockquote>
</div>
<cite class="rounded"><strong>Rounded Bubble</strong> using <a href="http://www.curvycorners.net/">curvy corners</a></cite>
</div>バック黒、淵白の場合
<div id="pimped" class="bubble">
<div class="rounded">
<blockquote>
<p>Expands to fit any layout and scales nicely with big and small font sizes.</p>
</blockquote>
</div>
<cite class="rounded"><strong>Dark Bubble</strong></cite>
</div>お試しあれ。
http://www.willmayo.com/2007/02/10/css-speech-bubbles/ - mippe | Shared With: Everyone - 25 days ago | CSS
word-break
normal:半角英数字のみ単語の切れ目で改行する
break-all:半角英数字、日本語共に単語の途中でも改行する
keep-all:半角英数字、日本語共に単語の切れ目で改行する - mippe | Shared With: Everyone - 25 days ago | CSS, Javascript, IE6, behavior
InternetExplorer 6.xでmin-width、max-heightをCSSプロパティで指定しても適用されません。過去に紹介したCSSとJavaScriptを利用して対応する方法を、今回はさらに使いやすい方法に変更してみます。
スタイルシートのセレクタでBehaviorプロパティ指定するだけで有効になります。min-width等のプロパティを変更する必要はありません。Behavior（ビヘイビア）とは、JavaScript等によって構成されるHTC（HTML Component）を使用するIE独自の機能です。
CSSへBehaviorプロパティの追加
ieFixed HTCの最新版をダウンロードします。下記のコードのようにCSSへBehaviorプロパティの追加してください。また、ご利用の環境に合わせてURLパスは変更してください。<style type="text/css">
#sample{
behavior:url(iefixed.htc);
margin:0 auto;
min-width:400px;
max-width:760px;
}
</style>
min-heigh、max-heightも同様に利用することが出来ます。サイズ指定には必ずpx単位で指定してください。HTCファイル内のJavaScriptではstyle.setExpressionを利用して、widthプロパティにexpressionを設定しています。IE7が主流になった場合に簡単に削除できる方法なので、是非試してみてください。
- mippe | Shared With: Everyone - Jun 16 2008 | CSS, Flash, Adobe
Dreamweaver 大喜利 10名の勇士による華麗なる実践Tips紹介
イベントの目玉企画である大喜利です。第一線で活躍しているクリエイター10名が、10分という限られた時間の中で、Dreamweaver の技術を披露しました。ドドン！と和太鼓が響きわたり、大喜利の開始です。人前で話し慣れている勇士たちも緊張しているようでした。また来場者も、10分間で最後まで聞けるのかと手に汗にぎり、和太鼓が鳴り響く度に会場全体が一つになっていきます。
なお、大喜利に参加した勇士たちは、Dreamweaver CS3 10周年記念イベントWebサイトで詳しくご紹介しています。また、勇士たちが披露したTipsの完全版は、Adobe Developer Connectionにて順次公開されますので、じっくりとご覧ください。 - mippe | Shared With: Everyone - Jun 12 2008 | CSS
一枚の画像とCSSでフォームボタンをWiiブラウザのボタンっぽくする方法。
IE6, IE5.5, IE7, Safari 2, Firefox 2, Opera 9に対応していて、タグもシンプル。
画像とCSSをダウンロード
画像をアップロードして、round-button.cssのbackground:url(btn0.png) 100% 0 no-repeat;部分を自サイト用に変更。現在使用しているCSSにコピペするか、round-button.cssをアップロードして、ヘッダー内にリンクを貼る。
formのinputボタンを以下に書き換え <span class="button"><button type="submit - mippe | Shared With: Everyone - Jun 12 2008 | CSS
インラインフレームの枠をCSSだけで非表示にしても、IEでは枠が表示される。消すにはHTMLのiframeに「frameborder="0"」を設定すればいい。
mippe | Shared With: Everyone - Jun 12 2008 | web design, CSSインラインフレームで別のページを表示するとき、明らかに表示スペースより小さい別ページなのに横スクロールバーが表示される。横スクロールバーを強引に消すには、CSSでhtml要素に"overflow-x: hidden;"とする。これを解決するのに2人がかりでかれこれ1時間くらい費やした。
Related Content from Around Faves
css
-
1 FaverViewed: 17 TimesQuoted: Tooltips provide another method of website branding. Why throw a vanilla tooltip to the user when you can brand your website? MooTools 1.2 provides a Tips plugin that allows for easy-to-customize tooltips. Let me show you how to create a sweet, branded tooltip
- mippe - Jun 12 20081 FaverViewed: 11 Times
- Claire16 - Aug 23 200610 FaversViewed: 52 Times
