CSSで犯しがちな5つの誤ち | エンタープライズ | マイコミジャーナル
Nicole Sullivan, a web developer living in California. Webページのパフォーマンスを向上させる方法のひとつに、CSSファイルを最適化するというものがある。CSSはプログレッシブレンダリングをブロックする効果があるため、最適化しないでおくとページのレンダリング時間に影響を与える。Stubbornella ≫ Blog Archive ≫ Top 5 Mistakes of Massive CSSにAlexa Top 1000サイトを調査した結果が掲載されている。CSSに関して使うべきだが使われていないCSSテクニックがあり、その上位5が紹介されている。紹介されているテクニックは次のとおり。 42%がCSSをGZIP圧縮で提供していない。 44%が2つをこえるのCSS外部ファイルを使っている。 56%がCSSをクッキーとともに提供している
:visited の挙動が変更に。制作への影響は？ | Web標準Blog | ミツエーリンクス
次期バージョンのFirefoxのプレビュー版 “Mozilla Developer Preview” ですが、新しいアルファ版が公開されました (プレビュー版ですので、常用のものではありません)。 このアルファ版には、先日より各所で取り上げられている、CSSの:visited擬似クラスに関する大きな修正が現在Firefoxで行われています。詳しくは、次のページをお読みください。 CSS によるブラウザ履歴の漏えいを防ぐ取り組み (原文: “Plugging the CSS History Leak”) CSS の :visited に行われるプライバシー対策 (原文: “privacy-related changes coming to CSS :visited”) (二つ目の記事について、翻訳をMozilla Developers Streetに寄稿させていただきました。) :visit
CSSで検索フォームをカスタマイズ « vanillate
blogや、ウェブページのデザインでの検索フォーム。ここのデザインをばっちりあなたの思い通りにデザインできたら、一気にクオリティが上がるようなきがしませんか？今日はCSSで比較的簡単に検索フォームをおしゃれに変身させてしまいましょう。 HTMLコード <form id="t_searchform" method="get" action="url"> <input type="text" name="s" id="s" size="15" /> <input type="image" id="go" src="./images/vani_12.jpg" width="26" height="30" value="search" /> </form> CSSコード #t_searchform{ background: url(images/vani_11.jpg) no-repeat top
【CSS】CSSで実装するちょっと凝ったパンくずリスト | バシャログ。
地味なパーツながら実は便利。そのためコーディングをする機会も多いと思われるのが「パンくずリスト」です。 シンプルなコーディングでちょっと気の利いた「パンくずリスト」を実現する方法をご紹介します。 パンくずリストの XHTML のサンプルは以下です。とてもシンプルです。 <ol id="topicPath"> <li class="home"><a href="hoge">ホーム</a></li> <li><a href="hoge">アニメ</a></li> <li><a href="hoge">ガンバの冒険</a></li> <li><em>ボーボ</em></li> </ol> サンプル1 とてもシンプルなパンくずリスト とてもシンプルなパンくずリストのサンプルです。 ホーム アニメ ガンバの冒険 ボーボ CSS はこちら ol#topicPath { margin: 20px 0;
ブラウザ間の問題をjavascriptで回避する8つのTips「8 Javascript solutions to common CSS problems」
TOP > WebDesign > ブラウザ間の問題をjavascriptで回避する8つのTips「8 Javascript solutions to common CSS problems」 WEBデザイナーやWEB開発者なら一度は苦悩するブラウザの違いによるレイアウトの問題や形式の問題。業務の上で一つの障壁ともなり得ない問題です。今日紹介するのはそんなブラウザ間の表示に対しての問題を解決してくれるjavascriptを集めたエントリー「8 Javascript solutions to common CSS problems」を紹介したいと思います。 透過pngによる背景の問題だったり、カラム間の高さの問題などなど、レイアウトに関して起こりうる問題を簡単なjavascriptで回避する方法を示しています。今日はその中からいくつかピックアップして紹介したいと思います。 詳しくは以
CSS使えるならWord捨ててWriteboard使おうぜ！ - あと味
気軽なWikiって感覚でしか使ってなかったけど、使ってみたらいろんなことがわかってきた。Writeboardすげぇーーー！ Firefoxさえあれば、ぶっちゃけワープロソフトはWriteboardだけでいいんではないかと思うくらいに便利。 検索しても類似の例があまりなかったので、あと味推奨、Writeboardの使い方を紹介します。 Writeboardって？ => Writeboard WriteboardはRuby on Railsを作った、37signalsという会社が運営している無料サービスのひとつで、複数人で使う、Wikiとバージョン管理機能が合体したようなシンプルなサービス。 詳しくは以下を参照されたし。 => Skypeグループチャット＋Writeboardが最強な件 | IDEA*IDEA => 【コラム】クリエイターのためのライフハック (1) Wikiを活用してコラボラ
[CSS]簡単にエラスティックや高さの揃ったカラムが実装できるスタイルシートのフレームワーク -Elastic css
Elastic cssは、印刷対応も考慮した、エラスティックレイアウトや高さの揃ったカラムが実装できるスタイルシートのフレームワークです。 Elastic css エラスティックレイアウトの実装例 レイアウトのカラム数はデフォルトで４カラムまで対応しており、それぞれのカラムに固定・可変とスタイルシートで指定ができます。 固定するカラムの幅は、インラインで指定します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="unit two-columns"> <div class="fixed-left-column" style="width:250px;">first column content</div> <div class="elastic-column">second column content<
CSSテンプレート配布サイト色々まとめ:phpspot開発日誌
CSS Tools: Free Templates CSSテンプレート配布を行っているサイトが色々紹介されていました。 総数でいうと8000近くのテンプレートがあります。 FreeCSStemplates.org 332のクールテンプレート Free-CSS-Templates.com 219のフリーテンプレート FreeWebTemplates.com 4200のフリーテンプレート FreeCssTemlates.com 36色のテンプレート CSScreme.com いくつかのフリーのクオリティの高いテンプレート TemplateWorld.com XHTML/CSSのクールテンプレート DreamTemplate.com 3000以上のテンプレート これだけあると迷ってしまって、その時間の方が心配になってしまいますね。 関連エントリ デザインされたフリーのCSSテンプレート集 フリー
モダンCSSにおける黄金比とは？ | CREAMU
CSSでのレイアウトに黄金比を取り入れたい。 そんなときに参考になるのが、『Golden Ratio in modern CSS』。モダンCSSにおける黄金比だ。 このエントリーでは、960pxのdivがある場合、960 / 1.62 = 593px が左カラム、960 – 593 = 367pxが右カラムになるといったように、黄金比を取り入れたレイアウトの方法が解説されている。 その他にも、 line-height = font-size x 1.62 paragraph margin = paragraph line-height x 1.62 / 2 といったような設計の例が紹介されている。 結論としては、 Many people will argue, that this technic is an utopia and we cannot spend time coding ne
CSSとjQueryを使ってマウスオーバー時にポップアップ表示にするTooltips | CSS Lecture
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[使えるCSSテクニックVol.2] CSSで実現するエラスティックレイアウト | バシャログ。
前回ご好評をいただいた「使えるCSSテクニック」ですが、 今回は「使えるCSSテクニック Vol.2」として弊社デザイナーから前回同様、WEB制作で使えるCSSテクニックをご紹介していきます。 第1回は、エラスティックレイアウトについてです。 WEBサイトレイアウトでは以下のレイアウトが基本となっています。 固定（ソリッド）レイアウト 名前のとおり、横幅固定のレイアウトです。特に説明する必要もありませんね。 可変（リキッド）レイアウト ブラウザのウィンドウサイズに合わせて、伸縮するレイアウト手法です。エラスティックレイアウトも、可変レイアウトの一種になります。 前置きはこの辺で。 エラスティックレイアウトについて エラスティック【 elastic 】には、ゴムひも・しなやかな・伸び縮みするという意味があります。 ここで言うエラスティックは「伸び縮みする」という表現が一番近く、文字サイズの変
![[使えるCSSテクニックVol.2] CSSで実現するエラスティックレイアウト | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/1f4390ea5b2b558adfd9c349b9a080aae407daff/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fshared%2Fpublic%2Fimg%2Fcommon%2Ficon_ogp02.png)
brタグ、pタグやtableタグが非推奨にならない理由
> HTMLで最低限の外見制御 まだちょっと主従関係について混乱されているようです。 HTMLの要素がデザインに影響する機能を持っているのではなく、 それが何であるかを示すためにマークアップをすると 結果として（視覚化するブラウザでは）表示に影響が出るのです。 ページを表示する≒(X)HTML文章を伝達する、ために存在するブラウザが 段落だから行間を空けてやろうとか 表だから縦横に並べてやろうとか それなりの視覚化を行っているだけです。 行間がどうなるとか外見の制御を念頭においてを考えるのではなく 本質的にそれが「何」であるかをマークアップするのが文章の論理構造を記述するという事です。 一般的に外見から考えたほうが理解しやすいので 縦横に並べたいと思えばそれは恐らくリストや表だし、 一行空けたいと思えばたぶん段落の切れ目ですが 理念は逆ですのでお間違えのなきように。
MOONGIFT: » 複雑な段組みを可能にするCSSフレームワーク「Emastic」:オープンソースを毎日紹介
雑誌や新聞などでは複雑な段組みを行って、情報を見やすくしている。ネット媒体の場合、あまりそうした点は考慮されず、二段または三段のカラムで構成されることが多い。しかも幾つかのカラムはメニューなどに使うので、文章自体は殆ど組版が施されていない。 CSSだけとは思えないほど細かく制御されている Webはそういった媒体ではない、と言い切ってしまえばそれまでだろう。だが今後情報の電子化は進み、紙媒体は現状維持ないし衰退していくのは間違いない。そうした時に、Webもやはり読ませる形式を求められるようになるのではないだろうか。それを実現するのがこれだ。 今回紹介するオープンソース・ソフトウェアはEmastic、複雑なカラム構成を実現するCSSフレームワークだ。 Emasticはまるで雑誌のような段組みをCSSで実現している。二段、三段、四段の表示を行い、固定幅または表示サイズに合わせて変化とを組み合わせ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IBM Developer
http://japan.internet.com/busnews/20081007/8.html
CSS 3のMulti Columnによる段組