[jQuery]ポップアップで出てくる「モーダル」を作成する
jqueryでポップアップででてくるモーダルの作成手順を紹介する。 モーダル表示に役立つ情報を共有。まずは手本のシンプルモーダルの完成形はこちら。 See the Pen simple modal by Shotaro ...
jqueryでポップアップででてくるモーダルの作成手順を紹介する。 モーダル表示に役立つ情報を共有。まずは手本のシンプルモーダルの完成形はこちら。 See the Pen simple modal by Shotaro ...
要素を端から真ん中に持ってくる時のCSSを整理する。 HTMLの記載 まずは何も場所指定をしない場合は、左端に配置される。 CSSを配置 CSSを下記のように変更 justfy-contentは横方向に、align-it...
jQueryを使う時に必要な下準備を整理する。 jQueryのスクリプトをHTMLファイルに読み込む。 下記のスクリプトをHTMLへ埋め込む。 バージョンについては最新版を常に確認しておく。 HTMLへの埋め込みはhea...
グリッドを使う時に、col-xs-○が反映されないという問題が発生。 原因 Bootstrap4から、Extra smallサイズの書き方が変わったのが原因だった。 Bootstrap3までは、「col-xs-○」の書き...
前回グリッドシステムについて理解を整理したので、今回実際にコードで動かしてみる。 [Bootstrap] グリッドシステムについての理解を整理 グリッドシステムについて理解を整理する。 動かし方に関して、参考にさせていた...
グリッドシステムについて理解を整理する。 グリッドとは何か サイトの横幅を均等に分けたラインのこと。 このラインを元にして、ウェブサイトのデザインを分割して配置させることができる。 Bootstrapでは12本のグリッド...
Splideを使用して、メイン画像をスライドで切り替える。 導入の方法はこちらにまとめた。 [Javascript] Splideを使って、スライドを作成する Splideを使って、画像のスライドを作成してみる。 完成形...
Splideを使って、画像のスライドを作成してみる。 完成形はこちら インストール インストールする。 ダウンロードはここから可能。 https://github.com/Splidejs/splide/releases...
githubの使い方を整理。 「push」といわれるもので、自分がローカルで編集したファイルを、github上で更新するための手順を整理。 レポジトリをすでに作成して、ファイルをアップロードしていることを前提とする。 g...
本番環境でスマホでみた時にボタンのCSS反応しない問題が起きた時の対処を整理。 起きたこと 本番環境でウェブサイトをみた時に、PCの画面ではボタンは反映されているものの、レスポンシブデザインではボタンの背景の色が反映され...