flex-directionをcolumnにしていて、子要素が空の時に高さが効かない件。

css web制作デザイン私の仕事

結論 display: flex;flex-direction: column;flex-wrap: nowrap; ←こいつをつければOK ざっくり何があったか子要素が空なら高さ要らんやん。縦並びにするならflexも要らんやん。まぁそれはごもっとも。今カスタマイズしていたのは、はてなブログのアーカ…

2022-08-18

CSSで○番目から○番目までを指定する

私の仕事 web制作 css コーディング

<ul> <li>1</li> <li>2</li> ← これと <li>3</li> ← これと <li>4</li> ← これ <li>5</li> </ul>真ん中のアイテムだけ見た目を変えたいの！！！というときがスライダーやらページャーを作るときによくあってクラスをつけるのもなんだかなぁというときに使えるCSS技。nth-of-typeを複数設定/* 2番目から5番目の要素…

2022-03-04

スマホが勝手にinput要素をズームする問題

私の仕事 web制作 HTML css iOS コーディング

フォーム要素があるページをスマホでみているとき、入力しようとすると、何も指定していないにもかかわらず勝手ににゅんっとズームする問題。見て見ぬ振りをしてきましたが（とくに指摘されたこともなかったし・・・）、どうやらfont-sizeが影響している…

2022-03-01

iPhoneで勝手に文字サイズが変わる問題

私の仕事 iphone web制作 HTML css コーディング

色々と使い勝手良く作られているiPhone。その便利機能のおかげでtableの一部のセルだけ文字が大きくなり、 !importantすら無視されてしまう問題に出会ったので修正方法をメモ。html { -webkit-text-size-adjust: 100%; }結果から言うと、これで解決。事件詳…

2022-02-28

リンクの無効化をCSSで。

私の仕事 web制作 HTML css コーディング

同意画面の初期表示時はボタンを押せない状態にしたい！とかで使えるCSSのご紹介。昔はJSでonclickなんちゃらを設定したりが必要だったけど CSSで大丈夫だよ（わーいpointer-events:none;はい、これだけ。 hover時にポインターが変身することもなくなりま…

2022-02-01

javascriptで画面サイズ（幅・高さ）を取得する

web制作 JavaScript css コーディング jQuery

スクロールバーやアドレスバーを含まない$(window).width() document.documentElement.clientWidth; $(window).height() document.documentElement.clientHeight;スクロールバーやアドレスバーを含む値がアドレスバーの出現等によって動的に変化しますwindow…