Technology

画像などを貼り付けた時に、自分では何もCSSを設定していないのに、画像周りに勝手に空白が起きてしまう時がある。 そんな時の対処法を整理した。 原因は何か？ chromeのデベロッパーツールで確認すると ...

ある高さまでスクロールした時に、ヘッダーの色を変えるようにする。 See the Pen test for changing color on header by Shotaro Kamimura ( ...

今回画像に文字を重ねるレイアウトを作ってみたので、その整理。 完成形はこちら。 画像に文字を重ねてレイアウトした時に、スクロールしても高さが固定されるもの（ヘッダー）と固定されないもの（メッセージ部分 ...

モーダルを作成してみたので、手順を整理する。 完成形はこちら。 jQueryの下準備 jQueryを読み込むための準備は別途下記にて整理した。 [jQuery] jQueryを使う際の下準備jQuer ...

要素を端から真ん中に持ってくる時のCSSを整理する。 HTMLの記載 <div class="wrapper"> <div class="menu&qu ...

jQueryを使う時に必要な下準備を整理する。 jQueryのスクリプトをHTMLファイルに読み込む。 下記のスクリプトをHTMLへ埋め込む。 バージョンについては最新版を常に確認しておく。 < ...

グリッドを使う時に、col-xs-○が反映されないという問題が発生。 原因 Bootstrap4から、Extra smallサイズの書き方が変わったのが原因だった。 Bootstrap3までは、「co ...

前回グリッドシステムについて理解を整理したので、今回実際にコードで動かしてみる。 [Bootstrap] グリッドシステムについての理解を整理グリッドシステムについて理解を整理する。 動かし方に関して ...

グリッドシステムについて理解を整理する。 グリッドとは何か サイトの横幅を均等に分けたラインのこと。 このラインを元にして、ウェブサイトのデザインを分割して配置させることができる。 Bootstrap ...

Splideを使用して、メイン画像をスライドで切り替える。 導入の方法はこちらにまとめた。 [Javascript] Splideを使って、スライドを作成するSplideを使って、画像のスライドを作成 ...