2023/10/15 VScode - ポートフォリオ制作
・デザインカンプの縦横比
・レスポンシブデザインのブレイクポイントについて
PC (960) : 950~1200px
タブレット(520) : 600~834px
スマホ (320) : 375~414px
・フッターに「TOP」ボタンの実装
https://rilaks.jp/blog/pagetop-css/
・ハンバーガーメニューの作り方
☆https://web-camp.io/magazine/archives/88361
https://yypoup.com/display-hamburger-menu-with-css/
↪︎javascript「ページ内リンクに飛ぶ、メニューを消す」
https://aw1.jp/javascript/【脱jquery】cssで動作するハンバーガーメニューでペー/
・ブレイクポイントを幾つ作成するか
↪︎出来るだけ少なくするには
・マーカーで引いたような下線
「background: linear-gradient(transparent 空白にしたい線の割合、色、0%);」
/* 30%下線にマーカー表示 */
.marker-border-3{
background: linear-gradient(transparent 70%, #ffcccc 0%);
}
・テキストに下線
text-decoration: underline;
text-decoration-color: #8A9FCC;
text-decoration-thickness: 7px;
——
-
680 メインビジュアルの画像を、(ブレイクポイント1280px)縮小の際に右側固定で左からカットするには。
-
680 / mainvisual p : 文字位置
-
680 / about text : テキスト画像の修正
お問合せクリックでメール起動
——
company : 1280 / 縦並び
footer : 1280 / 余白
company : 900 文字を中央配置
header : 900 / ハンバーガーメニュー
news list : 900 / 縦並
footer : 900 / フッター文字サイズ
*about : 600 / 文章
about : 414 / 文章
<変更>
company - 枠線あり
footer - 配置変更