レスポンシブ対等サイト構築学習
ハンバーガーメニュー(hamberger menu含む)
目標サイト
Arbor Digital
2021 08 04 令和３年８月４日（水）
ハンバーガーメニュー
【レスポンシブ対応】ハンバーガーメニューの作り方解説（jQuery）
動作確認。さらに理解を深める。
以下に、コピペ サイト有り。
jQuery Core – All Versions
jQuery のtoggleClassメソッドを使用して CSS を変更
2021 08 05 令和３年８月５日（木）
二つの方法
- jQueryのtoggleClassを使う方法（上）
- チェックボックスを使う方法（CSS）
[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法
重要（Stack Overflow）！！
Pure CSS Hamburger menu shows up when resizing viewport before disappearing
StackOverflow2.htmlにあり。一部修正して完動。。。
2021 08 06 令和３年８月６日（金）
画面ZOOMによるCSS切り替えポイント
@media only screen and (min-width: 600px) {
@media only screen and (min-width: 768px) {
Arbor Digital CSS 名前 blocks.style.build.css
style.css内にmenu関連有り。
（Site Navigationで分類）
/* Site Navigation—————————————————————————- */
/* Responsive Menu——————————————— */
ヘッダー含めて（site-header）考察要！！
メニュー関連JS
js/menu/responsive-menus.min.js
検索ワード（responsive-menus）
W3Schools
W3Schools
2021 08 09 令和３年８月９日（月）
引き続き、目標サイト解析中。その中で、style sheet内にjs-superfish有り。
検索すると、以下jQueryプラグインであることが判明。
簡単にドロップダウンメニューがつくれる「Superfish」
2021 08 114 令和３年８月１３日（金）
font-family
2020年に最適なfont-familyの書き方
2021 08 0 令和３年８月１４日（土）
clearfix
【CSS】今更clearfixについて解説してみる
web design trends
【2021年版】おしゃれな配色パターンが見つかる！カラーパレット人気ツール20個まとめ
2021 08 15 令和３年８月１５日（日）
w3schools.com
css navigation barにシンプルなResponsive Topnav有り、余計なものが無いので理解し易い。
Responsive Topnav
CSS Image Gallery
CSS Image Gallery
2021 08 16 令和３年８月１６日（月）
用語集VerUp予定
The border-radius Property
h1 {
color: #505050;/*文字色*/
padding: 0.5em;/*文字周りの余白*/
display: inline-block;/*おまじない*/
line-height: 2.3;/*行高*/
border: 2px solid #73AD21;
vertical-align: middle;
border-radius: 25px 25px 25px 25px;/*左側の角を丸く*/
}
テーブル装飾
w3school
CSS Table Style
2021 08 16 令和３年８月１８日（水）
W3SCHOOL CSS部分 一通り学習。。。
- CSS Website Layout（Responsive Website Layout有り 遷移が無ければ、これでおk）
- CSS Table （Responsive Table）
- CSS Flexbox
- CSS Grid
- CSS Responsive（Web Design）（ Grid-View）以下にリンク