iOSエンジニアのつぶやき

毎朝8:30に iOS 関連の技術について1つぶやいています。まれに釣りについてつぶやく可能性があります。

CSS

【CSS】height:100% が効かん!

CSS

特定の要素をブラウザ画面の高さで表示したい時に、CSSで指定したheight: 100%が効かなかったので、メモ 結論 下記のようにhtmlとbody要素にheight: 100%を設定することで、ブラウザ画面から相対的に高さを計算することができるようになります。ちなみに、一…

htmlのbutton無効時のカラー調整

CSS

結論 cssからbutton:disabledで無効時のデザインを設定することができます button:disabled { border: 1px solid #999999; background-color: #cccccc; color: #666666; } ちなみに、ホバー時やボタン押下時なども同様に設定できます. button:hover { border…

【CSS】コンテンツを中央寄せで表示する

CSS

結論 下記のようにmarginに0 autoをしてすることで、コンテンツの余白を均等に割り当てて表示することができます🔰 .container { margin: 0 auto; } てな感じで本日は以上となります 🍺 その他の記事 yamatooo.blog yamatooo.blog yamatooo.blog

【CSS】flexで横並びにしたアイテムを逆順に並べる

CSS

結論 横並びの要素を逆順で並び替えたい時は下記のように display: flex; flex-direction: row-reverse; 縦並びの要素を逆順で並び替えたい時は下記のようにします. display: flex; flex-direction: column-reverse; てな感じで本日は以上となります 参考 de…

【CSS】<button>要素の枠線と背景色を消す

CSS初心者なのでメモ 結論 枠線はborderプロパティ、背景はbackgroundプロパティからそれぞれ消せます。 .button { border: none; background: transparent; } ちなみに、クリック時の枠線も消す場合は下記のようにoutlineもnone にしておきます。 .button {…

【CSS】background-imageで指定した画像が表示されん

結論 url-loaderのlimitでの制限を超える、ファイルサイズの場合表示されていなかったぽくて、limitの数値を多めに設定したら表示されるようになりました config.module.rules.push({ test: /\.(png|jpg|gif|svg)$/, use: { loader: 'url-loader', options: …

【CSS】overflow-y: visible がスクロールになってしまう

CSS

縦方向へのoverflowのみを表示させようと、下記のようにcssを設定していたら、なぜかスクロールできるようになってしまいました。 .container { max-width: 100%; overflow-x: hidden; overflow-y: visible; } まさにこんな感じ。 参照: https://stackoverfl…