CSS使えるならWord捨ててWriteboard使おうぜ！ - あと味
気軽なWikiって感覚でしか使ってなかったけど、使ってみたらいろんなことがわかってきた。Writeboardすげぇーーー！ Firefoxさえあれば、ぶっちゃけワープロソフトはWriteboardだけでいいんではないかと思うくらいに便利。 検索しても類似の例があまりなかったので、あと味推奨、Writeboardの使い方を紹介します。 Writeboardって？ => Writeboard WriteboardはRuby on Railsを作った、37signalsという会社が運営している無料サービスのひとつで、複数人で使う、Wikiとバージョン管理機能が合体したようなシンプルなサービス。 詳しくは以下を参照されたし。 => Skypeグループチャット＋Writeboardが最強な件 | IDEA*IDEA => 【コラム】クリエイターのためのライフハック (1) Wikiを活用してコラボラ
CSSのfont-family：ヒラギノとＭＳ Ｐゴシックとメイリオの悩ましい関係 : webデザイナーのナナメガキ
CSSでのfont-familyの指定がとても悩ましい。文字コードによって表示が変わったりするし、イレギュラーケースまで想定すると煩雑なコードになってしまう。ちょっと整理しながら考えてみる。 まず、font-familyを何も指定しないと、だいたいのブラウザではデフォルトで設定されているフォントで表示されるのだが、文字コードがUTF-8だとWindowsのIE6で英数文字が「Times New Roman」になってしまう。※文字コードがShift_JISやEUC-JPの場合はデフォルトのフォントで表示される。 それでは例えば総称ファミリー名（generic-family）である「sans-serif」のみ指定してみると、WindowsのIE6では文字コードがShift_JIS・EUC-JPの場合は「Lucida Sans Unicode」で、UFT-8の場合は「Arial」で表示されてしま
独学で極める “Webデザイン”の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
hail2u.net - Weblog - CSS2 Specificationでのプロパティの出現順序
少し前にCSSコーディング・スタイルというエントリで書いたように、各CSSルールのブロック内でプロパティを書く順序はCSS2 Specificationで出てくる順という縛りでCSSを書いている。大体のところはソラで覚えているのだけど、font-weightとfont-sizeはどっちが先だっけとかは忘れるので、備忘録がてら序列付きリストにしてみた。 margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left border border-top border-bottom border-right border-left border-width border-top-width border-right-widt
Internet Explorer (Windows) CSSバグリスト
ここにはWindows版Internet Explorer4.0以降（WinIE）のCSS/DOM実装バグの一覧があります。以下のリストからそれぞれのバグの詳細を見ることができます。 WinIEのCSS実装 WinIE6.0以降に「DOCTYPEスイッチ」が実装されています。DOCTYPE宣言により、W3Cが策定したCSS仕様に従う「標準モード」か、過去のUAに実装されていたCSS仕様に従う「互換モード」で解析・描画が行われます。 DOCTYPE宣言なし： 互換モード HTML3.2以前： 互換モード HTML4 Transtional/Frameset（システム識別子なし）： 互換モード HTML4 Transtional/Frameset（システム識別子あり）： 標準モード HTML4 Strict： 標準モード XHTML（XML宣言なし）： 標準モード XHTML（XML宣言あり）
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
スタイルシートを書く時のガイドライン - 2xup.org
2006-07-11T19:56:28+09:00 会社ではやっているのだけれど、自分のウェブサイトでもやってみよう。と簡略記述を利用する場合の値の順序やらもまとめとく必要があるのかもしれないけれど、セットフォーマットルールやプロパティの順番だけをサクッとまとめて資料にしてみました。課題は残したもののこれだけでも相当すっきり。詳細やセットフォーマットルールに関しては、ダウンロードできるようにしている資料を参考にしていただくとして、このエントリーではプロパティの順序についてまとめることに。自分自身が実際に作業を進めていくことを考慮し、その考えに基づいて設定したモデル別の順序は以下の通り。 生成 内容, 自動番号付け及びリスト (Generated content, Automatic numbering, and Lists) 利用者インターフェイス (User Interface) ビジュ
タグクラウドのCSSスタイルシートサンプル集:phpspot開発日誌
Tag Cloudのスタイル タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。タグクラウドのCSSスタイルシートサンプル集。 色んなタグクラウドのサンプルが公開されています。 タグクラウドはよく使う部分ですが、スタイルが結構ややこしかったりします。 秀逸なタグクラウドが殆どなので、応用できそうですね。
CSSで美しくデザインされたカレンダーのCSSサンプル:phpspot開発日誌
A CSS styled calendar | Veerle's blog Many times I’ve been asked how I created my calendar, or asked me if they could use the code etc. That’s why I thought it might be interesting to write an article on how to create such calendar. CSSで美しくデザインされたカレンダーのCSSサンプル。 CSSで次のように美しくスタイルされたCSSサンプルが公開されています。 カレンダーのデザインって微妙に難しいのですが、このデザインはシンプルだけど綺麗にまとまっていて美しいですね。 カレンダー部分のデザインの参考にできそう。 あと、こちらのサイトでは、いろんなサイトのデザイ
CSSでWindowsVista風のナビゲーションバーを作成するサンプル:phpspot開発日誌
CSS - Creating a vista style nav bar in css In today’s tutorial I want to show you what you can do with a minimal effort and a little imagination. What we are going to do is re-create the Vista toolbar in pure CSS with buttons and hover effect in cross-browser compatible CSS and HTML. CSSでWindowsVista風のナビゲーションバーを作成するサンプル。 画像とマークアップが公開されています。 実際に動作しているサンプルはこちら ファイルを一括ダウンロードすることも出来るようです。 Windows Vis
CSS Nite公式ブログ:アンケート集計：CSSに取り組む際に最初につまずいたところはどこですか?
CSS Nite in Nagoya 2007、CSS Nite in Osaka、CSS Nite Vol.18でアンケートにご協力いただいた中で「CSSに取り組む際に最初につまずいたところはどこですか?」という設問に対する回答をシェアします。 5月11日追記： 益子貴寛（サイバーガーデン）さんからコメントいただきました。 ざっくり見たところと、以下の3つ概念（考え方）レイアウト（特にfloat）ブラウザ互換が特につまずいた（つまずく）ポイントのようですね。 入れ子状のdivにつけるmargin・padding。 各ブラウザによるmargin・paddingの認識の違い。 複数ブラウザでの統一。 CSSの記述場所→勝手にヘッダー。 各ブラウザによる表示の崩れ。 class名、id名の管理。 勝手にclassを作る。 フロートの挙動の違い。 divの使い方。 IDとクラスの違い。 クラ
テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック:phpspot開発日誌
Create Resizable Images With CSS | Smiley Cat Web Design I'm a big fan of layouts that still work if a user increases their browser's text size. テキストサイズ変更に応じて画像のサイズを変えるCSSテクニック 方法１ 次のDIVがあったとして、 <div class="resize"></div> 次のＣＳＳを適用します。 .resize { background: url(image.jpg) -130px -140px no-repeat; border: 3px double #fff; float: left; height: 12em; margin: .2em 1em 1em 0; width: 12em; } すると、文字サイズを変更
CSSコーディングの際に役立つエキスパートによる７０の方法:phpspot開発日誌
70 Expert Ideas For Better CSS Coding | Smashing Magazine CSS isn’t always easy to deal with. Depending on your skills and your experience, CSS coding can sometimes become a nightmare, particularly if you aren’t sure which selectors are actually being applied to document elements. CSSコーディングの際に役立つエキスパートによる７０の方法。 最初にＣＳＳをリセットせよ、とか、デバッグ用 ( .floatLeft, .floatRight クラス等 )のクラスを定義しよう、といった有用なテクニックが７０も記述されて
印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]
約2ヶ月くらい前に、Printing the Web: Solutions and Techniques | Smashing Magazineというエントリーを読みました。10個以上の海外のサイトのいろんな印刷向けCSSやJavaScriptのTipsが紹介されていて、「印刷用CSSをまとめてみた。」を書いた自分としては何とか分解してやりたいなと思っていました。で、本日ようやく分解が一通り終わりましたので、その中で得たTipsを紹介します。 印刷用デザインも1つのWebデザインプロセスとして考えておく。 今回、このエントリーが最も自分にとっては衝撃的でした。印刷用CSSの機能面だけを追い求めて、「まあ、印刷されるときに、最低限読めればいいんでしょ？」くらいにしか思っていなかった自分が、ちょいと情けない。元ネタは、Five Simple Steps to Typesetting on th
![印刷用CSSをもっとよくするための4つのTips。 - TRANS [hatena]](https://cdn-ak-scissors.b.st-hatena.com/image/square/006177c1ae7d95a2c7c0336994db88ed59a41525/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F6435988827676522384%2F6435988827676523317%2F1448268251)
Dynamic Drive DHTML(dynamic html) & JavaScript code library
This innovative script uses CSS flexbox to create cards that when clicked on expands to show copious amount of information in a compact, manageable manner. Think of it as an expandable cards based layout. Ken Burns is a type of panning and zooming effect commonly used in video production to bring still images to life. This image slideshow adds an awesome Ken Burns effect to each image during trans
知っておいて損はないAJAXやCSSを駆使したタブインターフェース18種類 - GIGAZINE
技術的知識が無くてもタブを作れるフリーソフトからかなり派手な効果を伴うタブ作成ライブラリ、Yahoo！やGoogle、Adobeの作ったタブまで、いろいろと応用が利いて独自の特徴があるものをざっくりと18種類ほどピックアップしてみました。 いろいろなページやブログで頻繁に見かけるタブ方式のメニューですが、こうやって並べてみると実は見せ方も使い方も種々様々であることがよくわかります。 まずは知識不要でタブが簡単に作成できる「CSS Tab Designer」。Windows用のフリーソフトで、約60種類ものデザインが用意されています。その中にタブ方式のメニューもたくさん用意されており、ほかにも縦型のメニューやZDNet風メニューなども用意されています。 OverZone Software - CSS Tab Designer 細かいカスタマイズが可能なタブメニュー。画像を使ったサンプルも用意
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
知っておくといいかもしれないCSS、8つの小技 | IDEA*IDEA
ちょっと便利なCSS Tips いろいろ - DesignWalker
今押さえておくべきWeb制作に役立つ37個のブックマークまとめ*ホームページを作る人のネタ帳