HTML入門・何の役にも立たない無駄なHTMLで遊ぼう-その1-


こんにちは。
中高時代から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>

スポンサーリンク
スポンサーリンク
[ HTML入門・何の役にも立たない無駄なHTMLで遊ぼう-その... ]IT,Webプログラミング2016/03/03 18:32