①.結論！ リセットCSSとは、各ブラウザにデフォルトで設定されているCSSを打ち消す役割をもったCSSです！ 各ブラウザは固有のCSSがデフォルトで指定されています！ このデフォルトのCSSの影響で、自分で書いたCSSが本来意図しない表示になることがあります！ ブラウザがデフォルトで持っているCSSを打ち消すために、リセットCSSというCSSを使用します！ ②.リセットCSSを記述 style.cssに以下に例として記述をします！ style.css /* リセットCSS */ body { font-size: 14px; color: #333; margin: 0 auto; } h1,h2,h3,h4,h5,h6,p { padding: 10px 0; margin: 0; } ul,li { padding: 0; margin: 0; } こうすることによって、見た目がきちんと整います！ ③.まとめ 簡単に言うと、 リセットCSSとは、各ブラウザにデフォルトで設定されているCSSを打ち消す役割をもったCSSのこと！ これを記述するのを忘れないようにしないとですね！ 何か説明で間違っていたらご指導お願い致します(_ _)

はじめに radioボタンのカスタマイズ、超めんどくせぇ・・・ そう思いませんか？擬似要素を使ったり、何か色々とコネコネせんとダメっぽい・・ と言うのを、思い知った記念の記事となります！ 環境 ・Nuxt.js ・bootstrap あれ？radioボタンの色が変わらんのやけど？？ 普通にinputタグのbackgroundとborderを変えたらいいのかな〜？とか思ってると、全然ダメでした。。。 index.vue <template> <div> <input type="radio" v-for="j in question.num" :key="j" :value="Number(j)" /> </div> </template> <style scoped> input { background: greenyellow; border: red; width: 20px; height: 20px; } </style> なんでやねん！！ 結論、擬似要素を使わないと無理です！！ 「みんなやたらと擬似要素使ってるな〜」とか思ってると、、そもそも擬似要素を使わないとinputをカスタマイズすることは無理っぽいようでした・・ index.vue <template> <div> <input type="radio" v-for="j in question.num" :key="j" :value="Number(j)" /> </div> </template> <style scoped> input[type="radio"] { -webkit-appearance: none; /* フォーム要素のスタイルを初期化 */ width: 20px; height: 20px; border: 1px solid red; border-radius: 50%; } /* 内側のマル */ input[type="radio"]:before { content: ""; display: block; width: 60%; height: 60%; margin: 20% auto; border-radius: 50%; } /* 選択された時の内側のマルの色 */ input[type="radio"]:checked:before { background: greenyellow; } </style> 重要なポイント いくつか重要なポイントをご紹介！ まずはinputを初期化しないといけません！！ -webkit-appearance: none; /* フォーム要素のスタイルを初期化 */ ?これ超重要！ これがないとborderが効きませんでした これを追加することによって、自由にinputをカスタマイズすることが可能になります。 checked attributeを追加させるような処理は、特に何も書いていません！！ checked attributeとは?こーゆーの <input type="radio" checked> もしchecked attributeが無いと、こんな感じになってしまいます！ input[type="radio"] { -webkit-appearance: none; width: 20px; height: 20px; border: 1px solid red; border-radius: 50%; } input[type="radio"]:before { content: ""; display: block; width: 60%; height: 60%; margin: 20% auto; border-radius: 50%; background: greenyellow; } 参考

CSSフレームワークのBulmaを使用した、Instagramのようなハンバーガーメニューがないレスポンシブなナビゲーションバーのサンプルコードです。 Flexbox helpersを使用してレスポンシブにしています。 デスクトップサイズ時の検索バーがモバイルとタブレットサイズではアイコンに変わるようになっていて、ドロップダウンメニューもあります。 CodePenのデモ See the Pen bulma-navbar-without-burger by kwtuku (@kwtuku) on CodePen. 解説 大まかな構造 html <nav class="navbar has-shadow is-fixed-top is-flex is-justify-content-space-around"> <div class="navbar-brand is-flex-grow-2 is-justify-content-center"> <!-- ロゴ --> </div> <div class="navbar-menu is-flex-grow-1 is-justify-content-center"> <!-- 検索バー --> </div> <div class="navbar-item is-flex-grow-1 is-flex-touch is-justify-content-center is-align-items-center p-0"> <!-- アイコンの集まり --> </div> </nav> navbar要素は3つの子要素をもち、navbar-brand要素がロゴにあたる部分で、navbar-menuが検索バーにあたる部分で、navbar-itemがアイコンの集まりにあたる部分です。 navbar要素のis-justify-content-space-aroundと各子要素のis-flex-grow-*で子要素を均等に並べています。 各子要素のis-justify-content-centerで各子要素内の要素を中央に配置しています。 Bulmaのnavbarはnavbar-brandだけがどの画面サイズでも表示され、それ以外要素はデスクトップサイズでしか表示されないようになっていますが、navbar-item要素はis-flex-touchを加えることでモバイルとタブレットでも表示されるようにしています。 navbar-item要素のis-align-items-centerでアイコンを上下に中央寄せしています。 navbar-item要素 html <div class="navbar-item is-flex-grow-1 is-flex-touch is-justify-content-center is-align-items-center p-0"> <a class="navbar-item"> <span class="icon is-medium"> <i class="fas fa-lg fa-home"></i> </span> </a> <a class="navbar-item is-hidden-desktop"> <span class="icon is-medium"> <i class="fas fa-lg fa-search"></i> </span> </a> <!-- 他のアイコン --> <!-- ドロップダウンメニュー --> <div> is-hidden-desktopで検索のアイコンが画面がデスクトップサイズ時は非表示になるようになっています。 ドロップダウンメニュー html <div class="navbar-item is-flex-grow-1 is-flex-touch is-justify-content-center is-align-items-center p-0"> <!-- 他のアイコン --> <!-- 他のアイコン --> <div class="navbar-item"> <div class="dropdown is-right"> <div class="dropdown-trigger"> <button class="button is-white has-text-grey-dark"> <span class="icon is-medium"> <i class="fas fa-lg fa-user"></i> </span> <span class="icon is-medium"> <i class="fas fa-angle-down"></i> </span> </button> </div> <div class="dropdown-menu" id="dropdown-menu"> <div class="dropdown-content"> <a class="dropdown-item"> プロフィール </a> </div> </div> </div> </div> <div> Bulmaのナビゲーションバーにはnavbar-dropdownがありますが、モバイルとタブレット表示ではドロップダウンメニュー内の要素が非表示にならずレイアウトが崩れてしまうのでdropdownを使用しています。 is-whiteでボタンのボーダーを見えなくしていて、has-text-grey-darkでアイコンの色を他の要素と同じ色に合わせています。 参考リンク

CSSフレームワークのBulmaを使用した際に長い文字列が原因でレイアウトが崩れるときの対処方法です。 対処方法 css .text-break { word-break: break-word; } text-breakクラスを長い文字列が入る親要素に追加します。 CodePenのデモ 上が長い文字列が原因でレイアウトが崩れている様子で、下が長い文字列があってもレイアウトが崩れていない様子です。 See the Pen bulma-text-break by kwtuku (@kwtuku) on CodePen.