2018年11月21日 / 最終更新日 : 2018年11月25日 HTML & CSS 【CSS】box-sizingプロパティ ボックスモデルを使用したレイアウトが崩れてしまう場合など borderとpaddingで指定する幅の取り方を変えることができる box-sizingプロパティについてメモ。 CSSのボックスモデルを使ったレイアウトでは通 […]
2018年9月2日 / 最終更新日 : 2018年9月2日 HTML & CSS viewportとメディアクエリーをもう一度理解する レスポンシブウェブデザインを実現する上で欠かせないviewportとメディアクエリの関係について、 きちんと理解しておくためにメモ。 まずはそもそも、 iPhoneなどのスマートフォン、タブレットの主要機種にはPCでの閲 […]
2018年8月11日 / 最終更新日 : 2018年8月21日 JavaScript 【jQuery】画面幅ごとに処理内容を変える レスポンシブデザインでPCとスマホ等画面幅ごとに異なるレイアウトにするように、 jQuery (JavaScript) の効果、処理内容も画面サイズ別に変更させる方法についてメモします。 今回はクリックした画像が画面中央 […]
2018年7月21日 / 最終更新日 : 2018年8月27日 HTML & CSS 【Flexbox】display : flexで要素を均等に横並びにする ページ内の要素を横並びにする際、回り込みを指定するfloatプロパティを使わず、 CSSのFlexbox（CSS Flexible Box Layout Module）という機能を使い、ブロックコンテンツを横並びにしてい […]
2018年7月16日 / 最終更新日 : 2018年8月14日 JavaScript ボタンをハンバーガーメニューにする モバイルサイズのトグルメニューのボタンを、よく見かける３本線のハンバーガーメニューにデザインします。 今回はwebアイコンフォントのfontawesomeを使用して実現します。 – 完成図 – な […]
2018年6月29日 / 最終更新日 : 2019年12月29日 フロントエンド ナビメニューをトグル型にする モバイル閲覧時など画面サイズが小さいときにだけ、ナビゲーションメニューをトグル型に変更します。 【PCサイズ】 （ヘッダー内にナビゲーションメニュー） 【モバイル】 メニューが閉じた状態 メニューを開いた状態。 ボタ […]
2018年6月10日 / 最終更新日 : 2019年12月29日 フロントエンド floatによるレイアウト崩れをclearfixで解決する float プロパティで要素を横並びにしたレイアウトの際、 ・後ろに続く要素が意図せず回り込む。 ・背景色が適用されなくなる。 これらの問題を解決するため、clearfix という定番の方法を記します。 見本となるレイア […]
