パソコン・スマホ共用スタイル

パソコンとスマホで共用できるソースエリアのスタイル。
ソースをスマホで見る場合にどうするか。いよいよ本命パターンの書き方を決めておく必要がある。
  1. パソコンでは、ソースは画面内に収まる。
  2. スマホでは、はみ出た部分は左にスライド(ソース全体が動く)して見ることができる。

SAMPLE
<div class="pg2 tbsoto">
//以下にソースを書く。
</div>

.pg2にはwhite-space:pre;が設定。

資料 .pg2 {color:navy; font-family:MS 明朝,serif; font-size:15px; line-height:1.5; background-color:#fffff0; border:1px solid #008000; padding:5px; border-radius:10px; white-space:pre; } .tbsoto {overflow-x:scroll;} /* これはスマホだけに適用される。*/ .fbg {color:#ffffff; background-color:#008000; border:0px solid #008000; font-family:"MS 明朝",serif; font-size:12px; padding:0px 8px; border-radius:10px; }

プログラミング #include <stdio.h> void main( void ) { FILE *stream; char tempstring[] = "String to be written"; int i; /* Create temporary files. */ for( i = 1; i <= 3; i++ ) { if( (stream = tmpfile()) == NULL ) perror( "Could not open new temporary file\n" ); else printf( "Temporary file %d was created\n", i ); } /* Remove temporary files. */ printf( "%d temporary files deleted\n", _rmtmp() ); }


失敗例

次のパターンでは想定したような形にならないので新たに「pg2」スタイル(上記)を作成する必要がある。

SAMPLE
<div class="tbsoto">
<pre class="pg">
//以下にソースを書く。
</pre>
</div>

preにはwhite-space:pre-wrap;が設定されているから、パソコン・スマホともに、テキストが画面をはみ出すことはない。自動的に画面の端で折り返される。しかし、折り返すとソースが途中で改行されてインデントが無意味になる。

参考
#include <stdio.h>

void main( void )
{
    FILE *stream;
    char tempstring[] = "String to be written";
    int  i;

    /* Create temporary files. */
    for( i = 1; i <= 3; i++ )
    {
        if( (stream = tmpfile()) == NULL )
            perror( "Could not open new temporary file\n" );
        else
            printf( "Temporary file %d was created\n", i );
    }

    /* Remove temporary files. */
    printf( "%d temporary files deleted\n", _rmtmp() );
}

- 2020/12/11 -