かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

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

[Hamukoro]

-modzilla-,-weblit-が要らなくなったら起こして…

[localnavi]

…2015年時点でここまでできてたのか。我ながら不勉強の極みだ。

[timetrain]

デザインする方にはとても便利。しかし、こういう装飾ってほんとに必要なのかなとも思う

[shiromatakumi]

今更感があると思ったら2年前の記事やんけ。

[delphinus35]

HTMLが化けまくリングなのは何かのバグかな？

[bml]

10年遅れで個人サイト書いてる俺には有用。CSSだけで書きたい。

[hashrock]

良い。チェックボックスによるフラグはちょっと闇ぽいが

[mumincacao]

５と６は黒魔術感あるけどよく使いそうなのいろいろだなぁ・・・ （CodePen 埋め込みじゃない HTML こーどが多重えすけーぷされてよくわかんないことになってるのです）Ｏｏ（ーωー；【みかん

[itochan]

いきなりわからない。HTML5だと、aでdivを囲えるの？　読んで、そして勉強しなきゃだゎ。

[yoiIT]

この2年でクロスブラウザ状況どうなのかね？

[real1223]

css, js, tips

[ttten]

“.main { display: flex; justify-content: center; align-items: center; height: 400px;}.main section { width: 250px;}”

[dolokruted]

かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技｜Webクリエイターボックス @webcreatorboxさんから

[UDONCHAN]

うるせぇエビフライ投げつけっぞ

[papiro]

そもそもJavaScript、CSSわかんないのでやらねば

[kisara_icy]

あとで読む

[TakamoriTarou]

ただしMSはIEを改善する気がない一方、プラグインなどIEがもっとも安定と言う事で使われるので、どれだけが可能かというと･･･。MSもEdgeとか言ってないで、IEを地道に回収してって欲しいんだけどなあ…。

[powerbombkun]

Javascriptを使わなくて良い分速度的にもアップしそう

[a-nama-special]

すげ

[zakisan10]

めも

[quwachy]

知ってるのばっかだと思ったら２年前の記事だった

[Beluga]

css

[rikochanhayatokun]

これは便利ですね

[harry0000]

かつては拷問にも使われていたJavaScript

[soulsonics]

I

[exsoul]

覚えておこう

[WorldWorldWorld]

2年前……！！

[k3akinori]

divをaタグで囲むのはなー、WordPressでやるとデザイン壊れるんだよ。TinyMCEのクソ機能のおかげで。

[eagleyama]

なる

[hinashiki]

checkboxでの実装はあんまりいただけないような気もするけど、概ねキレイに実装されていてよかった。なんで今さら上がってきたのかは不明。2年前の記事なので今はもっとキレイに実装できる？

[kvx]

ariaさん・・・

[GiveMeChocolate]

すごい久しぶりに WCB 見た気がする

[Sampo]

アコーディオンをラジオボタンで実現する発想まったくなかった

[Katharine_15]

こういうことをできる、ということを頭の隅っこに覚えておくことが大事なんだろうな。

[hiroomi]

テストの教材。

[wordi]

IE11対応の時はflex、justify-content周りはちょっと工夫必要なので注意

[MIZ]

全然知らんかった。こりゃありがたい。

[infobloga]

あと、マウスホバーでポップアップするメニュー良く使う。5と6はformエレメントとの干渉が気持ち悪いから使わないけど、自分が古いだけかも。

[kaipu1224]

今年受けた仕事なのにIE9が開発対象に入っているんだよなぁ…