HOME > snownotes snownotes [jQuery]ある高さまでスクロールした時ヘッダーの文字の色や背景色を変える 固定headerをある高さまでスクロールすると、ヘッダーの文字または背景色が変化する実装について解説。 ピクセルなどで位置で色を変えるように指定し、ある高さまでスクロールすると、cssで指定したクラス ... #header #Javascript #jQuery [CSS] position fixedとposition absoluteの使い方 CSSでposition fixedとposition absoluteの使い方について説明する。 画像に文字を重ねてレイアウトした時に、スクロールしても高さが固定されるもの（ヘッダー）と固定されない ... #HTML/CSS #position [jQuery]ポップアップで出てくる「モーダル」を作成する jqueryでポップアップででてくるモーダルの作成手順を紹介する。 モーダル表示に役立つ情報を共有。まずは手本のシンプルモーダルの完成形はこちら。 See the Pen simple modal b ... #Javascript #jQuery [CSS] flexboxのレイアウト：要素を中央に寄せる 要素を端から真ん中に持ってくる時のCSSを整理する。 HTMLの記載 まずは何も場所指定をしない場合は、左端に配置される。 CSSを配置 CSSを下記のように変更 justfy-contentは横方向 ... #flexbox #HTML/CSS [初心者向け] jQueryを使う時のファイルの読み込み方 jQueryを使う時に必要な下準備を整理する。 jQueryのスクリプトをHTMLファイルに読み込む。 下記のスクリプトをHTMLへ埋め込む。 バージョンについては最新版を常に確認しておく。 HTML ... #Javascript #jQuery [Bootstrap] グリッドを使う時に、col-xs-○が反映されない グリッドを使う時に、col-xs-○が反映されないという問題が発生。 原因 Bootstrap4から、Extra smallサイズの書き方が変わったのが原因だった。 Bootstrap3までは、「co ... #Bootstrap #Grid #HTML/CSS #レスポンシブ [Bootstrap] グリッドシステムを実際に動かしてみる。 前回グリッドシステムについて理解を整理したので、今回実際にコードで動かしてみる。 [Bootstrap] グリッドシステムについての理解を整理 グリッドシステムについて理解を整理する。 動かし方に関し ... #Bootstrap #Grid #HTML/CSS [Bootstrap] グリッドシステムについての理解を整理 グリッドシステムについて理解を整理する。 グリッドとは何か サイトの横幅を均等に分けたラインのこと。 このラインを元にして、ウェブサイトのデザインを分割して配置させることができる。 Bootstrap ... #Bootstrap #Grid #HTML/CSS [Javascript] Splideを使って、メイン画像を切り替える Splideを使用して、メイン画像をスライドで切り替える。 導入の方法はこちらにまとめた。 [Javascript] Splideを使って、スライドを作成する Splideを使って、画像のスライドを作 ... #image #Javascript #画像スライド [Javascript] Splideを使って、スライドを作成する Splideを使って、画像のスライドを作成してみる。 完成形はこちら インストール インストールする。 ダウンロードはここから可能。 https://github.com/Splidejs/splid ... #image #Javascript #画像スライド « Prev 1 … 18 19 20 21 22 … 33 Next »
