このテンプレートの使い方について
このサイトは、学習ノートのような使い方をするために設計しました。
レイアウトは最低限にし、ヘッダー、サイドナビゲーション、メインセクションの3つです。
各種タグの設定について
これはh2の設定です。
これはh3の設定です。
これはh4の設定です。
これはspanを指定している状態です。文字が太くなります。
これはspanにclass="red"を指定している状態です。文字が太く赤くなります。
これはspanにclass="green"を指定している状態です。マーカーになります。
aタグにclass="link"でリンクアイコンとアンダーラインが設定できます。
POINT!
これはdivにclass="point-box"を指定しています。
boxには「width: fit-content;」を指定しています。
削除することで幅いっぱいに枠線を伸ばせます。
メモ風のボックスです
divを2つ用意しclass="memo"の中にdivclass="memo-box"を指定しています。
メモの紙とテープの色はCSSで変更できます。好きな色にしてください。
項目の追加について
セクション、サイドメニュー、img画像を追加する際の設定についてです。
セクションの追加について
新しい項目を追加する場合はsectionを新しく作り、idとクラスを設定してください。
また、セクションの区切りにはボーダーが入る設定になっています。
ボーダーを引きたくない場合は、sectionにclass="no-border"を指定してください。
POINT!
sectionに必須の設定: id="任意のid名" class="section"
spanclass="section"はスクリプトの動作に必要な設定です。なくても自動スクロールに影響はありませんが、これがないとサイドメニューの自動ハイライトが機能しません。
注意点として、スクロール時にヘッダーの高さ分を余計にスクロールするように設定しています。
そのため、サイドメニューの「使いかた」から、一番最初の「このサイトの使い方について」にスクロールさせる場合は、リンク先として一番上のsectionではなく「main」そのものを指定しないとやや下がった状態になります。そのため、mainタグに「top」というidを設定しています。
また、付箋の文字をハイライトしたくない場合は、リンク先にidのみを設定し、class="section"をつけなければ大丈夫です。
サイドメニューの追加について
サイドメニューは、メニュー項目をクリックした際に
対応するセクションにスクロールさせたいので、aタグでページ内リンクを設定します。
指定するリンク先はsectionにつけたid名と一致させてください。
また、aタグは必ずddの中に入れてください。
POINT!
aに必須の設定: href="#セクションのid名" class="nav-item" onclick="changeActive('セクションのid名')"
この設定をすると、サイドメニューをクリックしたときに、自動で対応セクションまでスクロールします。また、対応するセクションが画面の上半分に表示されていると、該当するサイドメニューの項目名が赤色になります。
img画像の追加方法について
画像にはあらかじめフレームとドロップシャドウのスタイルを適応しています。
このフレームは画像サイズにフィットするようになっています。
また、class="photo"を指定したdiv内に設置することで、位置の調整ができます。
左端配置(通常):class="photo"
中央配置:class="photo-center"
右端配置:class="photo-right"
