ホーム ブログ CSS
2011年12月 6日
先日の「CSS Nite redux, Vol.5 powered by デジタルハリウッド福岡校 」で鷹野さんに教えていただいたAdobe Fireworks CSS3 Mobile Pack を使ってみた。
fireworks_css3mobile_p1_100311.zxpをクリックしてExtension Managerにインストールする。
Fireworksで簡単なボタンを作ってみる
こんな感じ。とりあえず角丸とグラデーション
プロパティ
ウィンドウ>エクステンション>CSS propertiesを選択してCSS propertiesパネルを表示する。
ボタンを選択した状態で更新ボタンをクリック。
出力されたコード。
background-color:#3ab7f5;
/* Firefox v3.6+ */
background-image:
-moz-linear-gradient(20% 0% -90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
/* safari v4.0+ and by Chrome v3.0+ */
background-image:
-webkit-gradient(linear,
20% 0%,
20% 75%,
color-stop(0, rgb(58,183,245)),
color-stop(1, rgb(51,153,204)));
/* Chrome v10.0+ and by safari nightly build*/
background-image:
-webkit-linear-gradient(-90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
/* Opera v11.10+ */
background-image:
-o-linear-gradient(-90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
background-image:
linear-gradient(-90deg,
rgb(58,183,245) 0%,
rgb(51,153,204) 100%);
width:120px;
height:60px;
/* Firefox v1.0+ */
-moz-border-radius:5px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:5px;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+ and by IE v9.0+ */
border-radius:5px;
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr = #ff3ab7f5,endColorstr = #ff3399cc,GradientType = 0);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr = #ff3ab7f5,endColorstr = #ff3399cc,GradientType = 0)";あとはクラスなんかを付けてブラウザで確認。CSS3のボタンが出来上がり！
参考にした記事：Fireworks CSS3 Mobile Packを使ってみよう
Posted
@Style
15:45
2011年4月 1日
MovableType 5.0 テーマ 1070 と1071 のサイドバーにはCSS3のRGBaプロパティとborder-radiusプロパティを使用しています。
div#sub dl dt {
font-size: 100%;
font-weight: bold;
color: #333333;
background-color: rgba(255,255,255,0.5);
padding: 15px 20px 15px 15px;
border-radius: 10px 0px 0px 10px;
-moz-border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px 0px 0px 10px;
}
/* IE8 and below */
div#sub dl dt {
background-color: #f6f6f6\9;
padding: 15px 20px 15px 15px\9;
}概要
白を50%透過の背景色、左上下10pxの角丸
-moz-border-radiusはFirefox 3.6以下用。※Firefox 4ではborder-radiusのプレフィックス（-moz-）は不要
ハックによりIE8以下では#f6f6f6の背景色
Posted
@Style
16:09
2009年2月23日
CSS Validation Service のチェックが少し厳しくなっていた。
In (x)HTML+CSS, floated elements need to have a width declared. Only elements with an intrinsic width (html, img, input, textarea, select, or object) are not affected
たとえばMovable Typeのデフォルトテンプレートでは、画像を左右に配置する際のmt-image-leftやmt-image-rightなどのクラスにfloatが使われている。以下のような対応を行う。
デフォルト
.mt-image-left {
float: left;
margin: 0 20px 20px 0;
}追加
img .mt-image-left {
margin: 0 20px 20px 0;
float: left;
}また、幅が確定できないものにはwidth:auto;でOK！
Posted
@Style
12:58
2007年4月19日
RSSリーダーを使わずFirefoxの拡張機能であるSage 1.3.10 を利用してフィードを読んでいる。OPML のインポート・エクスポートも可能なので重宝するのだが、長文の場合に段組では読みにくい。
以前からスタイルシートをカスタマイズして文字を大きくしていたのだが、今日は中途半端に時間が余ったので、ちょこっといじってみた。今日のカスタマイズはblockquoteとpre
読みやすい！
参考になるリソース
Posted
@Style
00:27
2007年2月23日
MovableTypeのコメントフォーム周りをちょこっとカスタマイズ。
stylesheet.tmplを編集することによってlabel要素とinput要素を行儀良く横並びにしてみる。
individual_entry_archive.tmplのlabel要素とinput要素の関係は以下の様になっている。
<p>
<label for="comment-author"><MT_TRANS phrase="Name">:</label>
<input id="comment-author" name="author" size="30" />
</p>デフォルトのスタイルシートではlabel要素をブロックに変更してある。ソースに改行は入っていないが、上下に表示されているのでstylesheet.tmplの以下の部分を削除する
.comments-open label { display: block; }label {
margin-bottom: 0.5em;
width: 10em;
float: left;
clear: both;
white-space: nowrap;
}デフォルトテンプレートでの表示
fieldsetを追加するとなお良し
Posted
@Style
02:58
2006年12月19日
CSS Validator が新しくなっていた！
CSS Validator とは「W3C CSS 検査サービスについて 」より
W3C CSS 検査サービスは、W3Cによって作られたフリーソフトウェアで、ウェブデザイナーやウェブ開発者が CSS (Cascading Style Sheets; カスケーディング・スタイルシート) をチェックするのに使うことができます。このサービスは、ウェブ上のフリーサービスを通じて使ったり、ダウンロードして Java プログラムとして実行したりウェブサーバー上で Java サーブレットとして使ったりできます。
W3C CSS 検査サービスについて
クライアント様のサイト構築中に「CSS Validatorの表示が変だな？」と思っていたんですが、先程、リニューアルが完了したみたいです。
リニューアルでチェックが甘くなっているようです。
昨年の秋に変更があった際、文字色と背景色を共に指定してない場合には警告が出るようになりましたが、今回のリニューアルでは元に戻されています。
transparentや背景色を上手に使えばよいのかもしれませんが、アクセシビリティを考えると警告してくれたほうが良かったのかもしれません...
Posted
@Style
01:37
2006年7月15日
CSS実装徹底検証! そこが知りたいInternet Explorer 7
使用するサンプルソースはXHTML1.0 Strictで記述し、基本的にStandard(標準準拠)モードで表示する。IE7 beta2においても、Quirks(下位互換)モードで表示すると古いバージョンと同じ表示になってしまうため、注意が必要だ。また、特に断りのない限り、「Internet Explorer」は「IE」、「Internet Explorer 6」は「IE6」、「Internet Explorer 7 beta2」は「IE7 beta2」と略している。
CSS実装徹底検証! そこが知りたいInternet Explorer 7
かなり詳細までInternet Explorer 7に於けるCSS実装を検証している記事だ。
やはりInternet Explorer 7でもapplication/xhtml+xmlをサポートしないのだろうか。
いつになったら正式にXHTML 1.1を利用できるのか？CSS以前の問題では...
Posted
@Style
00:42
2006年1月22日
なぜ、私の手元にあるかというと・・・
（Web標準に興味がある方には、おおよその見当が付くと思いますが、）今日、ある企業の社長とお会いした。
私のサイトもご覧になっていたようで、恥ずかしい限りですが、Web2.0のことから経営やマネジメント・Blogの書き方まで、普段はとても聞けないだろうと思われるような貴重なお話。
いつも拝見しているBlogで想像していた通りの、とても気さくで、気取らない方でした。
ありがとうございました。
Posted
@Style
23:25
2005年12月31日
もうける.net Vol.1（毎日コミニュケーションズ）に、アットスタイルが制作した【真宗 紫雲山 正覚寺 】を「CSSを使用したサイト」として紹介記事が掲載されました。
11月、雑誌社より掲載の依頼があり、副住職様より掲載の許可をいただきました。
デザインだけでなく機能の向上にも役立つCSS
福岡県大牟田市にあるお寺「正覚寺」のサイトでは、CSSで細かく文字間のバランスを指定し、見やすさ、読みやすさを考慮して作成されています。ブラウザで文字の大きさを指定してもレイアウトが崩れませんので、是非試してみてください。
デザイン性の向上、管理のしやすさに加え、CSSを使用するメリットとしてもうひとつ、アクセシビリティというものがあります。アクセシビリティとは、「Webサイトの利用のしやすさ」という意味に加え、「障害を持つ人にとっての、Webサイトの利用しやすさ」という意味も含まれます。HTMLからデザインのためのコードを省くことができるため、目の見えない方が使用する音声読み上げブラウザの認識率の向上にも、CSSが役に立つことを覚えておきましょう。
Posted
@Style
17:07
2005年10月14日
IEBlogより：お使いのCSSハックを一掃してください | Web標準Blog
IEBlog は本日付で開発者に対し、IE7のStrict（厳格）モードにおいて機能しなくなるCSSハックの数々を「一掃する」呼びかけ を掲載しました。
久しぶりにcss-discussを見に行ってみると・・・
This hack is DEPRECATED and should not be used due to the imminent release of IE 7. See [the official IE blog ] for details.
ページ幅を固定していた頃のスタイルシートはMovableTypeのbase-weblog.cssにも使用されているStarHtmlHack等色々なCSSハックを使用していましたが、現在のリキッドレイアウトでは、CSSハックは不要となり削除しました。
XHTMLコードもdivの多用を避け、シンプルに！
Posted
@Style
10:34
![[外部へのリンク]](http://atstyle.biz/webimg/link.gif){kind=small}
