CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め
CSS、スタイルシート。初心者のころには CSS のスタイルがうまくいかなくて、半日や丸一日悩んだこともいっぱいありました。最近では、やっとひと通り覚えて、思うようにできるようになったかなーという感じです。今回は初心者だったころ、ちょっと悩んだことなどをいくつかまとめてみました。 Webサイトの見た目をデザインしていくのに欠かせない CSS。度々これってどうやるんだろうとか、どうしてこうなっちゃうの？というものに遭遇します。また、今までは IE6 をターゲットに含めてましたけど、そろそろ IE7 からをターゲットにすればいいのかなーと思うこともあって、過去のスタイルシートの書き方の習慣を変えようかなとも思っています。 スタイルシートを書いていて、今まで遭遇した不具合やその回避方法、また今まではこうしてたけど、これからは変わるかもしれないなーといものをまとめてみました。もうそんなことしてない
スマホ最適化でやったこと
※Androidでアクセスされた方は使用感をいただけると幸いです。 （サイトトップ） 先日簡単なエントリで書いてますが、今まではてなダイアリーにエントリを書いてまして、やはりデザインの限界などがありWordPressに移行しました。 同時に、基本的なスマホ最適化もおこなっています。 ようやく自分のサイトでスマホ最適化ができたので…ということでのエントリです。 ちなみに、このサイト自体はまだまだ作りかけでして… そもそもサイトの構成がちゃんと考えられておらず、かなりいろいろ行き届いてないサイトです（笑） （IE系ではちゃんと表示されません…そのうち手入れします。すみません） どちらかというと、スマホ最適化でのユーザーインターフェースに重きを置いてのエントリとなります。 では、以下にスマホ最適化でおこなったことをまとめてみました。 （ちなみに対象としているスマートフォンはiOSデバイス（iPh
基礎から理解するためのCSS3に関するサイトのまとめ｜Webpark
CSS3はIEが対応できていないこともあって、今まであまり紹介してませんでしたが、使いこなせると面白そうなのでまとめてみました。 CSS3リファレンス 有名なサイトですね。CSS3に限らず、HTMLやJavaScriptなど膨大な情報量です。 CSS-EBLOG 各ブラウザで先行実装しているCSSプロパティがまとめられています。 CSS3 Files 【2010.4.25 追加】海外サイトですが非常に見やすいです。各ブラウザの対応状況の載っていて重宝します。 次にブラウザごとの対応状況を確認するサイトを紹介。 HTML5 & CSS3 READINESS HTML5とCSS3のブラウザごとの適応状況を視覚的に見ることができます。2008年からの年別でも見ることができます。 HTML5 & CSS3 Support こちらもブラウザごとの対応状況がまとめられています。CSS3はプロパティ、セ
ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０:phpspot開発日誌
20 Beautiful Free XHTML/CSS Templates | Creativeoverflow ほんとにフリー？というクオリティのXHTML/CSSテンプレート２０が、websitetemplatesonline.com から紹介されています。 Photoshopテンプレートではなく、既にHTMLの形になっているので便利です。 Photoshopのファイルは含まれないようなので、この点は注意したほうがいいかもしれません。 全部見る 関連エントリ シンプルだけど使いやすそうなフリーのXHTML/CSSテンプレート集「Mantis-a templates」 ハイクオリティでフリーなXHTMLテンプレート61 クールなデザイン満載のXHTML/CSSテンプレート４０種 プロレベルでハイクオリティなXHTML/CSSテンプレート集
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
IE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」
TOP > WebDesign > IE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」 WEBサイト構築においてもはや常識となったCSS。新たな仕様のCSS3が整備されつつあり、表現の幅をさらに広げてくれるものになっていますが、最新のブラウザのみ対応しており、IE6のようなシェアがある旧世代のブラウザは対応していないというのが現状です。そこで今日紹介するのはIE6〜IE8をCSS3に対応させるスクリプト「Kick-ass CSS3 Support in IE6, 7, and 8」です。 全てのCSS3のプロパティが適応されるのではなく、角を丸くしたり、ボックスに影を入れたりテキストに影を入れたりといったCSS3の機能をスクリプトにｙほって再現するというものです。 詳しくは以下 スクリプトを読み込ませると言
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
cssやプログラミングマークアップをより早く Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家）HTMLコーディングが3倍速くなる？「Zen-Coding」秀丸Zen- Codingマクロコーディングの効率化を図
もう、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
css3のボタンを作成出来るCSS3 Button Makerが貴方の手元に・実装ファイルが無料で配布されています
CSS-TRICKSが公開している CSS3 Button Makerを構成し ているファイルが丸ごと配布 されています。ちょっと驚きで した。HTML+JSで作られてい たんですね・・ CSS-TRICKSが公開している CSS3 Button Makerを構成し ているファイルが丸ごと配布 されています。ちょっと驚きで した。HTML+JSで作られてい たんですね・・ PHPSPOTさんの記事やはてブに上がっていたので存在は知っていましたが、無料で配布されてるとは思いませんでした。DLすればブラウザだけでCSS3のボタンを作成出来ますよ。 JavaScriptとHTMLだけで作ってたんですね・・・まるっと配布されていますのでいつでも誰でも使用できますね。
Tiny Fluid Grid
If you are presently in prison and looking for a stress-free and quick way to communicate with your family and friend, then you should consider the CorrLinks Inmate Email. It is an email system that provides the opportunity to receive or send messages to inmates. In … Step-by-step Guide to Make NJ Surcharge Traffic Ticket Payment Online. I still remember paying my traffic ticket fines offline. I h
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
フッタをブラウザ下部に固定配置するCSSテクニック – creamu
フッタをブラウザ下部に固定配置したい。 そんなときにおすすめなのが、『cleanstickyfooter』。フッタをブラウザ下部に固定配置するCSSテクニックです。 IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。 ほかには同様のテクニックに以下のものがありますが、前者はwidth:100%のフッタには対応していないようです。 CSS Sticky Footer ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 対応ブラウザは以下の通り。 ・Firefox (2, 3, 3.5) ・Internet Explorer (6, 7, 8) ・Safari ・Opera ・Google Crome ぜひ使ってみてはいかがでしょうか？ cleanstickyfooter 今日もいい天気ですね〜。タス
kzms2 – html,css,javascript » レイアウトについて(1/4) – css3を触ってみて思った4個の利点
このブログをリニューアルして思ったこと やっぱりCSS3は便利でした。 自分でちゃんと触ってみて4点ほど、利点があったのでそれについてチマチマ書いて見ます。 レイアウト組むのが楽ちん セレクタが便利 画像に頼らず色々出来る アニメーションが素敵 といった4点が利点かなー なんて思いました。 本日はレイアウトについて便利だったことを書いてみます。 詳細は続きで。 まず始めに css2までは基本的に、FloatかPositionのどちらかでレイアウトを組んでいたと思います。 css3からは違う概念でレイアウトを組むことが可能になっています。 表示確認には、Firefox3.5、Chrome4を使用しています。 ※ちなみに説明する中で「-webkit-」（Webkit系）「-moz-」（Mozilla系）「-ms-」（IE系）などのプロパティがありますが、ブラウザごとの独自規格扱いになっ
RedLine Magazine : よく使うhtmlとCSSのソースセット
よく使うhtmlとCSSのソースセット 読んで字のごとく、よく使うhtmlとcssのソースセット。プロパティはよく使いそうなやつで値は全部空。自分用ストックだったりするので、もしコピペする場合は状況に合わせていろいろ追加やカットしてくらさい。 ナビゲーション部分用のソース サイトのナビゲーション部分によく使ってるソース。意外とこれ毎回書くの面倒なので個人的にこの雛形は気に入ってる。背景画像は通常時もhover時も全部まとめて１枚もの画像になってる前提。 <ul id="navi"> <li id="menu01"><a href=" " title=" "> </a></li> <li id="menu02"><a href=" " title=" "> </a></li> <li id="menu03"><a href=" " title=" "> </a></li> <li id="m
[CSS]スタイルシートの実用的なテクニック集：エレメント・CSS3・Tips編
先日紹介した「レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編」の続編となる、リスト・カレンダー・表・フォームなどのエレメントの実装や進歩したスタイルシートのテクニック集をSmashing Magazineから紹介します。
CSS Menu Builder | Free online navigation generator
“Need a menu for your website or a client, use our free css menu builder and create some pretty sweet menus for free„ Bootstrap Design Tools Bootstrap Design Tools is a set of tools that easily helps you modify the default styles of Twitter Bootstrap components, so that you can make them fit your website's design. DontDream.It has added the possibility of using menus generated via CSS Menu Builder
ホントに助かるフリーのcssジェネレーターいろいろ
使えるcssのオンラインサービスが 50個、Speckyboyで記事にされていた のでよさ気なものをいくつかご紹介します。 全部良さそうなので気になる方はぜひ 記事元を訪れてみてください。 日本語のテキストで作成できるｃｓｓメニュージェネレーターは本当に助かります。 Grid Designer 2 細かい設定を行えてすぐに反映されるグリッドシステム。 Grid Designer 2 nP: Grid Generator グリッドを作成すると、ｃｓｓのソースも出してくれます。 nP: Grid Generator Dynamic 4 Column Layout Generator これ面白い。4カラム専用のレイアウトジェネレーター。設定と同時に反映、 ｃｓｓもＤＬ（コピペ）出来ます。 Dynamic 4 Column Layout Generator XHTML/CSS Markup Gen
[CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート
ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 HTML箇所の最小構成は、下記のようになります。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div id="header-wrap"> <div id="header-container"> <div id="header">ヘッダ</div> </div> </div> <div id="ie6pagewrap"
RedLine Magazine : 印刷用CSSのお話
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2010/05/css3.html
