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

2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 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年でクロスブラウザ状況どうなのかね？

[nogoro]

JSでなくCSSでも可能となった事(本日最初のB!と同様だが多数). "5.スライドパネル"がそのB!と類似.但しinput:checked + .panelでなくinput:checked ~ .panelとすべき. "7.ツールチップ"は表示が崩れる場合も―titleのみで良い(次々項も参)

[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エレメントとの干渉が気持ち悪いから使わないけど、自分が古いだけかも。