CSS

webpack5でJSとSassをコンパイル(CSSを別ファイルに出力)

webpack5を使ってJavaScriptとSassをコンパイルする方法を記録しておきます。 この記事では、以下の項目をコンパイル条件としています。 JavaScriptとCSSを別々のファイルで出力する。 出力先のCSSに自動でベンダープレフィックスを追加する。 production(本番環境用に)出力する場合のみコードを圧縮(軽量化)する。 development(開発環境用に)出力する場合 […]

Swiper.jsとBootstrapでレイアウトが崩れた時の話

Bootstrapのrowとcolを使ったレイアウトの中でSwiper.jsを使おうとしたら、幅がおかしくなった。 現象 rowの中にcolを3つ入れて、横並びレイアウトをしていて、そのcolの中にSwiper.jsを入れたら、そのcolが横幅いっぱいに広がってしまった。 原因 flex関連の干渉が原因? 解決方法 以下のように、swiper-wrapperのpositionをabsoluteにす […]

npmでBootstrapをインストールしてWebpackでコンパイルする方法(同時にjQueryも)

ホームページを作る時、BootstrapとJQueryを使う機会が多いんですが、今までは、それぞれのCDNから読み込んで使っていました。 今回は、npmを使ってプロジェクトに直接インストールしてみます。Bootstrapは、JQueryに依存しているので、JQueryも一緒にインストールします。 全体的な流れとしては、 ・node.js(npm)のインストール ・webpackの導入 ・Boots […]

リスト < li > タグの横並び時の隙間をなくす方法

リストタグはメニューなどでよく使いますが、リストをdisplay:inline-blockを使って横並びにするとリストとリストの間に隙間ができてしまいます。それを簡単な方法で解決します。 解決方法 CSS(スタイルシート)で、親のulにfont-size: 0を入れる。 [crayon-6176bb208aeaa206755855/] 他にもいくつか方法があるようですが、私はこの方法を使っています […]