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

気に入った記事をブックマーク

気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
記事を読んだ感想やメモを書き残せます
非公開でブックマークすることもできます

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

テクノロジーカテゴリーの変更を依頼記事元:

www.webcreatorbox.com

適切な情報に変更

エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます

コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

次回からTwitterへ自動リダイレクト

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

1827usersがブックマークコメント

114

コメントするにはログインが必要ですブックマークを追加

ブックマークを追加

よく使うタグ

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

1827 users

www.webcreatorbox.com

よく使うタグ

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント114件

注目コメント
新着コメント

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

2017/07/07リンク

その他

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

2017/07/07リンク

その他

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

2017/07/07リンク

その他

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

2017/07/07リンク

その他

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

2015/03/17リンク

その他

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

2017/07/07リンク

その他

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

2015/03/17リンク

その他

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

2015/03/17リンク

その他

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

あとで読む

2015/03/17リンク

その他

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

2017/07/07リンク

その他

real1223css, js, tips

2018/10/08リンク

その他

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

2018/02/21リンク

その他

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

2017/07/15リンク

その他

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

2017/07/09リンク

その他

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

2017/07/09リンク

その他

kisara_icyあとで読む

2017/07/08リンク

その他

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

2017/07/08リンク

その他

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

2017/07/08リンク

その他

a-nama-specialすげ

2017/07/08リンク

その他

zakisan10めも

2017/07/08リンク

その他

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

2017/07/08リンク

その他

Belugacss

2017/07/08リンク

その他

rikochanhayatokunこれは便利ですね

2017/07/08リンク

その他

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

2017/07/08リンク

その他

soulsonicsI

2017/07/08リンク

その他

exsoul覚えておこう

2017/07/07リンク

その他

WorldWorldWorld2年前……！！

2017/07/07リンク

その他

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

2017/07/07リンク

その他

eagleyamaなる

2017/07/07リンク

その他

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

2017/07/07リンク

その他

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

2017/07/07リンク

その他

kvxariaさん・・・

2017/07/07リンク

その他

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

2017/07/07リンク

その他

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

2017/07/07リンク

その他

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

2017/07/07リンク

その他

hiroomiテストの教材。

2017/07/07リンク

その他

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

2017/07/07リンク

その他

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

2017/07/07リンク

その他

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

2017/07/07リンク

その他

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

2017/07/07リンク

その他

コメントするにはログインが必要ですログインしてコメント

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

usersに達しました！

さんが1番目にブックマークした記事「かつてはJavaScrip...」が注目されています。

気持ちをシェアしよう

ツイートする

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

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