こんにちは。
中高時代からHTMLいじりがそこそこ好きだった本業SEのノッテが、HTMLでふざけていくシリーズを始めたいと思います。
iPhoneでの動作確認は行いましたが、機能を100％ご堪能いただくためにもできればパソコンで見てください。
プログラミング未経験でもHTMLはそこまで難しくない言語ですし、書いたものがすぐ画面に反映されて楽しいので、プログラミング初心者にお勧めです。
私自身まだまだ技術的に成熟してないですが、Webプログラミングって面白いなって思ってもらえたらうれしいです。
ではどうぞ。
目次
綺麗だけど使い道のないデザイン
近未来感ある入力フォーム
これが今回ご紹介する機能です。
下の箱に文字入力をすると、上の箱にその文字が反映される入力フォーム。
きれいだけど使い道がない。
仕組みとしては、キーボードタイプをして指がキーから離れた瞬間に、文字が上に反映されます。
どう考えても使い道がない（二度目）
ソースコード
なんてことない、短いソースコードです。
<div id="sono1output"></div>
<textarea id="sono1input" onkeyup="sono1getValue();" placeholder="なにかを入力"></textarea>
function sono1getValue() {
var $sono1value = document.getElementById( "sono1input" ).value;
document.getElementById( "sono1output" ).innerHTML = $sono1value;
}
#sono1input{
border:solid 5px #f56;
border-radius: 1em;
width:80%;
}
#sono1input:hover{
-webkit-box-shadow:0 0 0 7px #fff,0 0 0 10px #c58;
-moz-box-shadow:0 0 0 7px #fff,0 0 0 10px #c58;
box-shadow:0 0 0 7px #fff,0 0 0 10px #c58;
}
#sono1input:focus {
border-radius: 0;
-webkit-box-shadow: 0 0 0 15px #fff,0 0 0 18px #c58;
-moz-box-shadow:0 0 0 15px #fff,0 0 0 18px #c58;
box-shadow:0 0 0 15px #fff,0 0 0 18px #c58;
}
#sono1output{
margin-bottom:1em;
padding: .5em;
font-size:2em;
font-weight: bold;
width:80%;
height:4em;
background:#123;
color: #123;
text-shadow: 0 0 2px #eef,0 0 7px #acf,0 0 10px #acf,0 0 16px #ace;
overflow: scroll;
}
ソースコードの解説
なぜ三種類のソースコードをここでお見せしたか、ご説明します。
HTML、JavaScript、CSSはそれぞれ異なった機能を持つプログラミング言語です。
それぞれ特徴を最大限に引き出すことで、（こんな役立たずな機能とは違って）すごいWebページを作ることができます。
HTML
HTMLは、サイトなどの構造を作ります。
入力エリアを設置したり、ボタンを設置したり、とりあえず要素を設置して、そのサイトに存在させる役割を持っています。
この記事では、テキストを入力する下のエリア、テキストを反映する上のエリアの二個を設置しました。
JavaScript
jsは、HTMLにいろいろな機能を載せます。
例は挙げだすときりがないほどに、色々できる言語ですので割愛します。
この記事の機能では、下のエリアから文字情報を拾って、上のエリアに情報を書き込む機能を担っています。
CSS
CSSは、HTMLによって設置された要素の装飾担当です。
色を変えたり、形を変えたり、サイズを変えたり…。
この記事の機能では、下のエリアのサイズや枠線を指定したり、上エリアの背景色や文字の光を指定しています。
総括
要素を置いて形づくりをするHTML、それに機能を載せるjs、装飾するCSS。
これらが組み合わさって、こんなに使えない機能を作ることができるのです。
どうでしょう、とてもたのしいですね。
最後に、三つの言語を組み合わせたソースコード全文を載せます。
全文コピペして、これをメモ帳に貼り付けてください。
そして名前を付けて保存します。
この時、ファイルの種類という部分を全てのファイルに変更し、ファイル名を「ohuzake.html」にしてください。
デスクトップにでも保存して、ダブルクリックすればあら不思議。
続きはみなさんの目で確かめてみてくださいね。
そして楽しかったらぜひ、くだらないプログラミングをして遊んでみてくださいね。
<html>
<head>
<script type="text/javascript">
function sono1getValue() {
var $sono1value = document.getElementById( "sono1input" ).value;
document.getElementById( "sono1output" ).innerHTML = $sono1value;
}
</script>
<style type="text/css">
<!--
#sono1input{
border:solid 5px #f56;
border-radius: 1em;
width:80%;
}
#sono1input:hover{
-webkit-box-shadow:0 0 0 7px #fff,0 0 0 10px #c58;
-moz-box-shadow:0 0 0 7px #fff,0 0 0 10px #c58;
box-shadow:0 0 0 7px #fff,0 0 0 10px #c58;
}
#sono1input:focus {
border-radius: 0;
-webkit-box-shadow: 0 0 0 15px #fff,0 0 0 18px #c58;
-moz-box-shadow:0 0 0 15px #fff,0 0 0 18px #c58;
box-shadow:0 0 0 15px #fff,0 0 0 18px #c58;
}
#sono1output{
margin-bottom:1em;
padding: .5em;
font-size:2em;
font-weight: bold;
width:80%;
height:4em;
background:#123;
color: #123;
text-shadow: 0 0 2px #eef,0 0 7px #acf,0 0 10px #acf,0 0 16px #ace;
overflow: scroll;
}
-->
</style>
</head>
<body>
<div id="sono1output"></div>
<textarea id="sono1input" onkeyup="sono1getValue();" placeholder="なにかを入力"></textarea>
</body>
</html>
¥11,150
¥11,425
feedly
はてな