ますます多くのニュースサイトやブログが長い足布に変わり、記事から記事へと長い間垂直に巻かなければなりません。スクロールを容易にするために、一部のサイトでは記事の一部をスポイラーの下に隠しています。他のサイトはフィードに記事の一部を表示し、読むために別のページに移動することを余儀なくされています。
横線を使ってみませんか？ブラウザ開発者は、記事を水平に並べ、記事間を簡単に移行するのに十分なCSSツールを提供しています。
CSSで動作し、次のプロパティを持つ最小限のデモを作成しました。
- 記事は横に並べられます。
- 各記事の垂直スクロールは個別であるため、記事の一部をスポイラーの下に隠す必要はありません。
- Shiftキーを押しながらマウスホイールをスクロールするか、タブレットで記事を左にスワイプすると、前の記事のどこからでも次の記事に移動できます。
この記事では、横長のブログに使用されるCSSを分析します。
<html>
<head>
<title>horizontal blog demo</title>
<link href="horizontal-blog.css" rel="stylesheet" media="screen">
<link href="css-min-fix.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="hb-viewport">
<div class="hb-container">
<article class="hb-page">
<h1>Lorem ipsum dolor sit amet</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo integer malesuada nunc vel risus...
</article>
<article class="hb-page">
<h1>Consectetur a erat nam at lectus urna duis</h1>
Consectetur a erat nam at lectus urna duis. Cursus vitae congue mauris rhoncus aenean. Quis auctor elit sed vulputate mi sit amet mauris commodo. Odio pellentesque diam volutpat commodo sed...
</article>
</div>
</div>
</body>
</html>
CSSを解析する
horizontal-blog.css：
/*
これはユーザーが記事のコンテンツを読むためのウィンドウです。当初、その機能はルート要素によって実行されていましたが、htmlドキュメントの構造を取り除くことにしました。
*/
.hb-viewport{
/*
ボディのcssスタイルに触れることなく、ボディのデフォルトのインデントを取り除きます。
*/
position: absolute;
top: 0;
left: 0;
/*
ビューポートのサイズをウィンドウの表示領域のサイズに設定して、水平方向にスクロールできるようにします。
*/
width: 100vw;
height: 100vh;
/*
.
*/
overflow-x: auto;
overflow-y: hidden;
/*
.
*/
scroll-snap-type: x mandatory;
/*
Firefox . .hb-viewport .
*/
scrollbar-width: none;
}
/*
. .hb-viewport
*/
.hb-viewport:hover{
scrollbar-width: auto;
}
/*
display: flex;
.hb-container .
*/
.hb-container{
display: flex;
}
/*
.hb-page .
*/
.hb-page{
/*
.
*/
max-height: 100vh;
/*
.
*/
overflow-y: auto;
/*
.hb-page.
*/
scroll-snap-align: center;
/*
80 100vw.
*/
min-width: min(80ch, 100vw);
padding: 0 calc((100vw - 80ch) / 2);
}
CSS
Firefox Android 68.11. css min()
. @supports
@media
.
css-min-fix.css:
/*
min.
*/
@supports not (min-width: min(80ch, 100vw)) {
/*
100vw.
*/
.hb-page{
min-width: 100vw;
}
/*
80 80 .
*/
@media screen and (min-width: 80ch) {
.hb-page{
min-width: 80ch;
}
}
}
これで、ブログ記事が水平に並べられ、左から右に巻くことで記事間を移動できます。さて、記事自体は独立して上下にスクロールされ、前の記事のどの部分からでも次の記事の最初に進むことができます。