CSS3とHTML5でつくるテンプレート集「15 Useful CSS3 and HTML5 Templates and Frameworks」
TOP > WebDesign > CSS3とHTML5でつくるテンプレート集「15 Useful CSS3 and HTML5 Templates and Frameworks」 言葉自体ははかなり浸透してきた次世代のWEBの標準的なになっていくとされているHTML5とCSS3。ブラウザも対応してきて、一部のWEBサイトで使われ始めてきていますが、今回紹介するのはCSS3とHTML5で制作されたテンプレートを集めたエントリー「15 Useful CSS3 and HTML5 Templates and Frameworks」です。 RamblingSoul 19 CSS3 Template 様々なテンプレートが公開されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。 詳しくは以下 ■Ampersand HTML5 HTML5で制作されたテン
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」:phpspot開発日誌
ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 2009年07月07日- Modernizr ブラウザのCSS3、HTML5絡みの対応が一発で分かるようにできるライブラリ「Modernizr」 ライブラリを使って、Canvas、opacity、Multiple backgrounds といったCSS3やHTML5の機能に対応しているかを簡単に調べることが出来るようです。 Google Ghrome の場合で対応を明示 Firefox 3 の場合で対応を明示 JavaScript では、次のように使えるようです。 if (Modernizr.cssgradients) { alert('対応'); } else { alert('未対応'); } cssgradients の他には以下のようなプロパティが利用可能。 Modernizr.ca
CSS Optimization Tips - Optimizing Style Sheets - CSS Optimization Tutorial
Does your style sheet ever feel bloated and overweight? If you notice some love handles growing on your style sheets, it may be time to stop and give it a good make over. Learn the following steps and your style sheet will be in shape in no time. Step #1 - Learn How to Group Selectors What is a Selector? For those who are not familiar with the term “selector” you can refer to this quick overview
IEが有るから助かってるって思えるかもしれないお話
何かしらのサイトを組んでいる時って誰でも一度は思うんだろうけど、 「IEなんて・・・（自重」、「IEさえ・・・（自重」、「ちょ、IEおま・・・（自重」 とか、思うっすよね。 ボクも勿論その中の一人で、特にIE6に関しては常に思ったりしています。 IEのために今までどれだけの時間を費やしたか・・・と思えるほどに。 そんなIEさんですが、今日は逆にIEが有るから助かってるかもって思えるお話です。 ぇーまぁそんな訳で、明日からIEが一切なくなったとして。 「3番目のグローバルナビだけちょっと指定変えてもらえる？」 と、言われて、 『class追加するのやだなぁ』 ってのが、 「リンク先変わらないんだから属性セレクタ使えばいけるっしょ」 って言われてしまったり。 「そこの最初のh3だけmargin-topは0で、他のh3は30pxでお願い」 と、言われて、 『最初のh3だけclass追加しないとい
[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"
クロスブラウザのためのCSSのテクニック10選「10 astonishing CSS hacks and techniques」
TOP > WebDesign > クロスブラウザのためのCSSのテクニック10選「10 astonishing CSS hacks and techniques」 WEBを制作されている方は日々工夫をこらしているCSS。多々あるブラウザ環境の中で、統一した見た目を保つ為に色々な努力を積み重ねている事かと思います。今日紹介するのはクロスブラウザのためのCSSのテクニックを紹介するエントリー「10 astonishing CSS hacks and techniques」を紹介したいと思います。 Cross browser inline block ツールチップやギャラリー表示、選択したテキストのカラーを変える等、様々なテクニックがソースコード付きで紹介されています。今日はその中からいくつか気になったテクニックを紹介したいと思います。 詳しくは以下 ■Cross browser mi
画像置換とSEO
画像置換とSEO 画像置換の話題がはやっているようですのが、SEOに関して肝心なところ出てきていないようですので補足しておきます。 ひとまず、関連エントリーのまとめ 画像置換乱用してませんか？ | THE HAM MEDIA 画像置換について « grandes cedro 画像置換について考えてみました｜linker journal｜linker ここからが本文。 結論から書くとGoogleはaltもテキストも同等に扱う為、SEO上のメリットはありません。あったとしても計測できないほどの微々たるものです。 ただ、Yahooはaltに関してまったく評価されません。 つまり、画像のaltにのみキーワードがあるような場合は検索結果に登場しません。 また、a要素に包まれたテキスト、アンカーテキストと呼ばれるものですが、これは現在のSEOで結構重要なポジションにある要因なので、これが評価されていな
IE6 で文章の最後の2文字（くらい）が変なところに表示されてしまう問題の原因と解決法。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。 IE6 で float を使ったレイアウトをしているとき、文章の末尾（最後の2文字くらい）が変なところに表示されるということがあります。 どう変かというと、末尾の文字をそのままコピーしてはみ出たような、そんな感じです。 もちろんソースにそんなものは含まれていません。 JavaScript や PHP なんかを使っている訳ではなく、純粋に HTML と CSS のみでもこのような事象が起こります。 で、とりあえずググってみて見つかったのは下記2つの記事。 »コメント文が出力に影響！？ »IE6のバカヤロウ (room ant) これらを読んで、とりあえず「float
サイトで使っている色をカラーパレットに抜き出してくれる「I Like Your Colors」
組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! サイトで使っている色を抜き出してくれる「I Like Your Colors」「I Like Your Colors」は、サイトのページURLを入力すると、そのページとCSSで使われている色を抜き出し、色相ごとにグループ分けしてカラーパレットにしてくれるサービス。 ちなみにページへI Like Your Colorsと普通にリンクを貼ると、リンク先がそのページで使われている色の結果になります。 「I Like Your Colors」の特徴 ログイン不要 サービスページへリンクするだけで結果公開可能 使用しているCSSからカラーコードを抽出 ページとサイトで使っている色を抽出 ↑このような感じで色相ごとにカラーコードを表示してくれます。 興味のある方
ヨモツネット[日記] ≫ CSS ファイルだけで IE 6 の背景に設定した png のアルファチャンネルを有効にする
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
ブラウザの下部にフッターを固定表示する『CSS Sticky Footer』 – creamu
フッターをブラウザの下部に常に表示させたい。 そんなときにおすすめなのが、『CSS Sticky Footer』。ブラウザの下部にフッターを固定表示するCSSだ。 クロスブラウザで、IEやFxはもちろん、Opera、Safari、Google Chrome、Chaminoなどにも対応している。 ブラウザ対応状況は以下から。 » Here is the Full List HTML、CSSもとてもシンプルなので、ぜひ見てみてほしい。 ブラウザの下部にフッターを固定表示するCSS、チェックして使ってみてはいかがだろうか。 » CSS Sticky Footer Oisixの野菜を炒めて食べました。だいぶ減ってきたな。じゃがいもとたまねぎがうめぇ。
Styling Ordered Lists with CSS - CSS List Tutorial
Recently I was working on a site where I had to style an ordered list and thought this may help some of you in future projects. The snag that some people tend to run into is that they are not sure how to separate the styles of the numbers and the actual content of the list. It may feel easier to number each list item manually but then we end up defeating the purpose. In this tutorial I will show h
Firefox3でメイリオを指定するとinputのsizeが倍増する
Firefox3でメイリオを指定するとinputのsizeが倍増する Firefox3のデフォルトのフォントをメイリオに変更すると検索窓がグニョーンと伸びるよと教えていただきました。 検索窓は <input id="search" name="search" size="20" /> といたってシンプルなコード。 フォントの指定も font-family:sans-serif; と非常にシンプル。 font-family:"ＭＳ Ｐゴシック"; などに変更すると元の長さに戻ります。 font-family:"メイリオ"; などとすると同じように伸びます。(デフォルトのフォントをMS P ゴシックに変えても伸びてます) 解決策としては input にかかっているfont-familyを"ＭＳ Ｐゴシック"に変更するか、widthで明確に横幅を指定するかのようです。 というわけで、widthで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]上級者向け、スタイルシートのテクニック集