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