- 投稿日:2021-03-03T23:34:51+09:00
【HTML/CSS】リアルタイムな正規表現検証を簡単にフォームに実装する方法【Rails】
初めに
この記事は、上記記事で紹介したポートフォリオで使用した技術を切り出した記事になります。もし宜しかったらこちらもご覧ください。
また、この記事はGIF画像を挿入しておりますが、あまり滑らかに動かない可能性があります。GIF画像をクリックして頂けるとGyazoのURLへ移動することが出来ますので、そちらでしたらヌルヌル動くかと思います。イメージ図
今回紹介する方法を使用すると、上記GIF画像のinput要素のように、
- フォーカスされたら要素が大きくなる・背景が白っぽくなる
- 正規表現にマッチするなら枠が緑色に、マッチしないなら赤色になる
- 正規表現とマッチしない状態で送信ボタンを押すと、入力内容が送信される前に入力アシスタントを表示する
といった機能を割と簡単に実装出来るようになります。
HTMLで正規表現を記述する
/views/devise/registrations/new.html.erb<div class="field font sign-up"> <%= f.label :nickname %><br /> <%= f.text_field :nickname, autofocus: true, autocomplete: "off", required: true, maxlength: 8, pattern: "^([a-zA-Z0-9]{1,8})$", placeholder: "^([a-zA-Z0-9]{1,8})$" %> </div>上記コードはGIF画像でいうところの「Nickname」部分のフォームのソースコードです。form_withを使ったinput要素ですが、
f.text_field :nickname
の後に何やらゴチャゴチャ書かれていますね。今回特に注目して頂きたいのは下記の部分です。
- required: true
- 必須項目になる
- maxlength: 8
- 8文字までしか入力出来なくなる
- pattern: "^([a-zA-Z0-9]{1,8})$"
- この正規表現(半角英数1~8文字)にマッチする入力内容しか通さなくなる
そして、これらの条件を満たさないまま送信をしようとすると、
以下のような入力アシスタントが表示される具合です。裏でどのような処理がされているか
詳しい内容は下記URLに全て書かれています。
ここでは、今回の内容に関係する部分のみ引用します。
要素が妥当な場合は、次のようになります。
- 要素が CSS の :valid 疑似クラスに一致します。これにより、妥当な要素に特定のスタイルを適用することができます。
- ユーザーがデータを送信しようとすると、ブラウザーは止めるものが他になければ(JavaScript など)、フォームを送信します。
要素が不正なときは、次のようになります。
- 要素が CSS の :invalid 疑似クラスに一致します。これにより、不正な要素に特定のスタイルを適用することができます。
- ユーザーがデータを送信しようとすると、ブラウザーはフォームをブロックしてエラーメッセージを表示します。
つまり、HTMLがフォームの入力内容を常に監視し、その検証結果を要素の擬似クラスとして出力するということです。
擬似クラスがどのようなものかと言うと、簡単に言えば「そのクラスの状態」のことを指します。例えば<div class="test"></div>
のような要素があるとして、この要素をCSSで装飾する時はstyle.css.test { display: flex; }のような記述になるかと思います。この要素がホバーされると裏では擬似クラス
:hover
が要素に付与されるので、style.css.test:hover { background-color: red; }のような記述がCSSにあると、これが適用されるようになります。これを利用すれば、
style.css.test { ~~省略~~ background-color: blue; transition: all 0.3s ease; } .test:hover { background-color: red; transform: scale(1.1, 1.1); }のように記述をすると、testクラスを持った要素は、「ホバーされると0.3秒掛けて色が青から赤へ、大きさが縦横ともに1.1倍になる」といった装飾を適用することが出来る、という寸法です。ちなみに、
transition
は要素の変化を滑らかに繋ぐためのプロパティで、transform
は要素の形状を変化させるためのプロパティです。
たったこれだけの記述を追加するだけでアプリに動きを出せる訳ですから、労力対効果は高そうですね。擬似クラス別にCSSを記述してみる
それでは、入力内容の検証が行われるフォームに装飾を追加してしてみましょう。
style.css.input { ~~省略~~ transition: all 0.3s ease; }まずはいつも通りにinputクラスにCSSを記述し、フォームを作成します。そして
transition
を追加することで、これから記述していく変化の内容が滑らかなアニメーションで表現されるようにしておきます。
次に、要素がfocus
された時に起こしたい変化を記述していきます。style.css.input { ~~省略~~ transition: all 0.3s ease; } .input:focus { transform: scale(1.1, 1.1); background-color: rgba(223, 223, 223, 0.5); }更に今回は入力内容の検証も行いたいので、条件を満たさない時は枠を赤色に、条件を満たしたら緑色に変化するようにします。条件を満たさない時は擬似クラス
:invalid
が、満たすときは:valid
が適用されますので、style.css.input { ~~省略~~ transition: all 0.3s ease; } .input:focus { transform: scale(1.1, 1.1); background-color: rgba(223, 223, 223, 0.5); } .input:focus:invalid { border: red 5px solid; } .input:valid { border: rgb(2, 175, 2) 6px solid; background-color: rgba(223, 223, 223, 0.5); }これで「フォーカスされている・入力内容が条件を満たさない」場合は枠が赤色に、「入力内容が条件を満たす」場合は緑色に変化させることが出来ます。
まとめ
上記の記述だけでは、「入力したNicknameが既に使われているかどうか」といった「データベースと照合する検証」は行うことが出来ません。HTMLで行うことが出来るのは、あくまで入力の書式に関する検証のみになります。リアルタイムでデータベースとの照合を行う方法は発見することが出来ませんでした。
その方法を発見し次第また記事にしようと思います。
- 投稿日:2021-03-03T23:05:00+09:00
【monaca】JavaScriptでアプリの簡易パスロック機能を作る
monacaで作ったアプリにJavaScriptを使ってパスロックもどきを実装してみました。
こんなの↓
自分で言うのもなんですが、なかなかサマになってませんか?(笑)
こちらがパスコードを設定/変更するための画面↓
仕組みとしては、パスコード入力画面をモーダルとしてホーム画面に被せ、入力したパスコードがあらかじめローカルストレージに保存しておいたパスコードと一致したらモーダルを消す、という単純な機能です。
ただし、後で説明しますが、この方法はハイブリッドアプリでしか通用しません。モーダルを被せてるだけなので、Webアプリやサイトに使ってもあまりパスロックとしては機能しないのでご注意ください。
目次
1.完成形
2.パスロック設定メニュー
3.パスコード入力画面
4.パスロック設定メニュー解説
5.パスコード入力画面解説
6.注意点
1. 完成形
2. パスロック設定メニュー
まず完成形がこちら。
こちらパスロック設定メニューのコード。3個目のGIFのやつですSee the Pen passlock-menu by toshihide (@toshihide2000) on CodePen.
3. パスコード入力画面
See the Pen enterpass-modal by toshihide (@toshihide2000) on CodePen.
4. パスロック設定メニュー解説
新規パスコードを入力するフォーム
<div class="pass-container"id="newpass"> <div>パスワードを設定/更新</div> <label> <input type="password" maxlength="4" pattern="[1-9][0-9]*" inputmode="numeric" id="newpassword" required> </label>※数字4字 </div> <div class="pass-container"id="confirmation"> <div>確認のためもう一度入力してください。</div> <label> <input type="password" maxlength="4" pattern="[1-9][0-9]*" inputmode="numeric"id="pass-confirm" onchange="Varidate()" required> </label> <div class="green"id="log"></div> </div> <div class="modalbefore btn"id="pass-set">決定</div>input type="password"だと英数字キーボードが出るのでinputmode="numeric"でテンキーが出るようにします。
function Varidate(){ var NewPass=document.getElementById("newpassword").value; var ConfirmPass=document.getElementById("pass-confirm").value; var Log= document.getElementById("log"); if(NewPass===ConfirmPass){ Log.innerHTML="一致"; document.getElementById("pass-set").classList.remove("modalbefore"); Log.classList.remove("red"); Log.classList.add("green"); } else{ Log.innerHTML="不一致"; Log.classList.remove("green"); Log.classList.add("red"); } }; document.getElementById("pass-set").addEventListener("click",()=>{ var savedpass=document.getElementById("newpassword").value; var Log= document.getElementById("log"); if(savedpass.length<4){ Log.innerHTML="パスワードは4字で設定してください"; Log.classList.remove("green"); Log.classList.add("red"); }else{ localStorage.setItem("kin-pass",savedpass); alert("パスワードを"+savedpass+"に設定しました"); } });パスコードがnullの状態で保存すると解除できなくなって詰むので、初期の状態ではパスコードを保存する「決定」ボタンはdisplay:none;であるmodalbeforeクラスをつけて消しておきます。
確認用フォームに入力し終わったタイミングで両方のフォームを参照し、互いのvalueが一致すればdisplay:none;を外し、保存できるようにします。決定ボタンを押すとフォームのvalueが取得されます。パスコードが4文字未満だと保存せず、input要素にmaxlength="4"をつけているので、保存できるパスコードは4文字になります。保存できたらアラートを出してパスワードをユーザーに確認させます。
greenとかredとかいうクラスをつけ外ししていますが、ログの色を変えてるだけなので省いても大丈夫です。
<div class="passlock-box" id="passlock-onoff"> <i class="fas fa-lock-open" id="lock-open"></i> <i class="fas fa-lock none" id="lock"></i> <div class="switch"> <div class="switchbtn" id="Switchbtn"> <div class="btncircle" id="iosbtn" ></div> <div class="btncircle none" id="on"></div> </div> </div> </div>// <!-- ONにした時 --> document.getElementById("iosbtn").addEventListener("click",()=>{ var PASS=localStorage.getItem("kin-pass"); if(PASS==null){ alert("パスワードが設定されていないためロックをONにできません"); }else{ document.getElementById("iosbtn").classList.add("none"); document.getElementById("on").classList.remove("none"); document.getElementById("lock-open").classList.add("none"); document.getElementById("lock").classList.remove("none"); document.getElementById("Switchbtn").classList.add("swi-btn-active"); localStorage.setItem("passlock",1); } }); // <!-- OFFにした時 --> document.getElementById("on").addEventListener("click",()=>{ document.getElementById("iosbtn").classList.remove("none"); document.getElementById("on").classList.add("none"); document.getElementById("lock").classList.add("none"); document.getElementById("lock-open").classList.remove("none"); document.getElementById("Switchbtn").classList.remove("swi-btn-active"); localStorage.setItem("passlock",0); });やたらとdocument.getElementById~~が続いてますが、これらは全てこれ↓です。パスロックの機能とは関係ない部分なので無視してもらって大丈夫です。
大事なのは、パスロックをONにした時の
localStorage.setItem("passlock",1);
と、OFFにした時のlocalStorage.setItem("passlock",0);
、初期状態ではもちろんパスロックはOFFになっていますが、パスロックをONにしたら、次にアプリを開いた時にはパスロックがONになっていないといけません。つまりパスロックがONなのかOFFなのかということをブラウザに記憶させ、次回読み込み時にはそれに基づいてパスロック入力モーダルを表示するかしないか分岐する必要があります。そこで、パスロックがONの状態を1、OFFの状態を0として、ON/OFFを切り替えた時に0か1かを保存しています。
5. パスコード入力画面解説
<!-- パスコード入力モーダル --> <div class="off"id="enterpass-body"> <div class="delay" id="enterpass-container"> <div id="enterpass-text"> パスワード</div> <label> <input type="password" maxlength="4" pattern="[1-9][0-9]*" inputmode="numeric" required class="shake-2" id="enterpass" onchange="unlock()"> </label> </div> </div>//パスコードが一致したら解除 function unlock(){ var PassWord=localStorage.getItem("kin-pass"); var Enterpass=document.getElementById("enterpass").value; if(PassWord===Enterpass){ document.getElementById("enterpass-body").classList.add("off"); }else{ document.getElementById("enterpass").classList.toggle("shake"); document.getElementById("enterpass").classList.toggle("shake-2"); } } // ページの読み込み時 window.addEventListener("load",()=>{ var OnOff=localStorage.getItem("passlock") if(OnOff==1){ document.getElementById("enterpass-body").classList.remove("off"); }else{ console.log("パスロックOFF"); }; });パスコード入力モーダルは、position:absolute;でビューポートいっぱいに画面に重ねられており、デフォルトでdisplay:none;がついています。アプリを開いたときに、ローカルストレージから0か1かを取得し、1なら(パスロックがONなら)display:none;を外してパスコード入力モーダルを表示させます。0ならdisplay:none;のままです。
パスロックがONの場合、先程のパスロックメニューで設定したパスコードと、フォームに入力されたパスコードが同じであれば、もう一度モーダルがdisplay:none;となり、パスロック解除となります。以上が、JavaScriptでフロントだけで簡易パスロックを実装する方法です。
6. 注意点
注意したいのは、パスロックといえどモーダルで隠してるだけで、開発者ツールで普通に中身が見れてしまうのでWebアプリやサイトではパスロックとしては全く意味がないということです。ただ、今回のようにmonacaでアプリ化した場合には開発者ツールで覗くなんてことはできませんので、こういう場合に限っては、パスロックとしてそこそこ使えるんじゃないかと思います。
今回パスロックを実装したアプリ
※オ●禁アプリです
禁欲エボリューション過去アプ↓
文字数制限メモ
- 投稿日:2021-03-03T17:02:44+09:00
Google Chromeでfont-sizeを10px以下にする方法
概要
先日、Webサイトを作成していた際に、font-sizeを10px以下にしようとしたところ、数値を10px以下に設定してもブラウザに適用されませんでした(ブラウザは、Google Chromeを使用)。
調べた結果、解決策が分かったので、今回は、Google Chromeでfont-sizeが10px以下にならない時の解決方法を紹介します。目次
- 事前知識
- font-sizeを10px以下にする方法
- 最後に...
事前知識
Google Chromeでは、CSSでfont-sizeを10px以下に設定しても、ブラウザ上で10px以下にはならない。
font-sizeを10px以下にする方法
HTML例文<p class="small">文字サイズ9px</p>CSS例文.small{ -webkit-transform: scale(0.9); -webkit-transform-origin:0 0; }「-webkit-transform」を使って、要素を90%の大きさに縮小します。
「-webkit-transform」のみを指定すると、縮小の基準点が要素の真ん中になってしまうので上下左右に余白が空くことになります。
その為、状況に合わせて、臨機応変に対応する必要があります。
今回は、「-webkit-transform-origin」を使って、縮小の基準点を左上(0,0)に設定しています。補足
・「transform」は、要素の移動、拡大縮小、回転などを制御できます。
・「-webkit-」を使用した場合、safariにも効いてしまうので、他のブラウザには、効かせたくない場合は注意が必要です。最後に...
今回は、Google Chromeでfont-sizeを10px以下にする方法を紹介しました。
最後まで、読んでいただきありがとうございました。
- 投稿日:2021-03-03T16:32:37+09:00
【CSS】オシャレな縁取り文字を簡単に作る方法
初めに
この記事は、上記記事で紹介したポートフォリオで使用した技術を切り出した記事になります。もし宜しかったらこちらもご覧ください。
イメージ図
今回紹介する縁取り文字を使用すると、上記の「Typing for Programer with Typie」の部分のように、「文字の外側を縁取る」ことが簡単に出来るようになります。どんな場面で有効か
上記画像はポートフォリオのランディングページなのですが、ご覧の通り画像を画面一杯に使用しております。この場合、画像の上に文字を表示することになるのですが、背景に明るい場所や暗い場所があるので、どんな色を採用しても読みづらい部分が必ず出てきます。かといって、文字を表示する部分を塗りつぶしてしまうと、画像を使っている意味が半減してしまうと考えました。
そこでたどり着いた結論がこの「縁取り文字」でした。
これならば背景色が何色だろうと文字を把握することが出来る上、画像を隠す範囲を最小限にすることが出来ます。人間の脳って、こういう「縁があるもの」を1つのカタマリとして認識しやすい構造になってるんでしょうね。縁取り文字の作り方
上記URLの「CMAN」というサイトを活用させて頂きました。
手順
- 文字の色を決める
- 縁取りの色を決める
- 縁取りの太さやぼかし加減を決める
- 実際にどう表示されるのか確認しながら微調整していく
- 出来上がったCSSを自分のアプリにコピペし、この内容を反映させたい要素のクラスに"outline"を書き足す
以上です!!!
文字色や縁取りの太さの変更はリアルタイムで下の見本に表示されるので、これだ!と思うデザインになるまでいくらでも自由に編集可能ですし、完成したらそのCSSをコピペするだけで自分のアプリへ反映することが出来ます。
本当に便利ですので、もし宜しかったら一度試してみてはいかがでしょうか?また、この「CMAN」というサイトは「縁取り文字」だけでなく色んなWEBパーツを同様の方法で作成することが出来ます。作れるデザインの幅が格段に広がるかと思いますので、是非アクセスしてみてください!!
- 投稿日:2021-03-03T15:17:40+09:00
3/3はひなまつり?なのでCSSだけでひし餅(菱餅)作ってみた
どうも7noteです。~餅シリーズ第二弾~ひし餅をCSSだけで作ってみた
CSSだけで作るシリーズ、ひなまつりに合わせてひし餅でも作りましょう。
前回作成したCSSでの立方体の作り方(サイコロも作れるよ)のときに作成した紙を応用して作っていきます作り方
index.html<div class="mochi"> <div class="item top"></div> <div class="item item01-L"></div> <div class="item item01-R"></div> <div class="item item02-L"></div> <div class="item item02-R"></div> <div class="item item03-L"></div> <div class="item item03-R"></div> </div>style.css.mochi { display:block; position:relative; width:100px; height:100px; transform-style:preserve-3d; transform:rotateX(-25deg) rotateY(-45deg); /* ここで四角の角度を調整できる */ } .mochi .item { width: 100%; height: 10px; position:absolute; left:0; right:0; box-sizing:border-box; } /* 上 */ .mochi .item.top{ transform:translate3d(0, -50px, 0) rotateX(-90deg); height:100%; background: #EFCBD7; } /* 1段目左 */ .mochi .item01-L { transform:translate3d(0, 0, 50px); background: #ECB0BB; } /* 1段目右 */ .mochi .item01-R { transform:translate3d(50px, 0, 0) rotateY(90deg); background: #ECB0BB; } /* 2段目左 */ .mochi .item02-L { transform:translate3d(0, 10px, 50px); background: #F7F7F7; } /* 2段目右 */ .mochi .item02-R { transform:translate3d(50px, 10px, 0) rotateY(90deg); background: #F7F7F7; } /* 3段目左 */ .mochi .item03-L { transform:translate3d(0, 20px, 50px); background: #8ABF47; } /* 3段目右 */ .mochi .item03-R { transform:translate3d(50px, 20px, 0) rotateY(90deg); background: #8ABF47; }完成
おまけ
小学生のとき、まだ肌寒い中給食で三色ゼリーが出たのが特別感あって嬉しい日でした。
寒いのに冷たいゼリーって思っていてもやっぱり嬉しかったですね。第一弾もよければ参考に:「迎春なので鏡餅をCSSで作った」
おそまつ!
~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ
- 投稿日:2021-03-03T13:42:55+09:00
以上、以下、未満、超過のネーミング
メディアクエリの変数を作るときなど、
以上、以下、未満、超過のネーミングについていつも悩むので今後はこれで。
ネーミング 意味 超過 gt greater than 以上 gte greater than or equal to 以下 lte less than or equal to 未満 lt less than @sdkeiさんにコメントいただきました。
以上・以下も2文字で ge・le と書くことが多いようです。
ありがとうございます。
参考 :
Comparison Query Operators — MongoDB Manual
Bash Conditional Expressions (Bash Reference Manual)
関係演算子 - Wikipedia
- 投稿日:2021-03-03T13:26:23+09:00
フレックスボックスについて②
次にフレックスボックスの親要素について勉強していきましょう。
前回のフレックスボックスについてはこちら▶https://qiita.com/akari_0618/items/080dad83a550ea439fd2親要素に当てるフレックスボックス
少し複雑になるので整理しながらやっていきましょう。
まず出てくるのは①flex-direction
主軸の方向や向きを決めるプロバティです!
style.css.container { background-color: crimson; display: flex; flex-direction: row; } .case1 { background-color: aqua; width: 30%; } .case2 { background-color: burlywood; width: 30%; } .case3 { background-color: cornflowerblue; width: 30%; }1.flex-direction;row
ブラウザで表示すると変わらないように見えますのでスクショは省きますが、
これだと主軸は箇条書きリストで向きは左に向かっていきます。
2.flex-direction:column;
に変えてみましょう!
積み重なっているのがわかりますかね!この場合は主軸が箇条書きリストから始まって下に続いて行きます!ちなみにそれぞれにreverseという値がありますが、これはそれぞれ反対なので自分でやってみましょう!
justify-content
中身のアイテムの間や周囲に間隔を配置する方法を定義します!
flex-directionの下にかきます。style.css.container { background-color: crimson; display: flex; flex-direction: row; justify-content: space-between; }3.space-around
space-betweenとの違いがわかりにくいですが、端も空いてる部分ですね!③align-items
こちらは子要素に直接当てるようです。もしこの子が当たんなかった場合はcontainerに高さをセットすればいいみたいです!
1.center
align-item は少し私も不安がありますが今、コードがこの状態なので、おそらく主軸が左で交差軸が上?になってるのかな?笑
style.css.container { background-color: crimson; display: flex; flex-direction:row; justify-content: space-around; align-items: flex-end; height: 200px; }
- 投稿日:2021-03-03T12:17:11+09:00
JavaScript 要素を表示/非表示にする
visibility:hidden;
とvisibility:visible;
で表示、非表示を作成する尚、外部ファイルは取り込まずhtmlファイル内に
<script></script>
タグを使用して記述show.html.erb# クリックして開くところ <div id="p1" class="dialog"> # クリックすることろ <svg class="user-circleicon" onclick="clickBtn1()" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> ... </div>show.html.erb<script> # デフォルトは非表示 document.getElementById("p1").style.visibility ="hidden"; function clickBtn1(){ const p1 = document.getElementById("p1"); if(p1.style.visibility=="visible"){ p1.style.visibility ="hidden"; }else{ p1.style.visibility ="visible"; } } </script>
- 投稿日:2021-03-03T11:54:47+09:00
フレックスボックスについて①
今回は前回の記事で作ったものからCSSのFlexboxを使っていきたいと思います。
今回取り上げるのはほんの一部なので、気になる場合は自分で調べてみてください?フレックスボックスとは
横の主軸と縦の交差軸を使ってやるみたいなんですね。全然わからないんで、詳しくは自分で調べてみてください?
私はなんとなくわかったので、とりあえず、進みます?実装
結局なんだろうって方もとりあえず先に進んで見ましょう。
まず、index.htmlを書き換えます! 前回の記事はこちら!▶https://qiita.com/akari_0618/items/ac6eb7fae89f2329ed2cindex.html<link rel="stylesheet" href="css/style.css"> <div class="container"> <section class="case1"> <h1>箇条書きリスト</h1> <ul> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ul> </section> <section class="case2"> <h1>順序付きリスト</h1> <ol> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ol> </section> <section class="case3"> <h1>説明リスト</h1> <dt>あなたの名前は?</dt> <dd>山田花子</dd> <dt>あなたは女性ですか?</dt> <dd>はいそうです</dd> </section> </div>少しわかりにくいですが、新たにdivクラスにcontainerという親要素を追加します。
親要素とクラスが不安な方は▶https://qiita.com/akari_0618/items/3526fd7b751d9387667d
それではcssをいじっていきますね!style.css.container { background-color: crimson; display: flex; } .case1 { background-color: aqua; width: 30%; } .case2 { background-color: burlywood; width: 30%; } .case3 { background-color: cornflowerblue; width: 30%; }子要素のcaseさんたちをwidth設定します!
そして、display:flex; を親要素に指定します!
『フレックスボックスはじまるよー!』の合図ですね?横に整列しましたね!
次からは親要素に適応するフレックスボックスについて学んで行きましょう!
- 投稿日:2021-03-03T11:01:20+09:00
ULボックスのその他
この記事ではUlボックスの中身の紹介をします。
前の記事でも紹介しましたが、ここではその他について紹介しますね?①箇条書きリストについて
これは、リスト項目についてのタグでしたね。
index.html<section class="case1"> <ul> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ul> </section>順序付きリストについて
index.html<section class="case2"> <h1>順序付きリスト</h1> <ol> <li>あいうえお</li> <li>かきくけこ</li> <li>さしすせそ</li> </ol> </section>ちょっと混乱しそうですが、前回と違いolタグで囲んでいます。
これは「オーダードリスト」と読みます。説明リストについて
index.html<section class="case3"> <h1>説明リスト</h1> <dt>あなたの名前は?</dt> <dd>山田花子</dd> <dt>あなたは女性ですか?</dt> <dd>はいそうです</dd> </section>上記では質問形式になっていますが、下記のようになっています。
dt▶定義語・用語
dd▶dtで囲った用語を説明する文章ではこれらの要素をCSSを使って少し動かして行きたいなと思います。
次の記事で動かしていきます。
- 投稿日:2021-03-03T09:04:41+09:00
スクロールバーを上下に挿入
業務でスクロールバーを上下に挿入したので、記録に残していきたいと思います。
イメージとしてはこんな感じです。
スクロールバー上下が連動して移動できるようになってます。実装
index2.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>上下スクロールバー</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="containar"> <div class="scrollbar" id="scrollbar"> <div class="inner"></div> </div> <div class="scrollbox" id="scrollbox"> <div class="inner"> <table id="data-table"> <th>項目1</th> <th>項目2</th> <th>項目3</th> <th>項目4</th> <th>項目5</th> <th>項目6</th> <th>項目7</th> <th>項目8</th> <th>項目9</th> <th>項目10</th> <th>項目11</th> <th>項目12</th> <th>項目13</th> <th>項目14</th> <th>項目15</th> <th>項目16</th> <th>項目17</th> <th>項目18</th> </table> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"></script> <script src="main.js"></script> </body> </html>tableタグにthをセットします。
※thは「Table Header(見出し)」のことです。style.css#containar { width: 500px; padding: 100px; } .scrollbar { width: 100%; overflow-x: scroll; overflow-y: hidden; } .scrollbar .inner { width: 2500px; height: 1px; } .scrollbox { width: 100%; margin-top: 5px; overflow-x: scroll; overflow-y: hidden; } .scrollbox .inner { width: 2500px; margin-bottom: 5px; background-color: #F9F8F6; } .scrollbox .txt { margin: 0; font-size: 16px; line-height: 1.5; }レイアウト変更とスクロールバーをセットします。
この時点では行にデータが入っていなく、上下のスクロールバーが連動していないことがわかります。
では次main.js//上下のスクロールバー連動 $(function () { //「対象要素.on( イベント名, 関数 )」 //イベント名がscrollなので、画面がスクロールした時に発動 $("#scrollbar, #scrollbox").on("scroll", function () { if ($(this).attr("id") === "scrollbar") { //scrollLeftでスクロール量を取得 $("#scrollbox").scrollLeft($(this).scrollLeft()); } else { $("#scrollbar").scrollLeft($(this).scrollLeft()); } }); }); //行にデータを挿入 var tableEle = document.getElementById("data-table"); for (var i = 0; i < 5; i++) { // テーブルの行を 5行追加する var tr = document.createElement("tr"); for (var j = 0; j < 18; j++) { // テーブルの列を 18行追加する var td = document.createElement("td"); td.innerHTML = "データ" + (i + 1) + "-" + (j + 1); tr.appendChild(td); } tableEle.appendChild(tr); }このようにすることによって行にデータが入り、上下のスクロールバーが連動していることがわかります
参考
- 投稿日:2021-03-03T08:34:54+09:00
JavaScriptで電卓を作ってみた。
JavaScriptで簡単な電卓を作ってみました。
21/3/4:小数計算に誤りがあったため、修正しました。
主な仕様
- 四則演算の電卓。
- 連続して計算できるようにしたい。
本当にシンプルな電卓です。
HTML & CSS
Html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UFT-8"> <title>電卓</title> <link rel="stylesheet" href="main.css"> <script src="jquery-3.5.1.min.js"></script> </head> <body> <p class="show_number">0</p> <div class="number_button"> <table> <tr> <td><button class="number" id="Seven">7</button></td> <td><button class="number" id="Eight">8</button></td> <td><button class="number" id="Nine">9</button></td> <td><button class="operator" id="Plus">+</button></td> </tr> <tr> <td><button class="number" id="Four">4</button></td> <td><button class="number" id="Five">5</button></td> <td><button class="number" id="Six">6</button></td> <td><button class="operator" id="minus">-</button></td> </tr> <tr> <td><button class="number" id="One">1</button></td> <td><button class="number" id="Two">2</button></td> <td><button class="number" id="Three">3</button></td> <td><button class="operator" id="Asterisk">*</button></td> </tr> <tr> <td><button class="number" id="Zero">0</button></td> <td><button class="number" id="DoubleZero">00</button></td> <td><button class="number" id="Point">.</button></td> <td><button class="operator" id="Slash">/</button></td> </tr> <tr> <td colspan="2"><button class="Allclear" id="AllClear">AC</button></td> <td colspan="2"><button class="Equal" id="Equal">=</button></td> </tr> </table> </div> <script type="text/javascript" src="main.js" charset="UTF-8"></script> </body> </html>jQueryを使用。
電卓のボタンはtableで配置して整理しやすくしてます。CSS.show_number { background-color: black; color: white; width: 300px; height: 30px; text-align: right; font-weight: bold; margin-bottom: -1px; } .number_button { width: 300px; } table { width: 100%; } td { width: 25%; } button { width: 100%; font: 16px bold; }cssは簡単に、ボタンの体裁を整えるだけ。
JavaScriptで計算
JavaScriptfunction getDotPosition(float){ let dotPosition = 0; float=String(float); if(float.lastIndexOf('.') != -1){ dotPosition = (float.length-1) - float.lastIndexOf('.'); } return dotPosition; } function Calc(num1, num2, ope){ let result = 0; let dotPosition1 = getDotPosition(num1); let dotPosition2 = getDotPosition(num2); let max = Math.max(dotPosition1, dotPosition2); num1 = parseFloat(num1); num2 = parseFloat(num2); let value1 = parseInt((num1.toFixed(max) + '').replace('.', '')); let value2 = parseInt((num2.toFixed(max) + '').replace('.', '')); if(ope==3){ if (max == 1) { max = max + 1; } else { max = max + max; } } let power = Math.pow(10, max); if(ope==1){ result = (value1 + value2) / power; }else if(ope==2){ result = (value1 - value2) / power; }else if(ope==3){ result = (value1 * value2) / power; }else if(ope==4){ result = (value1 / value2); } return result } let num1 = 0; let num2 = 0; let ope = 0; let point = 0; let show_text = 0; let number = 0; let state = 0; let negative = 0; $(document).ready(function(){ $("button").click(function(){ let classes = $(this).attr("class"); let id = $(this).attr("id"); let text =$(this).text(); if(id == "AllClear"){ $(".show_number").text(0); num1 = 0; num2 = 0; ope = 0; point = 0; show_text=0; number=0; }else if(id=="minus" && show_text==0){ negative=1; }else if(classes == "number"){ state=0; if(id=="Point"){ if(point==0){ if(show_text==0){ number = 0 + text; }else{ number = $(".show_number").text() + text; } point = 1; show_text = 1; $(".show_number").text(number); } }else if(id=="DoubleZero"){ if(show_text!=0){ number = $(".show_number").text() + text; $(".show_number").text(number); } }else if(id=="Zero"){ if(show_text!=0){ number = $(".show_number").text() + text; $(".show_number").text(number); } }else{ if(show_text==0){ if(negative==1){ text = -1 * text; negative=0; } $(".show_number").text(text); show_text=1; }else{ number = $(".show_number").text() + text; $(".show_number").text(number); } } }else if(classes=="operator"){ if(num1==0){ num1 = $(".show_number").text(); }else if(num1!=0){ num2 = $(".show_number").text(); } if(num2!=0 && state != 1){ result = Calc(num1, num2, ope); num1 = result; $(".show_number").text(num1); } if(id=="Plus"){ ope=1; state=1; }else if(id=="minus"){ ope=2; state=1; }else if(id=="Asterisk"){ ope=3; state=1; }else if(id=="Slash"){ ope=4; state=1; } show_text=0; point=0 }else if(id=="Equal"){ if(num1!=0){ num2 =$(".show_number").text(); } result = Calc(num1, num2, ope); $(".show_number").text(result); show_text = 0; point=0; ope = 0; num1 = 0; num2 = 0; } }); });
小数点の計算に誤差が出るのでgetDotPosition関数で調整。
Calc関数に数字1、数字2、演算を引数にとって計算させる。
- 計算中に小数点を処理しています。(後述)
global変数を用意。
- num1, num2: 数字2つ分
- ope: 演算
- point: 小数点の入力のFlag
- show_text: 表示が0かどうかのフラグ
- number: show_textへ反映させる変数
- state: 演算子Flag
- negative: マイナス処理のFlag
ボタンが押された時に、
- 押されたボタンのclass, id, 表示を取得。
- ACが押されたら全てを初期化。
- 計算の最初にマイナスが押されたら、negativeフラグを立てる。
- 小数点が押された時、表示の後に続けて小数点を入力し、pointフラグを立てる。
- pointフラグが立っている時は小数点の入力を受け付けないようにする。
- 0または00が押された時、電卓の表示が0じゃなければ、その後に入力を足す。
- 表示が0の時に00を続けて入力できないようにする。
- それ以外の数字ボタンの時、
- 表示が0なら押した数字を表示。
- その時negativeフラグが立っていたら、マイナスの数値で表示。
- 表示が0じゃなければ、その後に数字を表示。表示フラグを立てる。
- 演算子の時、
- num1が登録されてなければ、表示の数字をnum1に登録。
- num1が登録されていれば、表示の数字をnum2に登録。
- num2の登録があり、演算子フラグがなければ、
- Calc関数で計算処理をし、結果をnum1に代入して、電卓に表示。
- この処理で計算を続けて行うことができるようになる。
- 各演算子に割り当てた変数をopeに代入して、演算子フラグを立てる。
- 演算子フラグにより、演算子を間違って押しても、計算処理をせずに押しなおすことができる。
- 表示フラグを0に、小数点フラグを0に戻す。
- =ボタンの時、
- num1が登録されていれば、num2に表示を代入する。
- Calc関数で計算をする。
- 電卓上に結果を表示。
- 各フラグを戻す。
小数点の計算について
小数点の計算は誤差が出ることがあるので、その処理をする必要があります。
ライブラリを導入する方法もあるようですが、今回はライブラリは使用してません。
数値を文字列に直して、小数点の位置をlastIndexOf関数で確認していきます。(String, getDotPosition)
小数点の位置が分かったら、小数点を解消するために桁数を記録しておきます。(Calc関数dotPosition1, dotPosition2, max)
数値に直した後 (parseFloat)、小数点を解消します(replace)。
桁数を別に置いておいて (power)、計算後に小数点の処理をします。この処理をしておくと、誤差がなくなり正しく計算できます。
完成
参考資料
jQueryでクリックされたid値をとる
JavaScript:計算誤差の対処
JavaScriptでの小数点の計算の誤差について
- 投稿日:2021-03-03T07:13:26+09:00
JavaScriptでストップウォッチを作ってみた。
HMTL CSS JavaScriptで簡単なストップウォッチを作ってみた。
主な仕様
0.1秒単位でカウントアップ
一時停止機能あり
リセットボタンでカウントを初期化
本当に簡単なものになっています。
HTML & CSS
まずはHTMLとCSSでストップウォッチの形を作ります。
HTML<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ストップウォッチ</title> <link rel="stylesheet" href="main.css"> <script src="jquery-3.5.1.min.js"></script> </head> <body> <h3>ストップウォッチ</h3> <div class="time_count"> <p id="hour">0</p> <p>:</p> <p id="minute">0</p> <p>:</p> <p id="second">0</p> <p>:</p> <p id="m_second">0</p> </div> <button class="button" id="start" onclick="count_start()">スタート</button> <button class="button" id="stop">ストップ</button> <button class="button" id="reset">リセット</button> <script type="text/javascript" src="main.js" charset="UTF-8"></script> </body> </html>今回はjQueryを使います。
time_countクラスでタイマー部分を作成し。buttonで各種ボタンを配置します。CSS.time_count { display: flex; } .time_count p { margin-left: 10px; margin-right: 10px; font-size: 25px; font-weight: bold; } .button { width: 100px; height: 50px; border: 1px solid; font-weight: bolder; }CSSは簡潔に、ボタンの大きさやフォントの大きさを設定。
time_countクラスをflexにして、横並びにタイマーらしく見せています。JavaScriptで動きをつける
JavaScriptfunction TimeCount(){ let ms = $("#m_second").text(); let sec = $("#second").text(); let min = $("#minute").text(); let hour = $("#hour").text(); ms++; $("#m_second").text(ms); if ($("#m_second").text()==10){ sec++; $("#m_second").text(0); $("#second").text(sec); } if ($("#second").text()==60){ min++; $("#second").text(0); $("#minute").text(min); } if ($("#second").text()==60){ min++; $("#second").text(0); $("#minute").text(min); } if ($("#minute").text()==60){ hour++; $("#minute").text(0); $("#hour").text(hour); } } let start = 0; let time_count = null; $(document).ready(function(){ $("#start").click(function(){ start += 1 if (start==1){ time_count = setInterval(TimeCount, 100); }; }); $("#stop").click(function(){ clearInterval(time_count); start = 0; }); $("#reset").click(function(){ clearInterval(time_count); start=0; $("#hour").text(0); $("#minute").text(0); $("#second").text(0); $("#m_second").text(0); }); });
TimeCount関数でタイマーの動きを制御します。
- msが1つずつ増加していく。
- msが10になったらs (秒)が1増加。
- sが60になったらm (分)が1増加。
- mが60になったらh (時)が1増加。
- それぞれ、位が上がったら0に戻す(msが10になった時、sを+1してmsは0にする)。
- 関数が呼び出された時は、タイマーの続きから始められるように初期値を代入する。
start変数を置いて、startボタンが押されたら1ずつ追加。
- start変数が1の時(startボタンが1回押された時)にタイマースタート。
- この変数がないと、連続してstartボタンが押せてしまう。
setInterval関数で100msずつカウントする。
time_count変数にsetIntervalを代入してclearできるようにする。
- time_count変数をどの関数からでも操作できるように、Global変数(関数の外におく)にする。
ストップボタンで一時停止する
- clearIntervalだけで初期化しないため、すぐにstartを押すと、一時停止したところから再開可能。
リセットボタンでタイマーを止めた後、全てを初期化する
ストップボタンやリセットボタンが押された時は、start変数を0にして、再度スタートできるようにしておく。
完成
- 投稿日:2021-03-03T05:33:56+09:00
カード型リンクでカード内に複数のリンクがあるときにリンクハイライトを綺麗に設定する
リンクをカード型デザインしているとカード内にリンクが複数あることが多々ある。
パソコンでは:hover
で適当に実装できるが、スマホだとリンクのハイライトが綺麗に実装されない。ので、リンクハイライトが綺麗に実装できる方法を記載します?
カード型のレイアウトをつくる
<a href="記事に飛ぶ" class="card"> <a href="記事に飛ぶ"> <img src="thumbnail.png" src="thumbnail"> <h1>Title</h1> <p>Paragraph</p> </a> <a href="ユーザー情報に飛ぶ">Name</a> </a>リンクを機能させる
上記のコードだとユーザー情報へのリンクが機能しなくなるので、
<div class="card"> <a href="記事に飛ぶ"> <img src="thumbnail.png" src="thumbnail"> <h1>Title</h1> <p>Paragraph</p> </a> <a href="ユーザー情報に飛ぶ">Name</a> </div>こんな感じのコードにする。
これで、記事情報とユーザー情報のどちらのリンクも機能する。
しかし、一番最初に記載した通り、ハイライトが綺麗に実装されない。ハイライトを全体につける
全体につけるのであればカード全体をリンクとして扱う必要がある。
<div class="card"> <a href="記事に飛ぶ" class="card-link"></a> <a href="記事に飛ぶ"> <img src="thumbnail.png" src="thumbnail"> <h1>Title</h1> <p>Paragraph</p> </a> <a href="ユーザー情報に飛ぶ">Name</a> </div>a { -webkit-tap-highlight-color: transparent; /* ここで一旦ハイライトを全部なくす */ } .card { position: relative; } .card-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; -webkit-tap-highlight-color: rgba(77, 200, 220, .24); }これでカード全体にリンクのハイライトがかかるようになった
z-indexでリンクのz位置を調整する
上記のままだと結局記事ページにしか飛ぶことができないので、z位置を調整してうまくリンクが配置されるようにする
わかりやすくクラス名をつけます
<div class="card"> <a href="記事に飛ぶ" class="card-link"></a> <a href="記事に飛ぶ" class="article-link"> <img src="thumbnail.png" src="thumbnail"> <h1>Title</h1> <p>Paragraph</p> </a> <a href="ユーザー情報に飛ぶ" class="user-link">Name</a> </div>a { -webkit-tap-highlight-color: transparent; /* ここで一旦ハイライトを全部なくす */ } .card { position: relative; } .card-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; z-index: 2; -webkit-tap-highlight-color: rgba(77, 200, 220, .24); /* ここだけハイライトをつける */ } .article-link { pointer-events: none; z-index: 3; } .user-link { z-index: 4; }
article-link
をタップするとpointer-events: none;
だから、下のレイヤーにあるcard-link
がタップされたことになり、記事に飛ぶ
user-link
をタップすると一番上のレイヤーにあるから、そのままユーザー情報へ飛ぶハイライトは
card-link
だけにつけてるから、user-link
をタップしても変にハイライトされない。
article-link
はdiv
でええやんって思うかもですが、pointer-events: none;
が正しく動作しない場合などの保険にa
にしています。
今はそう思ってるだけで多分そのうち設計方法は変えると思うのでこれが正ではないです。あくまで、レイヤー構造を変更して、スマホのリンクのハイライトがうまく活用できる方法のひとつとして捉えてください。
- 投稿日:2021-03-03T00:16:51+09:00
超初心者向けざっくり学ぶWebフロントエンド入門 ~前編~
はじめに~これを書いた目的~
大学の後輩でwebプログラミングについて興味のある方が多かったので身内で簡単なwebの勉強会を開いたが、そのまとめ・補足用の資料を作りたかったため。
対象読者
プログラミング・Webデザイン初心者。Web制作の大枠を知りたい方向け。
それぞれの内容について深堀りするような記事ではないので、詳しく知りたい方は参考にならないかも。後、HTML,CSSがほとんどなのでwebデザインの内容が比重高いです。
また、極力専門的な用語を省いて書くようにしています。環境構築
HTML,CSS,JSは環境構築をする必要がありません。ブラウザとテキストエディタさえあれば十分なので、お好きなテキストエディタとブラウザを使用してください。ブラウザはGoogleChrome推奨です。テキストエディタに関して、私はVisualStudioCodeを使っています。
vscodeのダウンロードページへのリンク
https://azure.microsoft.com/ja-jp/products/visual-studio-code/HTML・CSSとは?
HTMLはHyperText Markup Languageの略。すごいざっくり説明すると、webページの骨組みを作る言語。厳密にはプログラミング言語ではない。
CSSはCascading Style Sheetsの略。こちらは、HTMLで作った骨組みに装飾をするための言語。こちらも同じくプログラミング言語ではない。
JS(JavaScript)とは?
プログラミング言語の1つ。ブラウザ上で動かすことができる。webサイトのページをプログラム上から書き換える、イベント処理(クリックしたら〇〇を表示)、webサイトに複雑なアニメーションをつけるなどが可能。
HTML・CSS入門
文字だけのシンプルなサイト
文字だけが表示されているシンプルなwebサイト。ブラウザでファイルを開くと、「hello」とだけ表示される。
HTMLは<p>
などのタグと呼ばれるもので文を囲んでいくことでwebページの骨組みを作る。
見出しや本文などwebページの内容は基本的に<body>
と</body>
の間に書く。ちなみに、pタグ(<p></p>
)はparagraph(段落)の略。<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字だけです</title> </head> <body> <p>hello</p> </body> </html>装飾したサイト(シンプル)
HTMLに装飾をしたい場合、CSSを書く必要があると言ったが、CSSはHTMLファイルに直接書かず、別途ファイルを作りそれを読み込んでHTMLにCSSを適用するケースが多い。
sample1_00.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cssを読み込んでwebサイトを装飾する</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <p>hello</p> </body> </html>style.css/*pタグの文字色を青色に変えて、フォントサイズを20pxにする*/ p { color: blue; font-size: 20px; }
<link rel="stylesheet" href="./css/style.css">
は、ルートディレクトリ(1番上の階層のこと)のcssというフォルダのstyle.cssというスタイルシートを読み込むよという意味。タグの種類には、一番大きな見出しを表すh1タグ、要素をグループ化するdivタグなど他にも多数あるので必要に応じて是非自分で調べてみて欲しい。「HTML タグ 種類」などで調べてると出てくるかも。cssでは基本的に、
cssを適用させたい場所{
どういう装飾をするか:色やサイズなどの細かいプロパティ;
}という書き方をする。今回は、pタグに対して色を青に変えて、フォントサイズを20pxに変えたかったので上記のようになった。
別ページのリンクを貼るには
aタグにリンク先のURLを指定してあげることでwebサイトのリンクを貼ることができる。
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <a href="https://qiita.com/helloworld193/items/9aed3870be1e739c3ad2">過去に書いた別の記事。みてくれると嬉しいです。</a> </body> </html>画像を表示させたい場合
画像を表示したい場合、imgタグを使う。cssファイル同様、表示させたい画像のパス(ファイルの置き場所)を書く。
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <img src="./img/sample.jpg" alt=""> </body> </html>cssを適用させる場所を細かく指定したい場合
前述の内容でcssの読み込み方や装飾方法を学んだ。しかし、このままだとある問題が発生する。
pタグやh1タグを直接指定した場合、ファイル内の全てのpタグもしくはh1タグにスタイルが適用されてしまうという問題だ。
じゃあ、どうするか。
独自に名前を付けて、スタイルを適用する場所でその名前を指定してあげればいい。そうすれば、〇〇という名前がついたpタグ、h1タグというように細かく指定できる。それを可能にするのが、id属性とclass属性だ。
class属性
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>class属性</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <p class="give_class">class属性がついています</p> </body> </html>style.css.give_class{ color: rgb(29, 117, 88); font-size: 20px; }id属性
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <p id="give_id">id属性が付与されてます</p> </body> </html>style.css#give_id{ font-size: 40px; color: rgb(255, 189, 109); }簡単にまとめると、idをcssで指定する場合は#id名、classを指定する場合は、.class名で指定してあげる。
idとclassの違い
ここで勘の鋭い方もそうではない方も1つ疑問に思ったかもしれない。
「名前をつけるためにidとclassの2つあるのはなぜ? もし、名前をつけるためならどちらか1つで十分なはず。にもかかわらず2つあるのには何か理由があるのでは?」 と。実は、idとclassにはいくつか違いがあり、以下のようになっている。
idは同じwebページ内で何度も同じ名前(id名)を使うことができないのに対し、classは同じ名前(class名)を複数使用することができる。学生っぽく例えると、classは学科名でidは学籍番号みたいなイメージ。同じ学科の人はたくさんいるが、同じ学籍番号の人は存在しないはず。
cssが適用される優先順位はidの方が上
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <p id="give_id" class="give_class">id属性につけたスタイルが優先されます</p> </body> </html>style.css#give_id { font-size: 40px; color: rgb(144, 202, 120); /* 緑 */ } .give_class { font-size: 40px; color: rgb(123, 41, 255); /* 赤 */ }
- idを使うとページ内リンク(同ページの特定箇所に移動できる)を貼ることができる
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <p id="give_id">ここですここここここここ</p> <br> <p>テキスト</p> <p>テキスト</p> <br> <p>テキスト</p> <p>テキスト</p> <br> <p>テキスト</p> <p>テキスト</p> <br> <p>テキスト</p> <p>テキスト</p> <br> <p>テキスト</p> <p>テキスト</p> <br> <p>テキスト</p> <p>テキスト</p> <p><a href="#give_id">ここをクリックすると、give_idのidがついた箇所に移動する</a></p> </body> </html>style.css#give_id { font-size: 20px; color: rgb(144, 202, 120); } .give_class { font-size: 20px; color: rgb(123, 41, 255); }余白を設定したい場合
cssで余白を設定したい場合、paddingもしくはmarginを使って余白の指定をする。
簡単に説明すると、paddingは境界線の内側の余白、marginは外側の余白だ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/style.css"> </head> <body> <p class="content">要素</p> <p class="content">要素</p> <p class="content">要素</p> </body> </html>style.css.content{ padding: 20px; margin: 10px; background-color: rgb(255, 194, 115); border: 2px solid#696969; }この場合、要素の境界線の外側に10px、内側に20px余白を入れている。
JS入門
HelloWorld!してみる
プログラミング初心者が必ず通る道と言われてるHelloWorldプログラムを作ってみる。
HelloWorldを知らない人がほとんどだと信じて軽く説明しておくと、「HelloWorld」という文字を表示するだけ。
余談だが、僕のアカウント名の由来もこれだったりする。当時、名前から全力で初心者感を出そうと思ってたらこれに行き着いたっていう。JSを書く方法は主に2通り。
- HTML内のscriptタグの中に直接書く方法
- 別ファイルで分けてそれをscriptタグを使って読み込む方法
HTML内のscriptタグの中に直接書く場合
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> console.log("HelloWorld") </script> </body> </html>ブラウザで確認してみると、何も表示されていない。
これは上手く言ってないのではと思うかもしれないが、実はJSを実行することができている。
まず、ブラウザにはデベロッパーツールと言うものがあり、それを使ってページの動作のチェックなどができるのだが、キーボードのF12を押すと出てくるので確認してみよう。
すると、その中にConsole(画像の赤線で囲まれた箇所)という名前の箇所があると思うので、それをクリック
すると、Consoleの部分にHelloWorldと表示されているのがわかる。
ちなみに、気になった人もいるかもしれないので補足しておくと、scriptタグをbodyタグの最後に書くとwebページの表示速度が速くなるので、scriptタグはbodyタグの最後に書くことを推奨する。
別ファイルで分けてそれを読み込む場合
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>別ファイルで分けてそれを読み込む場合</title> </head> <body> <script src="./HelloWorld.js"></script> </body> </html>HelloWorld.jsconsole.log("HelloWorld");変数
変数とは、ざっくり言うと値につけるラベルのようなもの。
余談だが、変数は箱で例える派とラベルorタグで例える派がいるので、人によって若干説明は変わるかもしれない。でも、書いてたら自然とイメージできてくるのでとりあえずアウトプットすることを意識してほしい。
変数に数値を代入するとき
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> let password = 1234; //変数の定義 console.log(password); </script> </html>実行結果
このプログラムの場合、passwordという名の変数を定義していて、それに1234という数値を入れてConsoleに表示している。
では、数値ではなく文字になった場合はどうなるだろうか。
変数に文字(列)を代入するとき
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> let username = "SatoTaro"; console.log(username); </script> </html>上記のプログラムでは、SatoTaroという文字列をConsoleに表示している。
変数に文字列を代入する場合は、代入するときに""で囲んで使う。ちなみに、数値を""で囲んだ場合も文字列扱いになる。文字列の連結
index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> <script> let username = "SatoTaro"; console.log("あなたのユーザー名は"+username+"です"); </script> </html>文字列を連結させたい場合は、+記号を使って連結させる。
計算
演算子と言われるものを知っていれば、電卓みたいに計算できる。(Excel触ったことある人は理解しやすいかも)
indnex.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>計算</title> </head> <body> <script> console.log(1 + 1); //和 console.log(5 - 3); //差 console.log(2 * 3); //積 console.log(6 / 3); //商 console.log(7 % 3); //余剰 </script> </body> </html>条件分岐(if, else文)
これまでConsoleに文字を表示する方法、変数を使う方法を学んできた。でも、これだと毎回ほぼ同じ内容の処理しか書けない。じゃあ、皆さんならどうしたい?
そう、もし〇〇なら□□をさせるみたいな感じのことができると便利だと思っただろう。
それを可能にさせるのがif文、else文と言われるものだ。
長々説明を聞くのも疲れると思うので、早速書いていこう。index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let age = 18 if (age >= 18){ console.log("高校卒業おめでとう!!ヾ(_ _)〃 ヾ(≧ー≦)ゞ ヾ(_ _)〃イェーイ"); } else { console.log("残りの高校生活青春しようぜ!!"); } </script> </body> </html>このプログラムでは、ageが18以上なら「高校卒業おめでとう(以下略)」、それ以外(つまり18より下)なら「残りの高校生活青春しようぜ!!」と表示されるようになっている。是非自分でコードを書き換えて試してみて欲しい。
age が18以上の時
そうではないとき
簡単にまとめると、if文は特定の条件を満たしたなら処理を実行したい場合、else文はif文で書いた条件を満たさなかったら処理を実行したい時に使う。
ちなみに、不等号は
<
と>
を使って表し、等号つき不等号は>=
、<=
の様に書く。
等号は、=
ではなく==
または、===
を使う。繰り返し(for文)
唐突だが、HelloWorldという文字を3回表示させたかったら、あなたならどう書く?
2回コピペしてコードを書き足す方法もあるかもしれない。
でも、もしこれが10000回になったら?
10000回近くコピペを繰り返すのは正直めんどくさい。だからといって、コピペ専門のアルバイトを雇うのはもっとめんどくさい。
そんな時に、繰り返し(for文)を使う。index.html<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>繰り返し</title> </head> <body> <script> for (i = 0; i < 4; i++){ console.log(i + ":HelloWorld") } </script> </body> </html>このプログラムでは、iの値:HelloWorldという文字列を4回表示させている。
for文では「これは何回目の繰り返しなのか?」を数えるための変数が必要である。
なので、()の中に初期化式、条件式、加算式というものを書く。初期化式は変数の値を何からスタートさせるかを書くもの。慣例で0を書くことが多いのでそっちで統一した方が楽。
条件式は、繰り返す条件を書くもの。今回はiが4より小さいなら繰り返すという条件。さて、初期化式と条件式について話したが、この2つだけだとある問題が発生する。
それは、iの値が増えないのでループが永遠に終わらないという問題だ。
これを解決するためには、iの値をループを繰り返す度に変更してやる必要がある。
それが加算式と呼ばれるものだ。今回の場合、iに1を足すという処理をしている。最後に、繰り返し処理にはwhile文と呼ばれるものを使う方法もある。今回は、内容簡略化のため説明を省くが必要に応じて使い分けが必要な文法なので、是非各自で調べてみて欲しい。
関数
プログラムを書く際、似たような処理が何度も必要になる場面があるかもしれない。そのような時、関数を作れば独自で機能を追加してプログラムを使い回すことができる。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>関数</title> </head> <body> <script> function average(A,B,C){ let average = (A + B + C) / 3; return average; } console.log("平均は" + average(3,4,8)); console.log("平均は" + average(6,4,8)); console.log("平均は" + average(3,10,8)); </script> </body> </html>関数を作るときは、
function 関数名(引数){処理}
という書き方をする。また、関数を使うときは関数名(引数);
と書く。
引数とは、関数に渡す値のこと。今回は、受け取った3つの値の平均を求め、averageという変数に代入している。そして、return文を使って、その値を返すというのが今回作った関数だ。
少し説明が分かりにくかったと思うので、キャッチボールで例えよう。自分が相手にボールを投げた時が引数を渡した時、そして、受け取ったボールを返す時がその値を関数内で処理をして返す時だ。HMTLをJSで操作してみる
ここから先が僕が書きたかった内容。ここまでConsole上で文字や数字を表示してきたが、ついにJSからHMTLを操作してみる。
要素を取得
<html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>要素を取得</title> <div id="text"> <p>TextTextText</p> </div> </head> <body> <script> let el = document.getElementById("text"); //#textのHTML要素を取得 console.log(el); </script> </body> </html>JSでHTMLを操作したい場合、まず特定のidが入った要素を取得するという処理を行う。
その場合、getElementById
を使えば、要素を取得することができる。今回のプログラムを簡単に解説すると、
getElementById
で取得したtextというidの要素をelという変数に代入している。そして、それをConsole上に表示した。使い方
document.getElementById("id名");指定した要素の中の末尾に挿入
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>指定した要素の中の末尾に挿入</title> </head> <body> <div id="text"> <p>TextTextText</p> </div> <script> let el = document.getElementById("text"); //#textのHTML要素を取得し let new_el = document.createElement('p'); new_el.textContent = "New Text"; el.appendChild(new_el); </script> </body> </html>このコードをブラウザで開くと、divタグ内のpタグの文字に加えて、New Textという文字が追加で表示されているはずだ。
createElement
を使うと、HTML内に要素(タグ)を追加することができる。
しかし、creteElement
だけではプログラムとして不十分だ。
なぜなら、creteElement
は新しく要素を生成するだけであってそれにテキストを生成するまではできないからである。そこで、
textContent
を使う。
これを使うことで、生成した要素内にテキストを生成することができる。
そして、pタグ内にNew Textという文を生成したが、このままではこの要素をどこに挿入するかが決まらない。
そこで、appendChild
を使う。これによって、どこに挿入するのかが決まる。
ちなみに、appendChild
は親要素の最後だ。他にも、insertBefore
などで要素の挿入場所を決めることができる。少し応用編
繰り返し処理の話で、HTML内に同じテキストを大量に追加したいときを例として出していたので、実際にやってみたいと思う。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>少し応用</title> </head> <body> <div id="text"> <p>TextTextText</p> </div> <script> let el = document.getElementById("text"); //#textのHTML要素を取得してConsoleに表示 for(i = 0; i < 100; i++){ let new_el = document.createElement('p'); //pタグを生成 new_el.textContent = "New Text"; //pタグ内にテキストを追加 el.appendChild(new_el); //#textの末尾に挿入 } </script> </body> </html>表示の関係で全て表示されていないが、このプログラムではNew Textという文字を100回生成させている。
このように、JSで少しHTMLを操作できるだけで自分でコピペ作業をしたり、コピペ専用のバイトを雇う必要がなくなるのでかなり便利だ。イベント処理
例えば、ボタンを押したらテキストを追加したり、アニメーションを追加するなど何かしらイベントを発生させたい時どうすればいいと思う?
そんな時に、いくつかイベント処理をさせる方法がある。
今回は、その一例としてクリックした時の処理を書いていく。<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>イベント処理</title> </head> <body> <button id="btn">クリック</button> <div id="text"> </div> <script> let el = document.getElementById("text"); //#textのHTML要素を取得 let btn = document.getElementById("btn"); //#btnのHTML要素を取得 //btnがクリックされたらこの関数を実行 btn.onclick = function() { let new_el = document.createElement('p'); new_el.textContent = "ボタンを押したらテキストが増える"; el.appendChild(new_el); }; </script> </body> </html>
onclick
を使うと、クリックされた時に行う処理を書くことができる。今回は、ボタンを押す度にテキストが増えるプログラムを書いた。もう少し補足すると、btnというidの要素がクリックされた時に、textというidの要素に対して<p>ボタンを押したらテキストが増える</p>
という要素が追加されるという処理だ。最後に
自分でも気が遠くなるくらいの分量なのに最後まで読んでくれた方ありがとうございました。
今回は、基礎の基礎の部分を知って欲しかったので、HTML・CSSから始めてJSの基本的な文法を少し紹介して終わってしまいました。なので、次回はアニメーションやもう少し応用的な内容に入りたいと思っています。また、今回の内容で触ることができなかったのでフレームワークと言われるものにも少しだけ触れてみる予定です。
最後に、訂正・質問もしくはこんな内容入れて欲しいなどあればコメント欄か、僕のTwitterの方にコメントくれると嬉しいです