title（タイトル）やmeta（メタ）のdescription（ディスクリプション）などを考える時、文字数のカウントをサクっとやってくれるやーつ。ググれば腐るほどサイトやツールも見つかります。別にWordやExcelでも文字数はわかりますし、WordPress（ワードプレス）なら下に表示されるし。
でもまぁ、いつも見てる自分サイトにそれがあれば便利だし、javascriptソースコードも超簡単なので勉強ついでにちょっとやってみましょう。アンケートフォームとかにも応用出来そうですからね。
HTMLソースコード
<!DOCTYPE html>
<html dir="ltr" lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="robots" content="noindex,nofollow">
<script type="text/javascript" src="js/text_count.js"></script>
<title>テキストカウント</title>
<style type="text/css">
div.text_count_pc p {
font-size:120%;
font-weight:bold;
margin:5px 5px 0px;
}
div.text_count_pc p span {
display:inline;
}
</style>
</head>
<body>
<div class="text_count_pc">
<h1>文字数カウント</h1>
<span>下記に文字を入力してください</span><br>
<textarea cols="40" rows="8" onkeyup="ShowLength(value);"></textarea>
<p>現在<span id="inputlength">0文字</span></p>
</div>
</body>
</html>javascriptソースコード
function ShowLength( str ) {
document.getElementById("inputlength").innerHTML = str.length + "文字";
}超簡単ですよね。そうです。こんな簡単なプログラムでニタニタしている程度のWEBクリエイターです。でも、こういった簡単なパーツの組み合わせが大きなシステムになるんですよ。
この記事があなたの新しいアイデアに繋がりますように。
記事のコメント