HOME > Snow Notes Snow Notes This is Shotaro Kamimura's personal blog ウェブサイト制作 [CSS] CSSのuser agent stylesheetとは google chromeの検証で見た時などに現れる、CSSのuser agent stylesheetとは何か説明する。 また、user agent stylesheetを無効化し、デフォルトのCSSを消すための「リセ ... #HTML/CSS ウェブサイト制作 [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 by Shotaro ... #Javascript #jQuery ウェブサイト制作 [CSS] flexboxのレイアウト:要素を中央に寄せる 要素を端から真ん中に持ってくる時のCSSを整理する。 HTMLの記載 <div class="wrapper"> <div class="menu"> &l ... #flexbox #HTML/CSS ウェブサイト制作 [初心者向け] jQueryを使う時のファイルの読み込み方 jQueryを使う時に必要な下準備を整理する。 jQueryのスクリプトをHTMLファイルに読み込む。 下記のスクリプトをHTMLへ埋め込む。 バージョンについては最新版を常に確認しておく。 <script src ... #Javascript #jQuery ウェブサイト制作 [Bootstrap] グリッドを使う時に、col-xs-○が反映されない グリッドを使う時に、col-xs-○が反映されないという問題が発生。 原因 Bootstrap4から、Extra smallサイズの書き方が変わったのが原因だった。 Bootstrap3までは、「col-xs-○」の書き ... #Bootstrap #Grid #HTML/CSS #レスポンシブ ウェブサイト制作 [Bootstrap] グリッドシステムを実際に動かしてみる。 前回グリッドシステムについて理解を整理したので、今回実際にコードで動かしてみる。 [Bootstrap] グリッドシステムについての理解を整理 グリッドシステムについて理解を整理する。 動かし方に関して、参考にさせていた ... #Bootstrap #Grid #HTML/CSS ウェブサイト制作 [Bootstrap] グリッドシステムについての理解を整理 グリッドシステムについて理解を整理する。 グリッドとは何か サイトの横幅を均等に分けたラインのこと。 このラインを元にして、ウェブサイトのデザインを分割して配置させることができる。 Bootstrapでは12本のグリッド ... #Bootstrap #Grid #HTML/CSS ウェブサイト制作 [Javascript] Splideを使って、メイン画像を切り替える Splideを使用して、メイン画像をスライドで切り替える。 導入の方法はこちらにまとめた。 [Javascript] Splideを使って、スライドを作成する Splideを使って、画像のスライドを作成してみる。 完成形 ... #image #Javascript #画像スライド « Prev 1 … 16 17 18 19 20 … 31 Next »