自分のプロパティの書き順とか
サポートサイトのオープンのエントリーからまったく書いてないという現実。 いつまで新年の挨拶をしているのか。。。ブログ読んでます！って話を聞くと心が痛い今日この頃。 そして、PC漁ってたらとても懐かしいモノが出てきたので、記念上げ！ これは2006年頃に運営してた個人サイトなんで、デジパ入る前くらいのです。 CSSも覚え始めな感じが、infoの文言から伝わってきますね～。 IE7で崩れまくってるとか、もう笑うしかない（笑） ちなみに、デザインやイラストもボクですから！ こんなデザインだから鷹野さんに女性っぽい言われるんですね・・・ 何気に、このデザイン昔のエントリーでグローバルナビをサンプルに使ってたり。 さて、前置きはこのくらいで、主題に。 Twitterでブログのネタが無いってぼやいてたら、RedLine Magazineの中の人がプロパティ（宣言）の書く順番が気になるからそれネタにして
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
CSS - ルビ再び : 404 Blog Not Found
2008年07月15日17:15 カテゴリLightweight Languages CSS - ルビ再び 以前、 404 Blog Not Found:css - ルビもCSSで という記事を書いたのだが、Firefox 3でどうもきちんと表示されない。これは困った。どうしてもルビを使いたい記事があるのだ。 というわけで、今度は大本の記事をそのままコピペするのではなく、CSSをきちんと理解した上で書き直してみた。 その結果が、以下である。 ここのblog主は <ruby>小飼<rp(></rp><rt>こがい</rt><rp>)</rp></ruby> <ruby>弾<rp>(</rp><rt>だん</rt><rp>)</rp></ruby> といいます。 ここのblog主は 小飼(こがい) 弾(だん) といいます。 ruby { display:inline-table !import
モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！ -ちょっと詳しいモバイルサイトの作り方-
当ブログが携帯サイト作成法に関する記事をかいていることから、読者の方から、 『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』 っていう質問を最近良く受けます。 おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような 位置づけになってきているのでしょうか。 確かに、携帯サイトを作ってきている身としても、 モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。 ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。 ちなみに、左のスクリ
CSSであまり使われていないが使った方がいいフォント8選『8 fonts you probably don’t use in css, but should』 – creamu
DiaryTechnology CSSであまり使われていないが使った方がいいフォント8選『8 fonts you probably don’t use in css, but should』 CSSでフォント指定をちょっと凝ってみたい。 そんなあなたにおすすめなのが、『8 fonts you probably don’t use in css, but should』。CSSであまり使われていないが使った方がいいフォント8選だ。 以下にご紹介。 ・Palatino Linotype / Palatino（WINDOWS 97.09% / MAC 78.86%） ・Tahoma（WINDOWS 96.09% / MAC 72.02%） ・Impact（WINDOWS 95.85% / MAC 88.08%） ・Century Gothic（WINDOWS 85.44% / MAC 42.50
[CSS]気をつけたいIE 7のバグ -CSS-Discuss
CSS-Discussにアップされている「IE 7 Bugs」の意訳です。 省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意： バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。 公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグ フォントサイズの継承 IEの相対指定のフォントサイズの継承は、うまく機能しません。 相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。 例： body{ font-size: 100.01%; } ※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。 キーワード指定でのサイズ フォントサイズに「small
![[CSS]気をつけたいIE 7のバグ -CSS-Discuss](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
スタイルシートによる崩れない 2カラム 3カラム・レイアウト
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
WEBデザインに便利なリソース100:phpspot開発日誌
The Open Source Web Design Toolbox: 100 Tools, Resources, and Template Sources at DesignVitality WEBデザインに便利なリソース100リンクが紹介されていました。 フリーテンプレート OSWD OpenWebDesign Open Designs CSS Tinderbox デザインテンプレート TemplateNavigator TemplateBox Template Monster Art for the Web Free CSS Templates CSSレイアウト集 Layout Gala AndreasVilkund.com CSS Template Directory BenMeadowcroft.com Mollio CSS自動ツール、ジェネレーター CSS Creator -
CSSでロールオーバーもどき
CSSでロールオーバーもどき ロールオーバーの際に画像の輝度を上げるやり方がありますけど、CSSで簡単にできます。 XHTMLソース <a href="http://blog.webcreativepark.net"><img src="./tor.gif" alt="to-R"/></a> CSSソース a:hover img{ opacity:0.8; filter: alpha(opacity=80); } サンプル ロールオーバー時にimg要素のopacityプロパティを使い不透明度を下げます。 IEはopacityプロパティに対応していない為、filterを使い不透明度を下げます。 簡単なんで、忙しいときに重宝します。 関連エントリー CSSで実現するスマートなロールオーバー 画像置換 cssで画像をプリロードする方法（改 一番簡単な画像置換の方法 画像置換でメニューを作る 画像
test everything ― 100 tools in one!
This page is generated by Plesk, the leading hosting automation software. You see this page because there is no Web site at this address. You can do the following: Create domains and set up Web hosting using Plesk. Plesk is a hosting control panel with simple and secure web server and website management tools. It was specially designed to help IT specialists manage web, DNS, mail and other service
vertical-alignの使い方【css tips】[to-R]
vertical-alignの使い方【css tips】 vertical-alignは正しく理解していないと使いにくいプロパティである。 特にtableレイアウトからcssレイアウトに移行する際に混乱が発生しがちだ。 テーブルレイアウトでよく使う以下のようなコードがある。 <table width="200" height="200" bgcolor="#39FF6B"> <tr> <td valign="middle" align="center">中央に表示したい文字</td> <tr> </table> サンプル このコードをcssレイアウトに変更する際に HTMLを <div> <p>中央に表示したい文字</p> </div> CSSを div{ width:200px; height:200px; background:#39FF6B; text-align:center; v
Collection & Copy - 上下左右中央の件、改善、補足
Collection & Copy - 上下左右の中央にボックスを配置する id:inception9さんから、より簡単な方法をコメントで教えて頂きました！ありがとうございます。 これだ！これが正解だから、前回のが「バッドノウハウ(?)」なんですね。余分な空間用divもなくなり、ほんますっきりやわぁ。 ただ、どうも前回の元記事は「画面をコンテンツのボックスより小さくしても、ボックスの左上が欠けない」というところがポイントだったようです。たしかにウィンドウサイズを小さくすると、左上隅にボックスがきっちり収まります。ここにこだわらない場合は、短縮版がよさそうですね。 HTML、CSS、共に勉強不足ですので、直接指摘頂けるのは大変助かります。コメントを書く時間を頂けたことを、感謝しております。ではでは。 雑記軽い気持ちでHTML/CSSのことを書くと、なぜか反響が大きく、戸惑う。なんとなくプロ
!important だらけの CSS にお別れを
CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができ... CSS を記述するときに記述したスタイルの適用優先順位を理解していないと思ったようにスタイルが適用されなかったり、後からメンテナンスするときに効率的な作業ができなかったりと、思わぬところで無駄な時間をとられたりします。 で、結果として !important 宣言を連発、気が付いたら CSS が !important 宣言だらけになるなんてオチが待ってたりするわけですが、そうならないためにも CSS が適用される際の優先順位について簡単におさらいをしてみたいと思います。 CSS は、「Cascading Style Sheets」 という名前の通り、「Cascading」 されて （段階的に） 適用されます。よって、簡単に言っ
CSS のコメントの書き方コレアレ
CSSもHTMLと同じように、ソース中にコメントを挿入することができます。 /*と*/で囲った文字列がコメントになりますが、入れ子にすることはできません。また、他のプログラムにあるような「#」や「//」といった単一行コメントはありません。 適切なコメントを挿入することで、複数人での作業するときや、時間がたってから編集するときなどにコードの見通しが良くなります。ブラウザ間の差異を埋めるための宣言やハックなんかも、適用させるブラウザ名や理由などをきちんとコメントで書いておきたいですね。 僕は、スタイルをグループに分けて記述するときなど、コメントを目立たせるために次のように記述しています。 /* ------------------------------ Header ------------------------------ */ div#header { } . . /* -------
CSSで垂直中央を実装する【css tips】
CSSで垂直中央を実装する【css tips】 vertical-alignの使い方の続きです。 vertical-align:middleでの垂直表示は説明しましたが、あの方法ですと2行以上の場合は利用できないです。 2行以上の場合に垂直中央表示をするにはpositionプロパティを利用します。 (X)HTMLソース <div> <p>中央に表示<br />したい文字</p> </div> CSSソース div{ width:200px; height:200px; background:#39FF6B; position:relative; } p{ position:absolute; top:50%; left:50%; margin-left:-2.5em; margin-top:-1em; } サンプル positionを使いp要素の開始位置を中央に設定します。 その後にmar
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクロールすると変化しながらついてくる画像 | SIMPLE*SIMPLE
http://youmos.com/news/iefixed_htc
Amazon.co.jp： 世界の「最先端」事例に学ぶCSSプロフェッショナル・スタイル: 本: 大藤 幹
有料ソフトとデザイン作業を無力化させる30のブックマークまとめ*ホームページを作る人のネタ帳
