.sp-full-width

出典: 謎の百科事典もどき『エンペディア(Enpedia)』
ナビゲーションに移動 検索に移動
「.sp-full-width」を使うことによる見映えの変化

.sp-full-widthとは、エンペディアで使われているCSSクラスである。

概要[編集]

従来、スマホで閲覧したとき、Infoboxテンプレートや画像のサムネイルなどが中途半端な幅を占めることで、本文が画面左の狭い領域に押し込められてしまうという問題があった(右の画像参照のこと)。これを解決するために用意されたCSSクラスが「.sp-full-width」である。このクラスを当てられた要素は、ブラウザの幅いっぱいに広がる。クラス名には「スマホで見たとき(SPビューのとき)、フルサイズ(full)まで幅(width)を広げる」という意味がこめられている。

MediaWiki:Gadget-AdjustViewport.css」のなかで定義されており、「モバイルビューもどき」ガジェットを ON にしている環境下でのみ動作する。(デフォルトでは「モバイルビューもどき」ガジェットはONである。)

このクラスは個別のテンプレートに付与することは想定されておらず、モジュール:Infoboxなど、根幹となる「テンプレート用テンプレート」に付与することで、広く一括に適用することが望まれる。

現在、このクラスが使われている箇所は下記である。(なお、エンペディアの検索機能はアレなため、単純な検索をかけるだけでは使用箇所が分からないので要注意。)

Infobox 全体に適用されてはいるものの、例えばこのように余計な <div> 要素がついていると想定通りに動作しない。こういった箇所は人力で少しずつ発見・対応していく必要がある。