…右半分に置く 幅・高さ・文字の大きさはその場で変えられる:
行は折り返さないので、横に長い行は左右にスクロールして読む。
隣に div.right などを並べるとき、幅と余白の合計が 100% を超えると
float が下に落ちて「消えた」ように見える。そうならないよう、
余白のぶんを幅から引いてある(calc の部分)。 */
.reveal pre.half {
--code-gap: 1.2em;
--code-width: calc(49.7% - var(--code-gap));
margin: 0 var(--code-gap) var(--p-gap, 1em) 0; /* 右の要素との間を空ける */
float: left;
}
.reveal pre.half.right-side {
float: right;
margin: 0 0 var(--p-gap, 1em) var(--code-gap);
}
/* code-include.js が data-label で入れるファイル名の見出し。
暗いコード領域の外(すぐ上)に1行として出る。 */
.reveal pre .code-name {
display: block;
font-family: var(--font-mono);
font-size: 0.9em;
line-height: 1.4;
color: #6b6257;
text-align: left;
padding: 0 0 2px 2px;
}
/* float の後で本文を下に戻したいときに挟む: */
.reveal .clear {
clear: both;
}
.reveal code,
.reveal kbd,
.reveal samp {
font-family: var(--font-mono); }
/* highlight.js が付与する span にも確実に効かせる */
.reveal pre code,
.reveal pre code span {
font-family: var(--font-mono); }
/* スクロールするのはこの code のほう。
white-space: pre で行を折り返さないので、はみ出した分は横スクロールになる。
縦の高さは --code-height で変える。 */
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: var(--code-height, 400px);
white-space: pre;
word-wrap: normal; }
/* 行番号を付けたとき(data-line-numbers)は中身が table になるので、
table が縮まないようにしておかないと横スクロールが効かない */
.reveal pre code table.hljs-ln {
width: max-content;
min-width: 100%;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0; }
.reveal table th {
font-weight: bold; }
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; }
.reveal table th[align="center"],
.reveal table td[align="center"] {
text-align: center; }
.reveal table th[align="right"],
.reveal table td[align="right"] {
text-align: right; }
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; }
.reveal sup {
vertical-align: super; }
.reveal sub {
vertical-align: sub; }
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top; }
.reveal small * {
vertical-align: top; }
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: #3b759e;
text-decoration: none;
-webkit-transition: color .15s ease;
-moz-transition: color .15s ease;
transition: color .15s ease; }
.reveal a:hover {
color: #74a7cb;
text-shadow: none;
border: none; }
.reveal .roll span:after {
color: #fff;
background: #264c66; }
/*********************************************
* IMAGES
*********************************************/
.reveal section img {
/*margin: 15px 0px;
background: rgba(255, 255, 255, 0.12);
border: 0px solid #333;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);*/
}
.reveal section img.plain {
border: 0;
box-shadow: none; }
.reveal a img {
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
border-color: #3b759e;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls .navigate-left,
.reveal .controls .navigate-left.enabled {
border-right-color: #3b759e; }
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #3b759e; }
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #3b759e; }
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: #3b759e; }
.reveal .controls .navigate-left.enabled:hover {
border-right-color: #74a7cb; }
.reveal .controls .navigate-right.enabled:hover {
border-left-color: #74a7cb; }
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: #74a7cb; }
.reveal .controls .navigate-down.enabled:hover {
border-top-color: #74a7cb; }
/*********************************************
* PROGRESS BAR
*********************************************/
/* 太さは reveal 既定の clamp(3px, .75vmin, 10px) だと画面によって 6〜8px。
変えたいときは変数だけ書き換える: :root { --progress-height: 6px; } */
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
height: var(--progress-height, 15px); }
/* reveal 6 はバーの伸縮を width ではなく transform: scaleX() で行う。
ここを width のままにしていると transition が効かず、バーが瞬間移動する
(reveal 4 時代の記述の残り。2026-08-11 に transform へ修正)。 */
.reveal .progress span {
background: #3b759e;
transition: transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/* ページ番号を、右下の矢印(controls)のかたまりの**中心**に置く。背景は透過。
位置の根拠(reveal.css を Chromium で実測):
矢印は 36px 四方。上下の矢印の横位置 = 画面右から 58px が「中心の列」、
左右の矢印の縦位置 = 画面下から 40px が「中心の行」。
right/bottom だけだと要素の *端* がその点に合ってしまうので、
transform: translate(50%, 50%) で *中心* を合わせている。
注意: --r-controls-spacing を calc() で使ってはいけない。
この変数の値は `.8em` などの相対値で、em は参照する側(ここでは
font-size:20px の .slide-number)の基準で解釈されるため 2 倍にずれる。
微調整は変数で:
:root { --slide-number-right: 58px; --slide-number-bottom: 40px; }
既定(右下すみ)に戻すなら right/bottom/transform の3行を消す。 */
.reveal .slide-number {
color: #51483D;
background-color: transparent;
font-size: 20px;
right: var(--slide-number-right, 58px);
bottom: var(--slide-number-bottom, 58px);
transform: translate(50%, 50%);
pointer-events: none; /* 矢印のクリックを邪魔しない */
}
/* user define*/
/* 段落の下に少し余白を空ける。
1つぶんの高さは line-height と同じ 2em なので、その半分の 1em を入れる。
広げたい/詰めたいときは --p-gap を変える(0 にすると以前と同じ隙間なし):
:root { --p-gap: 0.5em; } 全体
そのスライドだけ */
.reveal p {
margin: 0 0 var(--p-gap, 0.5em);
line-height: 1.75em;
text-align:left;
}
.reveal p.left {
text-align:left;
}
.reveal p.right {
text-align:right;
}
.reveal p.center {
text-align:center;
}
.reveal p.small {
font-size: 0.9em;
}
.reveal p.tiny {
/* margin: 0px 0; */
font-size: 0.8em;
}
.reveal p.body{
line-height: 2em;
}
.reveal p.body1{
line-height: 1.6em;
}
.reveal div.positionfix{
position:absolute;
}
.reveal figure.positionfix{
position:absolute;
}
.reveal figure.trimming{
overflow: hidden;
}
.reveal figcaption {
font-size:18px;
}
.reveal p.ref{
font-family: 'Helvetica', sans-serif;
font-size: 13px;
text-align:right;
}
.reveal p.ref-left{
font-family: 'Helvetica', sans-serif;
font-size: 13px;
text-align:left;
padding:20px;
}
.reveal p.ref-right{
font-family: 'Helvetica', sans-serif;
font-size: 13px;
text-align:right;
padding:20px;
}
.reveal div.right{
float:right;
width:49.7%;
}
.reveal div.left{
float:left;
width:49.7%;
}
.reveal div.center{
float:cener;
width:99%;
}
.reveal div.middle{
float:left;
width:99%;
}
.reveal div.three-col{
float:left;
width:33%;
}
.reveal div.right-r1{
float:right;
width:59.7%;
}
.reveal div.left-r1{
float:left;
width:39.7%;
}
.reveal div.right-l1{
float:right;
width:39.7%;
}
.reveal div.left-l1{
float:left;
width:59.7%;
}
/*********************************************
* 図に本文を回り込ませる(LaTeX の wrapfig 相当)
*********************************************/
/* 使い方:
…図…
本文…
- 図は本文より「前」に置く。
- 本文は left-l1 などのカラム div に入れない(入れると回り込まない)。
- 幅の既定は 38%。変えるときは style="--wrap-width:45%"。
- 左に回り込ませたいときは wrapfig-left を使う。 */
.reveal div.wrapfig,
.reveal div.wrapfig-left {
width: var(--wrap-width, 38%);
}
.reveal div.wrapfig {
float: right;
margin: 0 0 0.6em 1.2em;
}
.reveal div.wrapfig-left {
float: left;
margin: 0 1.2em 0.6em 0;
}
/* 中の TikZ 図を枠の幅いっぱいに広げる */
.reveal .wrapfig .tikzjax-wrapper,
.reveal .wrapfig-left .tikzjax-wrapper {
zoom: 1;
display: block;
width: 100%;
}
.reveal .wrapfig svg.tikzjax,
.reveal .wrapfig-left svg.tikzjax {
width: 100%;
height: auto;
max-width: none;
}
/* 画像を入れる場合も同じように広げる。
ただし直下の ![]()
だけを対象にする。中に入れ子で置いた画像
(tikz-overlay のラベルなど)まで広げてしまうと、
その画像の width / height 属性が効かなくなるため。 */
.reveal .wrapfig > img,
.reveal .wrapfig-left > img {
width: 100%;
height: auto;
max-width: none;
}
/* 図の上に重ねるラベルの中の画像は、書いたとおりの大きさで表示する
(![]()
や style="width:4em" をそのまま効かせる) */
.reveal .tikz-label img {
max-width: none;
max-height: none;
vertical-align: middle;
}
.reveal div.list{
width:80%;
margin: 0 auto;
text-align:left;
}
.reveal div.c90{
width:90%;
margin: 0 auto;
text-align:left;
}
.reveal div.c80{
width:80%;
margin: 0 auto;
text-align:left;
}
.reveal div.circle{
border: solid 0px black;
border-radius: 50%;
height: 20px;
width: 20px;
background-color:#999;
}
.reveal div.footer{
float:left;
bottom:2em;
/*margin-top:2em;*/
position:absolute;
}
.reveal section.scrollable {
overflow-y: scroll;
overflow-x: hidden;
}
.reveal span.menu-title{
display:none;
}
/*--------------*/
/* iPad などタッチ端末ではナビゲーション矢印(右下の < >)を小さくする。
矢印一式は .controls の font-size(既定 10px)を基準に em で組まれて
いるので、ここを変えるだけで全体が同じ形のまま縮む。
マウスのある PC は (hover: none) に当たらないので従来どおり。 */
@media (hover: none) and (pointer: coarse) {
.reveal .controls {
font-size: 6px;
}
}