記事内にHTMLやCSSなんかのソースコードを書けるようにしてみた。
ただそれだけｗ
こんにちは！天草IT部のエザキです！！
こんな機能がこのかたらんなブログに必要なのかどうかと言われたら自信がありませんが、今後IT部では使うことも出てくるんじゃないかということで、テスト的に記事内でソースコードを表示する機能を実装してみました。
カッとなってやった。後悔はしていない系のや～つです。
こんにちは！天草IT部のエザキです！！
こんな機能がこのかたらんなブログに必要なのかどうかと言われたら自信がありませんが、今後IT部では使うことも出てくるんじゃないかということで、テスト的に記事内でソースコードを表示する機能を実装してみました。
カッとなってやった。後悔はしていない系のや～つです。
対応言語
いっぱいです（爆）
たくさんですｗ
「HTML」や「CSS」をはじめ、「PHP」、「JavaScript」・・・と、思いつく限りの言語に対応しています。
たぶん今後、上に挙げた4つくらいしか使うことはないんじゃないかと思いますがｗ
表示例
とりあえず適当なソースコードが思いつかなかったんで、先日「笑顔のあまくさ肉球プロジェクト」さんを眺めててなんとなく思い立って作った「HTMLとCSSだけで作った肉球」のHTMLとCSSを表示してみます。（宣伝乙）
HTML
<html lang="ja">
<head>
<meta charset="Sift-JIS">
<meta name="keywords" content="肉球">
<meta name="description" content="画像を使わず、HTMLとCSSだけでシンプルな肉球を作ってみました。">
<meta name="author" content="エザキ タツノリ">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>CSSで肉球作ってみた。</title>
</head>
<body>
<div class="nikukyu">
<div class="yubi">
<div class="yubi_single"></div>
<div class="yubi_single"></div>
<div class="yubi_single"></div>
</div>
<div class="nikukyu_main"></div>
</div>
</body>
</html>
CSS
.nikukyu {
position: absolute;
}
.yubi {
position: absolute;
}
.yubi_single {
position: absolute;
width: 35px;
height: 35px;
top: 0;
right: 0;
border: 1px solid #fa8072;
border-radius: 100%;
box-sizing: border-box;
background: #fa8072;
}
.yubi_single:nth-child(1) {
top: 30px;
left: 6;
}
.yubi_single:nth-child(2) {
top: 9px;
left: 46px;
}
.yubi_single:nth-child(3) {
top: 30px;
left: 86px;
}
.nikukyu_main {
position: absolute;
width: 55px;
height: 55px;
top: 50px;
left: 36px;
border-radius: 100%;
background: #fa8072;
}
PHP
PHPのソースがちょっとすぐ手元に無かったんで簡単なものを(^_^;)
<?php
echo date("Y/m/d g:i");
?>
JavaScript
JavaScriptも無かったんで、定番のやつを。
<script>
alert("Hello World!");
</script>
まとめ
ページの読み込みが遅くなったらアレなので、軽いシンプルな表示のものにしてます。
なんとなく実装してみましたが、さてこの機能を使うことは今後あるのでしょうか？ｗｗ
│Comments(1)
この記事へのコメント
よかったらコメントしてみてください。
このように吹き出しのように表示されます＾＾
このように吹き出しのように表示されます＾＾
天草IT部の中の人
2015年09月25日 17:48
2015年09月25日 17:48
