koblog

高校生のWEBデザインブログ

【CSS】コードをオシャレに飾るボックスデザイン

サムネイル

技術系のブログなどではHTMLやCSSJavascriptなどのコードを書くことが多いと思います。しかしただ<pre>や<code>で囲っただけでは見づらく、syntaxhighlighterなどはJavascriptを使うため動作が重くなってしまいます。また無料ブログでは導入が少し面倒です。

 

以前、Google code prettifyを紹介しましたが、これもCDNJavascriptを使うので動作がどうしても重くなってしまいます。また原因は分かりませんが、一部のスマホでは画面をはみ出してしまいます。

 

そこで今回は普段使うコードをオシャレに飾るボックスデザインを紹介します。

Javascriptを使わないため、動作が重くならず無料ブログでも簡単に導入できます。

また他のプラグインを使っている方に向けて、pre要素だけでなくdiv要素だけで作るボックスデザインも紹介します。

 

 

pre要素で作るボックスデザイン

まずはpre要素で作るボックスデザインを紹介します。

 

DEMO

HTML
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="Author" content=""/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

</body>
</html>

 

CSS
html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}

 

JS
document.write("Test");

 

HTML

HTML
<pre><span class="html"></span>
//ここにコードを記述
</pre>

 

HTMLはこんな感じです。注意点は<span>とその下のコードを必ず上のコードと同じ場所に書いてください。そうしないと改行してしまいデザインが崩れてしまいます。

 

また<span>のクラス名をhtml・css・jsに変えることで、色を変えることができます。

自分が使いたいコードに合わせて変えてください。

 

CSS

CSS
.entry-content pre {
position: relative;
border: solid 0.5px #e5e5e5;
background: #f7f7f7;
margin: 0 0 10px;
padding: 10px;
white-space: pre
}

.html {
position: absolute;
display: inline-block;
top: 0;
left: 0;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 13px;
background: #f69178;
color: #fff;
font-weight: bold
}

.css {
position: absolute;
display: inline-block;
top: 0;
left: 0;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 13px;
background: #688cd5;
color: #fff;
font-weight: bold
}

.js {
position: absolute;
display: inline-block;
top: 0;
left: 0;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 13px;
background: #ffd93e;
color: #fff;
font-weight: bold
}

 

CSSの編集方法が分からない・反映されないという場合は下の記事を参考にしてみてください。 どうしても効かない場合は自分のコードと置き換える必要があります。

 

div要素で作るボックスデザイン

次にdiv要素のみで作るボックデザインを紹介します。

 

DEMO

HTML

<!DOCTYPE html>

<html lang="">

<head>

<meta charset="UTF-8">

<title>Untitled Document</title>

<meta name="Author" content=""/>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

 

</body>

</html>

CSS

html {
font-family: sans-serif;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}

JS

document.write("Test");

 

HTML

HTML

<div class="html">
<span class="box-title">コードの種類</span>
<p>コード</p>
</div>

上のコードはHTMLを記述する際に使うものですが<div>のクラス名を変えれば、CSS・JSでも使えます。CSSやJSで使う場合は<div>のクラスをcssもしくはjsに変えてください。注意点ですがクラス名は小文字でないと反映されません。

 

また<p>タグ内のコードの記述ではエスケープ文字を使います。エスケープ文字については下の記事で解説しているので、よかったら参考にしてください。

CSS

CSS

/* HTML */

.html {
position: relative;
margin: 2em 0;
padding: 25px 10px 7px;
background: #f7f7f7;
border: solid 0.5px #e5e5e5
}
.html .box-title {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 13px;
background: #f69178; /*背景色*/
color: #fff; /*文字色*/
font-weight: bold
}
.html p {
margin: 0;
padding: 0
}

/* CSS */
.css {
position: relative;
margin: 2em 0;
padding: 25px 10px 7px;
background: #f7f7f7;
border: solid 0.5px #e5e5e5
}
.css .box-title {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 13px;
background: #688cd5; /*背景色*/
color: #fff; /*文字色*/
font-weight: bold
}
.css p {
margin: 0;
padding: 0
}

/* Javascript */
.js {
position: relative;
margin: 2em 0;
padding: 25px 10px 7px;
background: #f7f7f7;
border: solid 0.5px #e5e5e5
}
.js .box-title {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 13px;
background: #ffd93e; /*背景色*/
color: #fff; /*文字色*/
font-weight: bold
}
.js p {
margin: 0;
padding: 0
}

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる