/* スマートフォン向けの調整 * * 対象は 768px 以下。既存の css/layout.css・css/article.css・css/scrol.css が * 同じ768pxを境にしているため、それに合わせている。 * * スマートフォン向けの指定をこのファイルへ集約している理由: * 既存のCSSは design.css / style2.css / base.css / scrol.css など多数に分かれており、 * 画面幅ごとの指定も各ファイルへ散っている。追記していくと * 「どこを直せばスマートフォンの表示が変わるのか」が追えなくなるため。 * * 全ページの の最後で読み込むこと。 * 既存のどのCSSより後に読み込まれることで、詳細度を上げずに上書きできる */ @media screen and (max-width: 768px) { /* ===== ヘッダー ===== サイト名は32pxで、375px幅では3行に折り返して高さ242pxを占めていた。 画面を開いた瞬間に記事が1件も見えない状態だったため縮める */ #nescs .nav-brand h1 { font-size: 18px; line-height: 1.5; padding: 10px 12px; margin: 0; } /* サイト名の前のドット絵（ポケモンマスター）。 nes.css では 84×90px の箱に、box-shadow でドット絵を描いている。 width や height を変えても絵は縮まず箱だけが変わるため、 transform で絵ごと縮め、空いた分を負のマージンで詰めている。 この2つを併用しないと、縮めても元の84×90pxの場所を占めたままになり、 ヘッダーの高さが242pxまで膨らむ */ #nescs .nav-brand h1 .nes-ash { display: inline-block; transform: scale(0.42); transform-origin: left center; /* 内訳: 縦は (90 - 90×0.42) ÷ 2 ≒ 26px、横は 84 - 84×0.42 ≒ 49px */ margin: -26px -49px -26px 0; vertical-align: middle; } /* カービィ（.home-link）を表示する。 nes/style3.css が768px以下で display:none にしているため見えなかった。 元の位置（上から100px の右端）のままだと Menu の見出しに重なるため、 画面の右下へ移し、指の届く位置に置く */ .home-link { display: flex; top: auto; bottom: 10px; right: 6px; /* nes/style3.css は .home-link に height:10px を指定しており、 中のカービィ（96px）がその下へはみ出す。 bottom:10px は10pxの枠を基準にするため、絵は画面の外まで下がってしまう （実測で43pxが画面外、見えていたのは16pxだけ）。 枠を中身の高さに合わせることで、絵の下端が bottom の位置に揃う */ height: auto; /* 吹き出しとカービィを縦に積む。 横に並べたままだと幅148pxになり、記事カードに大きくかぶる */ flex-direction: column; align-items: flex-end; transform: scale(0.62); transform-origin: right bottom; } /* 吹き出し「Welcome to MyLab」も表示する。 PCでは吹き出しとカービィを横に並べており、そのままだと幅148pxを占めて 記事カードに大きくかぶる。狭い画面では縦に積み、 吹き出しをカービィの上へ置くことで幅を抑える */ .home-link > p.nes-balloon { display: block; /* 下の余白は、吹き出しのしっぽとカービィを離すために必要。 nes.css の吹き出しはしっぽを ::after で描いており、 枠の18px下まで伸びる（bottom: -18px）。 一方カービィの絵も ::before の影で枠の6px上から描かれる。 余白が4pxではこの2つが重なり、カービィの頭が欠けて見えていた。 しっぽ18px ＋ カービィの6px ＋ 余裕8px で32pxを確保する */ margin: 0 0 32px; font-size: 0.7rem; white-space: nowrap; } /* ===== 本文の文字 ===== index.html が14px、記事ページが19pxとページごとに違っていた。 スマートフォンで読みやすい16pxへ揃える */ #theme p, #theme li, #theme span { font-size: 16px; line-height: 1.9; } #theme h3 { font-size: 18px; } #theme h4 { font-size: 17px; } /* ===== タップ対象 ===== 指で押す領域は44px四方が目安。 375px幅の実測では index.html のリンク90個のうち52個が44px未満だった */ /* サイドバーの各メニュー（Update / Administrator / … / Github） */ .sidebar_nav > ul > li > a { display: flex; align-items: center; min-height: 44px; } /* メニューの文字が右へはみ出すのを防ぐ。 「Administrator」は空白を含まない1語のため折り返せず、 27.36px × 13文字 = 356px が枠（使える幅は約206px）を87px超えていた。 「Update Information」「Event Calendar」は空白で2行に折り返るため収まっていた。 Press Start 2P は1文字が文字サイズと同じ幅の等幅フォントで、 8ドットで設計されている。整数倍でないと輪郭がにじむため16pxにする。 16px × 13文字 = 208px で1行に収まる。 詳細度: design.css の `.sidebar_nav .ud`（500px以下で0.87em）を 打ち消すため、クラス3つの組み合わせにしている */ .left .sidebar .sidebar_nav > ul > li > a { /* 右の余白は矢印アイコン（::after）が重なる分を確保する */ padding: 10px 40px 10px 12px; } /* アイコンの大きさ。 41pxでは大きすぎて文字の場所を圧迫するため縮める。 文字との間隔は style2.css の `.sidebar_nav ul li i`（0.5em）に任せる */ .left .sidebar .sidebar_nav > ul > li > a > i { font-size: 24px; } .left .sidebar .sidebar_nav > ul > li > a > span { font-size: 16px; line-height: 1.4; } .left .sidebar .sidebar_nav > ul > li > a::after { font-size: 20px; right: 12px; } /* セカンドバーの中のリンク（Bookmark の一覧など） */ .sidebar_nav .sidebar_2ndnav > li > a { display: flex; align-items: center; min-height: 44px; } /* Update情報・イベント一覧の1件ずつを区切る。 HTMLは1つの

の中に「日付（ただの文字）＋ リンク」を繰り返す作りで、 すべてが地続きに流れる。PCの広い欄では1件1行に収まるため気にならないが、 狭い画面では折り返しが起きて、どこまでが1件なのか分からなくなる。 リンクを行として独立させ、下に区切り線を引くことで 「日付 → 記事名 → 区切り」の単位が見えるようにする。 押せる範囲も行全体に広がる */ .left .sidebar .sidebar_nav .update a { display: block; margin: 2px 0 10px; padding: 0 0 10px; border-bottom: 1px solid rgba(139, 0, 0, 0.25); } /* イベント一覧も同じ扱いにする。 ただし左の余白26pxは ▶ カーソルの表示位置のため残す */ .sidebar .sidebar_nav .update2 a { display: block; margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.15); } /* 最後の1件の下には線を引かない（枠の下端と二重になるため） */ .left .sidebar .sidebar_nav .update a:last-of-type, .sidebar .sidebar_nav .update2 a:last-of-type { border-bottom: none; } /* 記事ページの目次 */ .sfloat a { display: inline-block; padding: 10px 0; min-height: 24px; } /* Article欄のページ送り・カテゴリの各ボタン */ .article-heading .article-pager, .article-filter .article-filter__btn, .article-filter .article-filter__release { min-height: 44px; } /* Profile欄のSNSアイコン。 アイコン自体は16pxのままで、押せる範囲だけを広げる */ .sidebar_nav .sidebar_2ndnav .profile-sns .profile-sns__link { justify-content: center; min-width: 44px; min-height: 44px; } /* 見出しの左横に画像を並べる配置（.article-head）は、 狭い画面では画像170pxと見出しが横に収まらないため縦に積む */ .article-head { flex-direction: column; /* 縦に積んだときの画像と見出しの間隔。 見出し自身が上余白20pxを持つため、ここで足すと空きすぎる */ gap: 0; } .article-head .ArticleHeader_title { text-align: center; } /* ===== 余白 ===== PC向けの広い余白のままだと、狭い画面では文字の幅が足りなくなる */ #theme { margin-left: 8px; margin-right: 8px; padding: 12px 10px; } /* ===== セカンドバーをアコーディオンにする ===== PC向けの作りでは、セカンドバーは position:absolute で メニューの右横（left:3.4em）へ重ねて出し、ホバーで表示していた。 指で操作する画面ではホバーが無く、しかもパネルは画面の外（左457px）にあるため、 Update情報・Profile・Event Calendar・Bookmark のいずれも開けなかった。 狭い画面では重ねるのをやめ、メニューの下へ開く形にする。 開閉は js/sidebar-panel.js が li へ is-open を付け外しして切り替える。 display:none で閉じているため、PC向けの opacity や transform の指定 （style2.css の :hover や .is-holding 等）が残っていても影響しない */ .sidebar_nav .sidebar_2ndnav { position: static; display: none; width: 100%; transform: none; opacity: 1; transition: none; } .sidebar_nav > ul > li.is-open > .sidebar_2ndnav { display: block; } /* 開いた中身が切り取られないようにする。 design.css は狭い画面で .sidebar に overflow:hidden と height:80% を 指定しており、そのままだとアコーディオンが途中で切れる */ .left .sidebar { height: auto; overflow: visible; } .left .sidebar .sidebar_nav { height: auto; } /* Update情報とイベント一覧の高さ。 css/ogulab-encounter.css は1050px以下で、パネルを縦方向のflexにし 一覧に flex:1 1 0 を与えて「残り高さいっぱい」に伸ばしている。 アコーディオンでは親の高さが決まっていないため、 基準サイズ0のまま高さが0になってしまう（実測で高さ0px）。 通常の積み上げに戻し、長すぎる一覧は画面の高さに応じた上限で内部スクロールにする。 詳細度は打ち消す相手（クラス5つ）に合わせている */ .sidebar_nav .sidebar_2ndnav > li:has(> .update), .sidebar_nav .sidebar_2ndnav > li:has(> .update2) { display: block; flex: none; } .left .sidebar .sidebar_nav .sidebar_2ndnav .update, .left .sidebar .sidebar_nav .sidebar_2ndnav .update2 { width: auto; height: auto; flex: none; /* 入れ子のスクロールにしない。 高さを制限すると、ページのスクロールの中にもう一段スクロールする窓ができる。 指で操作する画面では「どちらが動くのか」が分かりにくく、 実測でも内容1584pxを418pxの窓に押し込む状態になっていた。 アコーディオンは開いた分だけ伸ばし、ページごとスクロールさせる */ max-height: none; overflow: visible; } /* 文字サイズ。 PC向けは24px（link-menu.css）で、狭い画面では1件が3行・高さ88pxになり 一覧として読みにくい。本文と同じ16pxに揃える。 日付の Press Start 2P は8ドット設計のため16pxはちょうど2倍、 リンクのマルモニカは設計サイズが16pxで、どちらも輪郭が保たれる。 詳細度は link-menu.css の指定に合わせている */ .left .sidebar .sidebar_nav .update, .left .sidebar .sidebar_nav .update a, .left .sidebar .sidebar_nav .update2, .sidebar .sidebar_nav .update2 a { font-size: 16px; } .left .sidebar .sidebar_nav .update h3, .left .sidebar .sidebar_nav .update2 h3 { font-size: 18px; } /* Profileのカード幅は、重ねて表示していたときのずれ（3.4em）を 差し引く計算になっている。重ねない表示では不要。 ミニゲームの枠もBattle欄と同じ計算式のため、あわせて戻す */ .profile-card, .battle-game { width: auto; } /* 開いているメニューを分かりやすくする */ .sidebar_nav > ul > li.is-open > a { background-color: rgba(0, 172, 193, 0.9); } /* ===== Menu欄そのものを折りたたむ ===== メニューは6項目あり、1項目あたり100〜142pxを占める。 開いたままだと記事一覧に到達するまで800px近くスクロールが必要だった。 初期状態では見出し（Menu）だけを残して閉じ、タップで開く形にする。 開閉は js/sidebar-panel.js が .left へ is-menu-open を付け外しして切り替える */ /* 「Menu」の文字は style2.css 側の text-align: center で中央に置かれていたが、 display:flex にすると text-align は中身の並びに効かなくなる。 さらに justify-content: space-between だと開閉の記号と両端へ振り分けられ、 文字が左端へ寄っていた（実測: 左16px）。 文字は justify-content: center で中央に戻し、 記号は下の絶対配置で右端へ置く（1050px以上の指定と同じ考え方） */ .left .sidebar > header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 44px; cursor: pointer; } /* 開閉できることを示す記号。 絶対配置で並びから外し、「Menu」の中央寄せに影響しないようにする。 right の 1em は style2.css の `.sidebar header { padding: 0.75em 1em }` と 同じ値で、左右の内側余白に揃えている */ .left .sidebar > header::after { content: "▼"; font-size: 0.7em; position: absolute; right: 1em; } .left.is-menu-open .sidebar > header::after { content: "▲"; } .left .sidebar .sidebar_nav { display: none; } .left.is-menu-open .sidebar .sidebar_nav { display: block; } /* ===== 記事一覧 ===== */ /* カードの左マージン8pxは、横に並べていたときの間隔。 1列に積む狭い画面では左右の余白が揃わないため打ち消す */ #article > div[class^="card"] { margin-left: 0; } /* Article見出しの中の各行の間隔。 縦に積む形になるため、行間を少し空けて押し間違いを減らす */ .right > p.article-heading { row-gap: 12px; } /* ===== セカンドバーの中身を中央に置く ===== */ /* Event Calendar のカレンダー。 calen.css が1050px以下で width:90% を指定しているため、 パネルの中で左に寄って右側だけ余白が空いていた（実測: 373px中336px、右に37px） */ .sidebar_nav .sidebar_2ndnav .wrapper2 { margin-left: auto; margin-right: auto; } /* Gallery の画像。 HTMLで width="450px" を指定しており、パネルの幅(373px)を 77pxはみ出していた。パネルに収めたうえで中央に置く。 height:auto は、幅が縮んだときに縦横比を保つための指定 */ .sidebar_nav .sidebar_2ndnav > img { display: block; max-width: 100%; height: auto; margin: 0 auto; } }