2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと

デフォルトスタイルシートの構造を知ることによって、闇雲に指定しているリセットCSSから抜け出すことができます。 ブラウザには、デフォルトスタイルシートというのがあり、ブラウザによってあらかじめスタイルシートが定義されています。 これによって、文章をHTMLで適切にマークアップをすれば、適度な間隔を保つようになっています。 しかしWebサイトを制作する上では、このデフォルトスタイルシートが障害になります。 理由は、ブラウザによって差があり、IE6, IE7, モバイルまで含めると、指定されている値が違うものが多くあるからです。 私は、1年前に各ブラウザのデフォルトスタイルシートを調べました。 現在のモダンブラウザでは、プロパティ名が違うものがありますが、概ね変わっていません。 具体的なデフォルトスタイルシートの例を挙げます。 以下は、平均的なデフォルトスタイルシートの一部です。 html {

「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要

Searched Google, found this, installed it, went to settings, selected zip and relative links, downloaded, verified locally, patched a few bits, uploaded to S3… Job Done One small hiccup I’ll raise a support request for as I’ve prior art. CSS background url’s

CSSセレクタについての基礎知識 このブログで何回も説明していますが、念のために説明します。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 セレクタ表の説明には属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 あと親子関係や兄弟関係などもあまり聞きなれないかもしれません。下の階層にある要素との関係が親子関係で、同じ階層にある要素同士の関係が兄弟関係です。 あと、CSS3と聞いて「どうせIE8以下はダメだし使えない」と思う方もいるかもしれませんが、セレクタに関しては簡単に対応できます。 IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」をご参考に。 それ

Bookmark2016.10 「Naverまとめ」のまとめ：WEBデザイン編 Bookmark2016.10 「Naverまとめ」のまとめ：WEB PR・プロモーション編 HTML5 : <video>2011.09 HTML5：<audio>タグ。コントロールバーの幅の設定は CSSで。audio {width: ○○○px;} HTML5 : <video>2011.08 HTML5での動画<video>の取り扱い。— “html5media” — Facebook : OGP2011.06 Facebookにおける“Social Graph” — “Open Graph”の粗々なまとめ。 Facebook2011.06 Facebookページ、「iframe」で作ってみました。 東日本大震災2011.03 トイレットペーパー、ガソリン、電池…（みんなで分け合えば、できること。） H

オシャレなアイコンを使うと味気なかったスクリーンが急に華やぎますが、アイコンや背景素材などのグラフィック素材が無料で使用できるサイトが「Icon Deposit」です。新着順の他、人気順に並べ替えることができ、自分好みのスタイリッシュな素材を見つけてダウンロードすることが可能。また、アカウントを登録して自分の作った素材を公開することもできます。 Welcome to the Icon Deposit どのような素材がダウンロードできるかというと、以下がその一例です。 ◆01．Micro Icon Set 16×16のPSDファイルアイコンが110個入ったアイコンセット。販売、再配布は不可ですが、個人利用は可能です。 ダウンロードする際はページ右上の「Download This！」をクリックします。 ◆02．Shiny Social Icons (PSD) こちらは商用利用可能。PSDファイ

新しくウェブサイト（ホームページ）やブログを開設しようと思っているのでしたら、有名な無料ホームページサービスや無料ブログサービスを使うのではなく、独自ドメインを取って、はじめられることをお勧めします！！ 独自ドメインはやっぱりいいですよね〜(^_^)v。愛着がわくし、カッコイイしSEO的にもいいし、訪問者さんは覚えやすいし。いいことずくめです♪。自分のモチベーションアップのためにもぜひ独自ドメインを取りましょう！！(^^)/。 独自ドメインで運営することのメリット、デメリットがありますので、まずはそれからご説明しますね。 独自ドメインのメリット／デメリット 独自ドメインのメリット サイト移転時にURLが変わらない（ブログサービスやツール変更時を除く） 訪問者さんにサイト名（独自ドメイン名）を覚えてもらいやすくリピーターに繋がりやすい SEO的に有利（と言われている） 世界に一つだけ、という

ウェブ系のカンファレンスや会議でiPadを持ち歩いている人を多く見かけるようになりましたが、「使いにくくないのかな？」「重くないのかな？」と未だに思ってしまうオールド世代な私です。今回は、そんな私の規定概念を打ち崩すような、ウェブ制作に便利なiPadアプリを30以上一挙に紹介したiPadファン涙目な記事をspyrestudiosから紹介します。メモ帳からスケッチ、モックアップに本格的なドローイング、そして編集や企画、データ解析までウェブ制作に必要なアプリは全て揃っているといっても過言ではありません？！ — SEO Japan 数日前、私がダウンロードしたiPadアプリの多くを使っていないとTwitterに書いたところ、皆が私におススメアプリの情報を多数送ってくれた。それを機にさらにもっとたくさんのアプリをダウンロードして、どれが一番好きかを確かめることにした。 この記事は、デザイナー、デベ

CSSの勉強中に色々困ることが起きて検索するのですが、だいたい同じところに行き着くので自分用のリンク集も兼ねてまとめておきます。 仕様を確認するとりあえずW3Cを見に行った方が早い。 そもそもプロパティや値について分かっていない場合はここで解決することが多い。 CSS current work & how to participate現在の状況と仕様書の目次。CSS3の日本語訳集 - 血統の森 web実験小屋日本語訳へのリンク集。W3Cの目次から探すのが面倒なときはGoogleで「w3.org プロパティ名」で探すと早い。「devs.w3.org」と「www.w3.org」を分けて検索するのもいいと思う。 ブラウザの対応と実装対応しているかどうかだけの場合は以下の2つのサイトで事足りる場合も多い。 When can I use… Support tables for HTML5, CSS3

RetinaサポートWebへの第一歩 | Tai... / ウェブサイトのRetina化 | drops -... / AMAITORTE - 日記 - 記事『Reti...他...全7件

角丸にドロップシャドウ、グラデーションにアニメーションなど、超簡単にCSS3スタイルの作成＆コード生成をしてくれる「CSS3 ジェネレーター」まとめ！！ html5-css3-orange-logos / Nelson Felix Giga どうも！おつぱ（ @OZPA ）です！ 今回は、角丸やドロップシャドウ、グラデーションに2D/3Dアニメーションなど、CSS3に対応したスタイルを簡単に作成、さらにコードを生成してくれる「CSS3 ジェネレーター」を厳選して8つご紹介！ ｳｵｱｱｱｱｱｱｱｱ さて、CSS3対応ブラウザも増え、角丸、ドロップシャドウ、グラデーションにWebフォント、はたまた2D/3Dのトランスフォーム（回転／拡大縮小／移動）やアニメーションなどなど…リッチなUIがコードのみで表現できるようになりました。 関連：[CSS]GoodDesign賞にノミネートされて落選するこ