普段使ってるCSSのパフォーマンスとメンテナンス性をアップさせるOOCSSベースの超軽量フレームワーク -Kraken
オブジェクト指向CSS（OOCSS）のコンセプトは普段使ってるCSSのパフォーマンスとメンテナンス性を向上させること。 そんなOOCSSをベースに設計された、モバイルファーストの拡張性も備えた超軽量フレームワークを紹介します。 Kraken Kraken -GitHub オブジェクト指向CSS（OOCSS）とは Krakenの特徴 Krakenのデモ オブジェクト指向CSS（OOCSS）とは Krakenはオブジェクト指向CSS（OOCSS）ベースで開発されています。 Krakenで採用しているものを例に、簡単に説明します。 The Kraken Way 大きいブルーのボタンのスタイルを定義する際、一つのclassやidなどで定義することもできますが、OOCSSでは「ボタン=btn」「大きいボタン=btn-large」「ブルーのボタン=btn-blue」とします。これは煩雑なように見えます
[CSS]フォームの見栄えをぐっとよくする、テキスト入力欄とボタンをCSS3で美しくスタイルするチュートリアル
CSS3 Form Styling Cheat Sheet CSS3でスタイルするテキスト入力欄 CSS3でスタイルするフォームのボタン CSS3でスタイルするテキスト入力欄 HTMLは非常にシンプルです。 classのhogeは、随時変更して利用してください。 HTML <form> <input type="text" class="hoge" /> </form> まずは、ベースとなるスタイルシートです。 CSS: Basic border:0; padding:10px; font-size:1.3em; font-family:Arial, sans-serif; color:#aaa; border:solid 1px #ccc; margin:0 0 20px; width:300px; 枠線を角丸にします。
簡単、きれい！RGBaカラーを使って横メニューを作ってみる
RGBaカラーを使って全体に統一感のある横メニューを作ってみます。RGBaカラーといっても使うの色は白（rgba(255,255,255,0.4)など）と黒（rgba(0,0,0,0.1)など）だけで、その透明度を変えて様々なところで使っています。 先日書いた「カラーツール「0to255」で色を決めてメニューを作ってみる」がなかなか好評でしたが、今回も出来上がりは同じようなメニューになります。 RGBaカラーについては、以前書いた「透明度を表す「opacity」 と 「RGBa」の違いと使い分け」も参考になると思いますのでぜひご覧ください。 早速コードを見てみます。まずはHTMLですが、これは特に問題ないと思います。 <ul id="menu"> <li><a href="#">IE</a></li> <li><a href="#">Firefox</a></li> <li><a href
CSS3 IE対策まとめ
CSS3を使うにあたっていつも問題になるのが Internet Explorer（IE）です。CSS3への対応が遅い上に、旧バージョンを使い続けているユーザーも結構いますので、CSS3を使うことに躊躇する人も多いのではないでしょうか？ ということでCSS3を使うにあたって知っておきたいIE対策を紹介します。 1. CSS3の対応状況を確認する まず、IEのバージョンごとでCSS3にどこまで対応しているか知っておく必要があります。個人的によく使っているのはこのサイトです。 CSS3 & HTML5 Browser Support CSS3で追加されたプロパティ、セレクタについてブラウザごとの対応状況が分かりやすく表示されています。 2. CSS3セレクタに対応する セレクタはSelectivizr.jsだけあれば簡単に対応できます。「CSSセレクタって何？」「CSS3セレクタってどういうもの
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
保存版！CSS3セレクタの説明書
CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ
Webデザイナー・開発者向けの３２個のチートシート集まとめてみた。
デザイナー向けのチートシートまとめ カラーシート Color Combination Cheat Sheet さまざまな色の基本原則がわかるカラーチートシートです。 使いたい色を直感的に選んで、その色のコードを調べることができます。 オンラインシートなので、ブックマークに保存しておくとすぐに調べられます！ Web Designer Color Reference Hexagon Mouse Pad Webデザイナー向けのカラーチートシートです。 拡大するとそれぞれのカラーのコードがわかります。 色彩バランスを把握しやすいので、デザイン時に重宝します。 ウェブ制作者向けのチートシートまとめ HTMLのチートシート HTML5タグ★チートシート HTML5のチートシートです。 かなり詳細にまとめられているので、辞書のように使うこともできます。 印刷して参照するのが向いているので、すぐに確認で
初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
HTML5+CSS3 入門
Webを記述する言語の標準の現状 昨年度であれば、HTMLを記述する授業では自信をもって以下の基準を推薦していました。 HTML (文書の構造を記述する言語) – XHTML 1.0 もしくは XHTML 1.1 CSS (文書の体裁・デザインを指定する言語) – CSS 2 しかしながら、ここ数年で、とくに去年あたりから状況は大きく変動しつつあります。現状の変化を理解するには、ここに至るまでの歴史的な経緯について簡単に理解する必要があります。ここまでの経緯を整理した上で、将来の展望を探りたいと思います。その上で、この授業ではどのような基準にのっとって「正しい」ということを定義するのか決めていきたいと考えます。 HTML (Webサイトの記述言語) の標準化巡る闘争の歴史 AppleInsider: なぜ Apple は HTML 5 に賭けているのか： ウェブの歴史 [Page 2] よ
HTML5という言葉に圧倒され気味の方への、HTML5入門 | Ext Japan Blog
この記事は5/23に掲載された「A HTML5 Primer for the Overwhelmed」を訳したものです HTML5がグーグルやアップルにより、リッチインターネットアプリケーション（RIA）のためのソリューションとして強力にサポートされ始めた結果、HTML5という言葉がバスワード化しています（特にGoogle I/O以降）。そして、HTML5という言葉が広く流布するにしたがって、その言葉本来の意味とは違う意味で使われ始めていることも、驚きではなくなっています。「HTML5の経験があること」が採用条件となっているような採用情報も既に存在しますし、シンプルなJavaScriptアニメーションもCSS3によるアニメーションもひっくるめてHTML5のサンプルとして紹介されていたりします。 ちょうど00年代中頃に「次世代のWeb開発」を指すバズワードとして「AJAX」や「Web2.0」
CSS3について知っておきたいことのまとめ
CSS3には興味深い様々なプロパティがありますが、これらを勉強するにあたって知っておきたいCSS3の基礎をまとめてみます。 過去の記事に手を加えたものや新たに書いたものなど幅広くまとめてみましたので、ぜひ抑えておいてください。 今回は結構ボリュームもあるので目次を作っています。 1. スタイルシートの構造 CSS3に限ったことではないですが、CSSの構造は下の図のように、セレクタ、プロパティ、値となっています。 もちろんプロパティと値は一対です。CSSといえば、プロパティのイメージが強いですが、セレクタも結構奥が深いです。 CSS3ではセレクタもプロパティも新たに追加されていますので、違いをちゃんと理解しておきましょう。 2. CSS3セレクタ CSSセレクタはスタイルを適用する対象を選択するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 CSS3セレクタはW3
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
電話占いで使われる占術をご紹介 | 当たる電話占いおすすめランキング～口コミで評判の当たる電話占いサイト紹介～
CSS3、HTML5、jQuery、デザインなどウェブ制作のテクニックが動画で学べるサイト