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

CSSコード

スポンサーリンク

Pocket

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

スポンサーリンク

カテゴリーCSS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です