CSS jQuery HTML

レスポンシブ対等サイト構築学習
ハンバーガーメニュー(hamberger menu含む)

目標サイト
Arbor Digital

2021 08 04 令和3年8月4日(水)

ハンバーガーメニュー
【レスポンシブ対応】ハンバーガーメニューの作り方解説(jQuery)
動作確認。さらに理解を深める。

以下に、コピペ サイト有り。
jQuery Core – All Versions

jQuery のtoggleClassメソッドを使用して CSS を変更

2021 08 05 令和3年8月5日(木)

二つの方法

  1. jQueryのtoggleClassを使う方法(上)
  2. チェックボックスを使う方法(CSS)

[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法

重要(Stack Overflow)!!
Pure CSS Hamburger menu shows up when resizing viewport before disappearing
StackOverflow2.htmlにあり。一部修正して完動。。。

2021 08 06 令和3年8月6日(金)

画面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 令和3年8月9日(月)

引き続き、目標サイト解析中。その中で、style sheet内にjs-superfish有り。
検索すると、以下jQueryプラグインであることが判明。
簡単にドロップダウンメニューがつくれる「Superfish」

2021 08 114 令和3年8月13日(金)
font-family
2020年に最適なfont-familyの書き方

2021 08 0 令和3年8月14日(土)
clearfix
【CSS】今更clearfixについて解説してみる

web design trends
【2021年版】おしゃれな配色パターンが見つかる!カラーパレット人気ツール20個まとめ

2021 08 15 令和3年8月15日(日)

w3schools.com
css navigation barにシンプルなResponsive Topnav有り、余計なものが無いので理解し易い。

Responsive Topnav
CSS Image Gallery
CSS Image Gallery

2021 08 16 令和3年8月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 令和3年8月18日(水)

W3SCHOOL CSS部分 一通り学習。。。

  • CSS Website Layout(Responsive Website Layout有り 遷移が無ければ、これでおk)
  • CSS Table (Responsive Table)
  • CSS Flexbox
  • CSS Grid
  • CSS Responsive(Web Design)( Grid-View)以下にリンク

Responsive Web Design – Grid-View