20200630　自己紹介ＨＰの修正

修正事項 HTMLの文章構成全体的に書き直し。 CSSで編集する際に修正したい箇所が指定できない部分が多すぎたため。リストの修正箇条書きのアイコンに画像を使用と思ったが思うように出来ずに今日は失敗。明日でも明後日でもできるまで何度でも挑戦。画像…

2020-06-29

20200629　ナビゲーション設定のまとめ

①CSSでbackground-imageの切替えを用いた方法使用するもの a:hover メリット CSSに背景画像としてボタンの画像を設定するので、HTMLに手を加える必要性がない。デメリット印刷時に画像が表示されないことがあるらしい。 ②CSSでbackground-positionの切替…

2020-06-29

20200629　おさらいナビゲーションの奮闘④ 　onmouseover="this.src='img/画像ファイル'"

JSを使用してオンマウスボタンを切り替える方法最終問題 JSを使用してオンマウスボタンの切り替え今回はCSSの出番はリストのリセットと背景色の設定等で切り替えに携わる入力は無し。 HTML側のimgタグにonmouseoverとonmouseoutの打ち込みがメインになる。 <body></body>…

2020-06-28

20200628　おさらいナビゲーションの奮闘③　img:{opacity:0.7;}　vertical-align: bottom;

ナビゲーションのボタンをオンマウス時に透過させる方法と貼った画像の下の部分の隙間をなくす方法今回の問題オンマウス時に透過させて背景色を写す方法ナビゲーションの設定いつもの背景設定 .nav{background-color:#E91E63; } いつものリストリセット…

2020-06-26

20200626　おさらいナビゲーションの奮闘②　background-position: 0 0　text-indent:-9999px　

CSSスプライトを使ったアイコン表示引き続きナビゲーション作成今回の問題炭酸飲料っぽい名であるが簡単に言うとマウスカーソルを合わせた時の表示の切り替えがimgフォルダに入っている１枚の画像だけで済む方法。（今まではボタンの背景画像１枚、切り…

2020-06-26

20200626　おさらいナビゲーションの奮闘①　display: block;　:hovor

とりあえず出来上がったナビゲーションナビゲーションの設定（CSSにて） ①ナビゲーションの背景色の設定 .nav{ background-color: #4caf50; margin-top: 30px;} ②ナビゲーションのスタイルをリセットする方法 .nav ul{list-style: none;→・を消すpadding-l…