xhml・html

レスポンシブWebデザイン 2カラムメニュー有り Top Home

2019年03月16日
ネットビジネス便利ツール】のモバイル対応、二番目に簡単そうな2カラムページに移ります。
メインコンテンツの左側にメニュー一覧が表示されるページです。

トップページ、各コンテンツページ、更新履歴、お問い合わせ入力画面などがこのタイプです。

PCとタブレットは今までの様に2カラムにします。
写真

スマートフォンでは左メニューの内容は隠しておき、必要に応じて表示されるようにします。横長のバーに左メニューの内容を表示するリンクを表示、クリックすると左メニューの内容が表示されます。
写真


メニューの前に、今まではTopへのリンクをページの一番下に表示していましたが、これを機に右下に円で表示するように変更してみました。

実際の画面です。
写真

これはPCとタブレットの時にだけ表示します。

円はcssで書いています。CSSで円を描く方法:文字を中央配置するには?枠線のつけ方は?を参考にしました。
サルワカには参考になる有益なコンテンツが沢山あります!

html -------------------------------------------------
<body>
<!-- ページの一番上に目印になるタグを配置 -->
<div name="pagetop" id="pagetop"></div>
ページの中身

<div class="page_top">
<a href="#pagetop">Top↑</a>
</div>
------------------------------------------------------

css ---------------------------------------------------
.page_top {
z-index: 2; /* フッタが上に来るのを防ぐため */
display: none;
}

@media (min-width: 768px) {
.page_top {
position: fixed;
bottom: 20px;
right: 10px;
/* 円を描画 */
width: 70px;
height: 70px;
border-radius: 50px;
/* 中央に文字を表示 */
line-height: 70px;
text-align: center;
vertical-align: middle;
display: block;
background-color: #808080;
opacity: 0.5; /* 透明度 */
margin: 0px;
padding: 0px;
}

.page_top a {
color: white;
text-decoration: none;
}

.page_top a:hover {
color: white;
text-decoration: underline;
}
}

/* フッター */
#footer {
z-index: 1; /* モバイル時フッタが上に来るのを防ぐため */
}
------------------------------------------------------

ページを一番下までスクロールするとリンクがフッタに隠れてしまうので、.page_topと#footerにz-indexを設定しました。数字が大きいほど上に表示されます。


同じ要領で左側にHomeリンクも表示してみました。
写真


次はメニューについてまとめます。