Technology

no image

Technology

[CSS] CSSで何も設定してないのに画像周りに勝手に空白が起きてしまう時の対処

2021/1/23  

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

no image

Technology

[jQuery] ある高さまでスクロールした時にヘッダーの色をかえる。

2021/1/23  

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

no image

Technology

[CSS] positionを使って、画像に文字を重ねてレイアウトする

2021/1/23  

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

no image

Technology

[jQuery]ポップアップで出てくるメニュー、「モーダル」を作成する

2021/1/22  

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

no image

Technology

[CSS] flexboxで要素を、画面の真ん中に持ってくる

2021/1/22  

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

no image

Technology

[jQuery] jQueryを使う際の下準備

2021/1/22  

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

no image

Technology

[Bootstrap] グリッドを使う時に、col-xs-○が反映されない

2021/1/21  

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

no image

Technology

[Bootstrap] グリッドシステムを実際に動かしてみる。

2021/1/21  

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

no image

Technology

[Bootstrap] グリッドシステムについての理解を整理

2021/1/21  

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

no image

Technology

[Javascript] Splideを使って、background-imageでメイン画像を切り替える

2021/1/21  

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