JavaScript - レイアウト

FlexboxとJavaScriptで、異なる文字数の行の幅を自動で一律にそろえる

Result See the Pen Flexible Full-Width “Justified” Text Blocks by kachibito (@kachibito) on CodePen. text-a...

リストを任意のカラム数に分ける

Result 普通のリストを任意のカラム数で分けます。現在は3カラムに分けられています。 var num_cols = 3,の数値を変更すれば設定したカラム数に分けられます。 マークアップには変更を加えず処理出来るので覚えてお...

レスポンシブWebデザイン対応のメガメニュー

Result See the Pen megamenu.js - Last responsive megamenu you'll ever need by Mario Loncarek (@riogrande) on CodePen. ...

カラムの高さを一番高いボックスに統一する

要素をランダムで指定数分だけ表示

スクロールに応じて背景を変える

スクロールに応じて背景を変更する

要素内にある特定の書き方のclass名を一括で削除する

指定された画像が存在しないときに別の画像に置換する

最下部に要素を固定する

画像が存在しない場合は、そのimgタグを削除する

1つのul要素を2つに分ける

~個ごとに要素のスタイルを変更する

連続使用されているbrを削除する

マークアップされた要素が空ならそのタグを削除する

マウスホバーでclass名を加える

要素を画面真ん中に配置する

jQueryを使用しているページだけスタイルを変更できる様にする

cssを変更するボタン

ボックスの高さを一番高いものに合わせる

複数並ぶボックスのうち、指定した数だけ表示/非表示可能にする

Ads