CSSで「Pre」要素使用でスマートフォンスクロールバー表示する方法

WordPressの記事を記載している際に、PHPコードの変更部分を掲載するが、この際に<Pre>～</Pre>という要素を利用している。この要素、最初利用したと時にPC上のブラウザ（GoogleCrome）においては自分が思っている動作をしてくれたので、何も問題ないと思っていた。

しかし、ある時スマートフォン（iphone）で確認してみると、PC上の動作と異なる動きをした。動作の違う点は横スクロールバーが表示されるかされないかである。

PC上では長いプログラムコードで改行コードがある場合は、きちんと横スクロールバーが表示されるが、スマートフォン上で見ると勝手にプログラムコードを折り返して表示されてしまうのだ。

これだと非常に見ずらいものとなってしまうため、どうすれば良いのか調べ、とりあえず暫定的であるが直してみた。

これは「pre」要素に限ったことではなく「div」なんかでも同様の現象が発生するはずなので、ボックス系のスクロールバー設置には要注意だ。

ボックス系の横スクロールバーに対応するには

今回のスクロールバー設定で分かったことは、iphoneなんかでは縦スクロールバーに関しては簡単に設定できたが、横のみのスクロールバーで苦戦した。これに対応するにはCSS「スタイルシート」でクラス定義もしくはID定義をしてやる必要ある。それでは早速どのようにCSSでスクロールバーを作成したかを記載したいと思う。

CSS「スタイルシート」にはスクロールバーの定義を入れる

次のクラスのコードをスタイルシートへ追記した。

/* スクロールバー用のボックス定義 */
.scroll-box {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
pre{
    word-wrap: normal;
}

ただ「overflow」の定義を入れるだけではダメです。「-webkit-overflow-scrolling: touch;」というのがポイントとなります。「-webkit」を利用するのが良いのか悪いのかは賛否両論あるようですが。。。あとは<pre>要素にかんしては、勝手に折り返して開業しないように「word-wrap」の定義を明示しました。CSSへの追記はたったこれだけです。シンプルが一番です。

HTMLではどのように使用するのか？

下のように最初の行と最終行の様にクラス指定をすれば良いだけです。勿論<div>要素においても利用することができます。

<pre class="scroll-box">
<?php
/**
* Displays footer site info
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/


?>
<div class="site-info">
    <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyseventeen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyseventeen' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->
</pre>

これで完了です。

実際に動作させて検証する

PC上では何も指定しなくても勝手に横スクロールバーが表示され良い感じだったのですが、上記の変更により、iphone6SでのGoogleCromeで動作検証することができました。iphone上ではボックス部分にタッチをするとスクロールバー表示され横スクロールが可能になりました。本当なら最初からスクロールバーを表示しておきたいのですけどね。やろうとするとなかなか上手く動作しなかったので、「今回はこれで良し」としましょう。時間があるときにもう少し検証して、もう少し改良したいとおもいます。

WordPressを使うならロリポップ！
簡単インストール完備で楽々スタート！

Pocket