[Bootstrap] グリッドシステムについての理解を整理
グリッドシステムについて理解を整理する。 グリッドとは何か サイトの横幅を均等に分けたラインのこと。 このラインを元にして、ウェブサイトのデザインを分割して配置させることができる。 Bootstrapでは12本のグリッド...
グリッドシステムについて理解を整理する。 グリッドとは何か サイトの横幅を均等に分けたラインのこと。 このラインを元にして、ウェブサイトのデザインを分割して配置させることができる。 Bootstrapでは12本のグリッド...
本番環境でスマホでみた時にボタンのCSS反応しない問題が起きた時の対処を整理。 起きたこと 本番環境でウェブサイトをみた時に、PCの画面ではボタンは反映されているものの、レスポンシブデザインではボタンの背景の色が反映され...
CSSでレスポンシブサイトを作る時に用意すべきステップを整理。 CSSでウェブサイトをレスポンシブ対応にするためには、ブレイクポイントを作成する必要がある。 そもそもブレイクポイントとは? ブレイクポイントとは、PCのデ...
container(コンテナ)とは何か。containerはどんな役割を果たしているのか。 ウェブサイトの横幅調整などでよく使われるHTML/CSSの.containerの役目について整理する。 .containerの役...
ボタンを押した時に文章をフェードイン、フェードアウトさせる。 See the Pen BaLMJaJ by Shotaro Kamimura (@shotarokamimura) on CodePen. フェードイン・ア...
Reactを使って、画面に文字を表示させてみる。 Reactで画面に表示させる方法は二種類 どうやらReactで画面に表示させるには、二種類の方法があるらしい。 CDNリンクを使用してReactを使用する npmでローカ...
HTMLを書き始めるために、最初に必要なタグの備忘録。 HTMLを書き始めるには、下記のタグが必要。 <!DOCTYPE html> <!DOCTYPE html>のことをドキュメントタイプという...
別ファイルに写真を入れた時のHTMLのパスの修正方法の備忘録。 HTMLファイルと写真が同じフォルダにある時 HTMLファイルと写真が同じフォルダにある時。 写真のパスの書き方としては、下記のようになる。 CSSに書く時...
CSSを使って、HTMLサイトのレスポンシブ対応の時にHTML構造のdiv要素の順番を入れ替えるやり方を整理する。 スマホ対応のサイトを作る時、レスポンシブの時だけHTMLのdiv要素の順番が入れ替わってしまう問題を解決...
横幅がスマホサイズになった時にヘッダーメニューをアイコンに変えて、レスポンシブ用のヘッダーメニューにするやり方を説明する。 完成のイメージ 完成系は下。ある幅までいくと、ヘッダーメニューが3本線のアイコンに変化する。 f...