HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか - かちびと.net
あまりに情報量が多くて混乱してきたので 自分用にまとめ。リファレンスとか、ちゃんと 実践で使えるツールを自分なりに厳選して まとめておきます。どうも、あっちこっちで あれが便利とかこれが便利だとか言われる と訳が分からなくなるのでそろそろ絞らない とですね。 というわけでお遊びではなく実践に役立ってる基本的なリファレンスとか助けてくれるツールのメモなので目新しいものはありません。完全に自分用のまとめです。個人的には基礎用のサイトと、実践向けのツールやライブラリだけあればいいという感じです。 尚、css3/html5に関する情報だけを求めている&特に情報取得に急いでないならdotHTML5というサイト1つで事足りるかと思います。 ※W3Cは割愛でいいですよね チートシートとかリファレンスだけで基本的にはいい感じですかね・・ HTML5 タグリファレンス マークアップもままならないほど慣れてな
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
CSS Sprites化と画像減色でサイトを高速化 - エスカフラーチェLLC
開発裏話1、開発裏話2、と紆余曲折を経てリリースした Twister Alternative ですが、今回はgihyo.jp の連載記事にも関連し、デザイン面からみたサイトの高速化のお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。 デザイン面でサイトの高速化というと不思議に思われる方もいらっしゃるのではないでしょうか。 Google App Engine のリクエスト制限 Twister では当初、Google App Engine で動いていました。Google App Engine ではリクエスト数に制限があるので、1回のページ読み込み時に発生するリクエストは最小限にしなければなりません。サイトの至るところで使われている一つ一つの画像はリクエストを増やしてしまう原因となります。 そこで
positionレイアウトホームページ作成講座｜#container部分
CSSデザインサンプルのホームページ制作の流れをご確認下さい。 CSSのコピー 下記ソースをコピーして下さい。 /*-------------------------containerの指定*/ #container { position: relative; width: 100%; margin: 0; padding: 0; } HTMLファイル指定部分 <body> <div id="wrapper"> <div id="header"> *** ヘッダー部分 *** </div> <!--container 基点--> <div id="container"> <div id="contents"> *** コンテンツ部分 *** </div> <div id="sidebar"> *** サイドバー部分 *** </div> </div> <div id="footer"> *
初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
CSS3を使ったMacライクでクールなドロップダウンメニュー「CSS3 Dropdown Menu」:phpspot開発日誌
CSS3 Dropdown Menu 次のようなCSS3を使ったMacライクでクールなドロップダウンメニュー「CSS3 Dropdown Menu」が公開されてます。 CSS3をサポートしないブラウザでも角丸がかからないだけで綺麗に表示されるようです。 デモページはこちら。 クオリティがとても高いですね。 ヘッダーナビゲーション等に使うといい感じかもしれません。 関連エントリ クールにアニメーションする水平ドロップダウンメニュー実装jQueryライブラリ 複数選択が可能でスタイリッシュなドロップダウンメニュー実装用「jQuery MultiSelect Plugin」 jQueryで幅の大きなドロップダウンメニュー作成チュートリアル
CSS Sprite Generator
What are CSS Sprites CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
ウェブデザインで効果的に半透明とオーバーレイのテクニックを使う方法とその実例
半透明とオーバーレイのテクニックは効果的に使用すると、奥行きとリアリズムを作り出し、退屈なウェブデザインにモダンな印象を与えます。 Onextrapixelから、ウェブデザインにおいて効果的に半透明とオーバーレイのテクニックを使う方法とその実例を紹介します。 Opacity and Overlay Techniques in Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 Dark Overlay Light Overlay Color Mixes Dark Overlay ブラック、あるいは暗いグレーを使ったオーバーレイ。最近のウェブデザインでよく見かけるタイプです。見た目はスタイリッシュになり、画像やスライドショー、ナビゲーションなどによく利用されています。 このテクニックを利用する際は、CSSでの透過をサポートしていないブラウザがまだあるため、PNGで
Bos138
Selamat datang di Bos138, situs games online terkemuka yang siap memberikan Anda pengalaman bermain terbaik dan paling menguntungkan. Sebagai salah satu situs games online yang paling terpercaya, kami menawarkan berbagai macam permainan mulai dari taruhan olahraga, kasino, poker, hingga permainan slot yang seru dan mengasyikkan. Kami memahami bahwa kenyamanan dan keamanan adalah prioritas utama ba
インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」
とある理由から、インラインでCSSが書かれているHTMLを、綺麗にCSSファイルと分割させたいというときもありますよね。 しかし、これを手作業で進めるのはとても手間がかかり、０から作り直したほうが速いことがほとんど。 今回は、そんなときに一撃でCSSファイルと分割できるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! インラインCSSのHTMLをCSSファイルと分割する「Cascader」 「Cascader」は、インラインでCSSが書かれているHTMLファイルを、一発でCSSファイルと分割してくれるオンラインサービス。 ひとつひとつ分解しなくても、HTMLをコピペするだけで分割できてしまうのが非常に便利です。 HTMLタグを貼り付けるだけで分割 ↑たとえば、画像のようにイ
CSS3とjQueryでフォームを美しく装飾する方法
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
もうXGAだけに合わせるのは古い？モニタサイズによってCSSを最適化する「SimpleGrid」がステキ | バンクーバーのうぇぶ屋
CSSの知識をもっと深める30+2の小技テクニック集｜Webpark