home以外のページのひな形

このページ(試作5)のコンテンツについて

この試作5のコンテンツは制作メモのみ(Home・Sample)です。試作3・試作8などにはアクセスマップ・メールフォーム・フォトギャラリーなどがありますのでご参照ください。

□□□試作3へのリンク□□□

□□□試作8へのリンク□□□

headerをhomeと違うサイズに

headerそのものでなく、header下部のmainの位置について、position: absolute; top: 320px;などと位置を高めに指定することで結果としてheaderの縦の長さを短くした。

レスポンシブ対応

min-width:480pxとmin-width:960pxをブレイクポイントとしてレスポンシブ対応できるようcss記述してみた。asideではcolorbox用の題名と別にflexにしてasideが見える時用の題名と2つにした。

レスポンシブ対応以外での勘違い

レスポンシブ対応以外で、ある要素に何か記述し直した場合、レスポンシブでは同じ要素について複数回記述している場合が多いので、それぞれについて記述変更しないといけないことが多い。次の項目と共通する部分がある。

asideに設置したcolorboxについて失敗

homeのhtmlでcolorboxについて記述したが、他のページに反映されない→なぜだろうと相当悩んでから気づいたが、各htmlに設置しているので、それぞれのhtmlでcolorboxについて記述し直さないとだめなのは当たり前と気づいた。

position: sticky;

#display-noneにposition: sticky;を指定したが、top: 100px;などの指定がないと効かない。

h3