こんにちは Tomoです。

今日はあまりネタはないのですが、プログラミングでブログにソースコードを載せるときに使っている<pre><code>～<code></pre>タグについて記載します。

<pre><code>～<code></pre>タグについて

<pre>タグは、エディタを意識したスタイルと、コマンドラインを意識したスタイルにしています。

    
エディタ用の<pre><タグです
    

    
コンソール用の<pre><タグです
    

cssのコードは以下の通りです。

【CSS】

    
.pre-main {
    background-color: #000;
    color: #FFF;
    white-space: pre-wrap ;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
    overflow: auto;
}
code {
    white-space: pre;
    font-size: small;
}
.cy30 {
    background-color: #FFB;
}
.fcb {
    color: #000;
}
    

【HTML】エディタ用

    
<pre class="pre-main cy30  fcb">
    <code>
エディタ用
    </code>
</pre>
    

【HTML】コンソール用/p>

    
<pre class="pre-main">
    <code>
コンソール用
    </code>
</pre>
    

最初にコンソール用を作ったので、コンソールをメインで、後からテキスト用に背景色とフォントカラーを変えてるのが特徴です。

スクロールについて

ソースコードが長いとスマホだと折り返してしまいます。

折り返されるのに抵抗があったため、スクロールできるようにしました。

        
ああああああああああああああああああああああああああああああああああああああああああああ
        
    

ポイントは、以下の通りです

「preタグ」のスタイルで「overflow: auto;」

「codeタグ」のスタイルで「white-space: pre;」

最後に

今日ちょっとした小ネタでした。

今日いままで作ったページの見直しなどに時間をかけてしまいました。

改行をBRタグ連続で使用してたり、タイトルがいまいちだったりとまだまだデザイナ落ち着かないですが、頑張って投稿していこうと思います