ALICE+サポート ユーザー助け合い掲示板 TOPページ ユーザー助け合い掲示板 ノートのカレンダータグについての質問 ユーザー助け合い掲示板 『ノートのカレンダータグについての質問』へのコメント投稿 記事 1 へのレス:>>0 >曜日の部分 >> 日 月 火 水 木 金 土 ←ここ >を罫線で囲むことは可能ですか? 可能です。 CSSで罫線(border)をつけられます。 #1️⃣【一覧画面レイアウト】or【ノート画面レイアウト】にて、カレンダー独自タグ部分を以下に書き換え ━━━━━━━━━━ <div class="calendar">#cal#</div> ━━━━━━━━━━ ※↑既存のデザインに影響しないよう、class名で差別化しているだけです #2️⃣CSS(※)には以下を入れる ━━━━━━━━━━ .calendar table{ border-collapse:collapse; } .calendar tr:nth-child(2){/* カレンダーの曜日部分の */ border:1px solid #000;/* 線の:太さ_種類_色 */ } .calendar td{ padding:8px;/* セル内の余白 */ } ━━━━━━━━━━ ※どこに書き込むか分からなかったらとりあえず【CSSファイル編集】へ書き込んでください ※なるべく、すでにある記述の“末尾に”書き足してください 曜日を囲む線のデザインに関しては、 > border:1px solid #000;/* 線の:太さ_種類_色 */ の部分をご自由に書き換えてください。 *** 補足 *** >🔵セル内の余白の指定がなぜ必要か 上記のCSSを書き込むと、セルとセルの間隔が狭まる =日付のリンクが押しづらくなるため、です。 余白幅はご自由に変更してください。 なおセル同士の間隔が狭まるのは、曜日行を罫線で囲むにあたり 「border-collapse:collapse(隣接するセルのボーダーを重ねて表示する)」 というスタイル指定をしているせいです。 ただもしも、既存のデザインと干渉してデザイン崩れが起きる……ということがあったら、 * .calendar td { * padding:8px;/* セル内の余白 */ * } の部分は削除してもOKです。 ▼お名前 ※最大20文字 ▼コメント ※最大10000文字 HTMLタグは使えません>>1 ▼画像添付(4個まで選択可) サクッとコメント スレッドへ 掲示板TOPへ ALICE+サポート