- 投稿日：2020-09-19T21:50:20+09:00
【初心者でもわかる】フォーム作りに必須！inputとlabelを紐づける方法
どうも7noteです。inputとlabelの位置関係から、紐づける方法について。
フォームを作成する時にちょっとオシャレなボタンにしようと思いinputに装飾を入れたい時、inputとlabelの関係性を知っているとスムーズなコーディングができます。
inputとlabelの位置関係から紐づける方法は大きく2種類あるのでそれぞれ見ていきます。
labelタグの
中にinputがある場合<label><input type="radio" name="">選択項目<label>この場合自動的に、ラジオボタンの「◎」の部分をクリックするだけでなく、文字の部分やlabel要素の中をクリックすることで、
inputにチェックを付けることができるようになります。
labelタグの
外にinputがある場合<input type="radio" name="" id="hogehoge"> <label for="hogehoge">選択する<label>この場合、例のように
inputにidを指定し、labelにfor=""と書きinputに指定したidと同じものを指定します。
これをすることにより、inputが遠く離れた場所にあったとしても紐づけることができlabel要素をクリックすることでinputにチェックを付けることができます。
まとめ
この方法を使うことで、inputのチェックがついているかどうかを判定する
:checkedを使いlabelタグや他の要素の装飾を変更する方法があります。
それについてはまた明日投稿予定なのでよかったら見てください。inputしかつかった事がなく、label要素を初めて知った時は感激でした。input要素だけだと特にラジオボタンやチェックボックスがクリックやタップしにくい事があるので、検索フォームや問い合わせフォームを作るときはlabelを入れておきたいところです。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ
- 投稿日：2020-09-19T20:44:15+09:00
Djangoを使って10分で作るCSS環境
プロローグ
CSSの勉強用環境をDjangoで作ります。
Djangoが導入済みであれば10分想定です。
内容には影響ないかと思いますが、実行環境です
OS : Windows10
python : Python 3.7.6
django : 3.1手順
フォルダ作成、プロジェクト作成、アプリ作成
C:\work\02_実施>mkdir 20200919_htmlcss C:\work\02_実施>cd 20200919_htmlcss C:\work\02_実施\20200919_htmlcss>django-admin startproject htmlcss C:\work\02_実施\20200919_htmlcss>cd htmlcss C:\work\02_実施\20200919_htmlcss\htmlcss>python manage.py startapp test_app C:\work\02_実施\20200919_htmlcss\htmlcss>dir ドライブ C のボリューム ラベルがありません。 ボリューム シリアル番号は D48D-C505 です C:\work\02_実施\20200919_htmlcss\htmlcss のディレクトリ 2020/09/19 19:38 <DIR> . 2020/09/19 19:38 <DIR> .. 2020/09/19 19:38 <DIR> htmlcss 2020/09/19 19:38 685 manage.py 2020/09/19 19:38 <DIR> test_app 1 個のファイル 685 バイト 4 個のディレクトリ 8,932,749,312 バイトの空き領域アプリ認識(appsに定義されているアプリ名をsetting.pyに追記)
C:\work\02_実施\20200919_htmlcss\htmlcss>cd htmlcss C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad settings.py C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>type ..\test_app\apps.py from django.apps import AppConfig class TestAppConfig(AppConfig): name = 'test_app'htmlcss/setting.py# Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'test_app.apps.TestAppConfig', ]アクセス先の設定(プロジェクトのurls.pyとアプリのurls.pyに設定)
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad urls.pyhtmlcss/urls.pyfrom django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('test_app.urls')), ]C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>copy urls.py ..\test_app\ 1 個のファイルをコピーしました。 C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\urls.pytest_app/urls.pyfrom django.urls import path, include from . import views urlpatterns = [ path('', views.index), ]アクセス先のhtmlを指定と作成
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\views.pytest_app/views.pyfrom django.shortcuts import render # Create your views here. def index(request): return render(request, 'index.html')C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\templates C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.htmlindex.html<html> <head> </head> <body> <p>hello, world</p> </body> </html>ようやくCSS(css認識と作成、htmlからの呼び出し)
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad settings.pyhtmlcss/setting.py# Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/3.1/howto/static-files/ import os STATIC_URL = '/static/' STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), )C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>mkdir ..\test_app\static\css C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\static\css\style.cssstyle.css.T1 { background-color: #99cc00 }C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>notepad ..\test_app\templates\index.htmlindex.html{%load static%} <html> <head> <link href="{% static 'css/style.css'%}" rel="stylesheet"> </head> <body> <div class='T1'> <p>hello, world</p> </div> </body> </html>webサーバの起動とブラウザで確認
C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>start C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>python ..\manage.py runserver C:\work\02_実施\20200919_htmlcss\htmlcss\htmlcss>start http://localhost:8000完成！！！
エピローグ
これで好きなようにCSSをジャンジャン試せます
- 投稿日：2020-09-19T10:49:09+09:00
d3.jsでobjectの上に格子状の枠を作成する
目的
完成イメージのように、ステータスを表示するダッシュボード画面上に四角いオブジェクトがあり、格子状の枠を作って色を塗りつぶしたり、テキストを入れるのがゴールです。使っているのはJavaScriptのライブラリd3.jsです。
ポイントは2つ。
- foreignObject1要素で、オブジェクト内部にtableを追加し、格子状の枠を作る。
- clipPath2要素で、角を丸くする。初めは座標位置を指定してpathやareaで力技で描画することを考えたのですが、テキストのセンタリングやオブジェクトの拡大・縮小で破綻するので止めて、Webで色々調べつつまとめてみました。
本記事は、d3.jsでコードを書いたことがある人を前提に書いています。
完成イメージ
完成版HTML
最初に完成形を貼っておきます。
grid.html<html> <head> <script src="https://d3js.org/d3.v6.min.js"></script> <style> /* おまじない */ table { border-collapse: collapse; border-spacing: 0; } </style> </head> <body> <div id="svg-area"></div> <script> 'use strict'; let data = [ {t:'RED',c:'#ff0000'}, {t:'GREEN',c:'#00ff00'}, {t:'BLUE',c:'#0000ff'} ]; let width = 1000; let height = 500; let gridSize = 300; let gap = 8; let svg = d3.select("#svg-area").append("svg") .attr("width",width) .attr("height",height); /* 角Rをつけた四角い図形でくり抜く */ svg.append("clipPath") .attr("id","clip") .selectAll("rect") .data(data) .enter() .append("rect") .attr("width", gridSize-gap) .attr("height", gridSize) .attr("x", (d,i) => i*gridSize) .attr("y", 0) .attr("rx", 16) .attr("ry", 16); let g = svg.append("g") .attr("width",width) .attr("height",height); let cards = g.selectAll("rect").data(data); /* ベースとなる四角 */ cards.enter().append("rect") .attr("id",(d,i) => "card-"+i) .attr("x", (d,i) => i*gridSize) .attr("y", 0) .attr("width", gridSize-gap) .attr("height", gridSize) .attr("clip-path", "url(#clip)") .style("fill", "#000000"); /* tableタグのためのforeignObject要素 */ let table = cards.enter().append("foreignObject") .attr("x", (d,i) => i*gridSize) .attr("y", 0) .attr("width", gridSize-gap) .attr("height",gridSize) .attr("clip-path", "url(#clip)") .append("xhtml:table") .attr("width", gridSize-gap) .attr("height",gridSize) .attr("border",1) .attr("frame","void") .attr("bordercolor","#ffffff"); /* 通常のtableタグと同様に表の内部を作る */ let tr1 = table.append("tr"); let tr2 = table.append("tr"); let tr3 = table.append("tr"); tr1.append("td") .attr("height","33%") .attr("width","50%") .attr("bgcolor", (d) => d.c); tr1.append("td") .attr("height","33%") .attr("width","50%") .style("text-align", "center") .append("font") .attr("color", "#ffffff") .text((d) => d.t); tr2.append("td") .attr("height","33%"); tr2.append("td") .attr("height","33%"); tr3.append("td") .attr("colspan",2); </script> </body> </html>ヘッダ
細かく見ていきます。
ヘッダはシンプルにd3.jsライブラリを読み込むだけです。なお、styleタグの記述がないと枠にスペースが出来てしまいます。3
<html> <head> <script src="https://d3js.org/d3.v6.min.js"></script> <style> /* おまじない */ table { border-collapse: collapse; border-spacing: 0; } </style> </head>ないとこんな感じ。
ボディ
こちらもシンプルで、div要素のみ。
<body> <div id="svg-area"></div> <script> ... </script> </body>オブジェクトを作る
次に、オブジェクトを実際に作っていきます。まずはベースとなる四角いオブジェクトを作成します。
'use strict'; let data = [ {t:'RED',c:'#ff0000'}, {t:'GREEN',c:'#00ff00'}, {t:'BLUE',c:'#0000ff'} ]; let width = 1000; let height = 500; let gridSize = 300; let gap = 8; let svg = d3.select("#svg-area").append("svg") .attr("width",width) .attr("height",height); let g = svg.append("g") .attr("width",width) .attr("height",height); let cards = g.selectAll("rect").data(data); /* ベースとなる四角 */ cards.enter().append("rect") .attr("id",(d,i) => "card-"+i) .attr("x", (d,i) => i*gridSize) .attr("y", 0) .attr("width", gridSize-gap) .attr("height", gridSize) // .attr("clip-path", "url(#clip)") .style("fill", "#000000");ここまで以下の図形となります。
格子状の枠を作る
内部にtableタグを作成することで枠を作ります。foreignObjectを使ってそれを重ねるイメージです。分かりやすいように以下のような2x2の表を作るとします。
<table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table>以下のようなコードになります。
/* tableタグのためのforeignObject要素 */ let table = cards.enter().append("foreignObject") .attr("x", (d,i) => i*gridSize) .attr("y", 0) .attr("width", gridSize-gap) .attr("height",gridSize) // .attr("clip-path", "url(#clip)") .append("xhtml:table") .attr("width", gridSize-gap) .attr("height",gridSize) .attr("border",1) .attr("frame","void") .attr("bordercolor","#ffffff"); /* 完成版HTMLと違います */ let tr1 = table.append("tr"); let tr2 = table.append("tr"); tr1.append("td") .attr("height","50%") .attr("width","50%"); tr1.append("td") .attr("height","50%") .attr("width","50%"); tr2.append("td") .attr("height","50%") .attr("width","50%"); tr2.append("td") .attr("height","50%") .attr("width","50%");するとこんな感じで格子状の枠が作れました。完成イメージにするには、3段にする、背景色を指定する、カラムを結合する、テキストを加えるなど、通常のtableと同じような作業をやります。
角を丸くする
最後に角を丸くするには、clipPathを使います。描画部分を窓枠のようにマスクするイメージで、Web検索すれば色々出てきます。
以下のコードを追加し、上記解説のclip-path属性のコメントアウトを外します。
/* 角Rをつけた四角い図形でくり抜く */ svg.append("clipPath") .attr("id","clip") .selectAll("rect") .data(data) .enter() .append("rect") .attr("width", gridSize-gap) .attr("height", gridSize) .attr("x", (d,i) => i*gridSize) .attr("y", 0) .attr("rx", 16) .attr("ry", 16);こちらになります。
まとめ
いかがでしたでしょうか？完成イメージのような図形でも、自由度の高いd3.jsライブラリを使えば割と簡単に描くことが出来るのがいいところです。
<foreignObject> - SVG: Scalable Vector Graphics | MDN (https://developer.mozilla.org/ja/docs/Web/SVG/Element/foreignObject) ↩
<clipPath> - SVG: Scalable Vector Graphics | MDN (https://developer.mozilla.org/ja/docs/Web/SVG/Element/clipPath) ↩
テーブルのセルの隙間をリセットするCSS (https://qiita.com/macer_fkm/items/bac56f0f863a19cfd674) ↩
- 投稿日：2020-09-19T03:52:09+09:00
【連載】へっぽこエンジニアが「Webを支える技術」を要約してみた（第1章）
はじめに
自分はWebの基礎を固めないままエンジニアとして過ごしていました。
そのことに焦燥感を感じることが多いため、今回 技術評論社 から出版されている Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus) を要約する連載することにしました。今回は第1章の要約となります。
対象読者
「はじめに」を読んで心当たりのあるエンジニアの方。
第1章 Webとは何か
1.1 全ての基盤であるWeb
- 現在の私たちにとって最も重要なソフトウェアはブラウザ
- ブラウザはWebサーバーとやりとりをして情報を表示している
1.2 様々なWebの用途
Webサイト
- クライアント (ブラウザ) でシステムがどのような構成になっているかを意識しないで済む
UI = User Interface としてのWeb
- 人間向けのインタフェース
例 : テレビ、プリンタ...の設定画面API = Application Programming Interface としてのWeb
- プログラム向けのインタフェース
例 : XML、JSON...1.3 Webを支える技術
HTTP、URI、HTML
HTTP = Hypertext Transfer Protocol
- ホームページの情報をやり取りするときに使用される通信手順や規約のこと
URI = Uniform Resource Identifier
- 世界中のあらゆる情報を指し示す
HTML = Hypertext Markup Language
- 情報を表現する文書フォーマット
ハイパーメディアシステム
- テキスト、画像、音声などのハイパーメディアをリンクで結びつけて構成したシステム
分散システム
- 複数のコンピュータを組み合わせて処理を分散するシステム
- 1台のコンピュータで実行するよりも効率的に処理できる
- Webは大規模な分散システム (プロトコルがシンプルだから大規模になった)
今回のうろ覚えワード
- プロトコル
情報をやり取りするときに使用される通信手順や規約のこと感想
- UIが人間向け、APIがプログラム向けという説明がとても腑に落ちた
参考
- 投稿日：2020-09-19T03:15:00+09:00
JavaScriptでオブジェクトの配列に入っている要素をHTMLに一つずつ表示する
まず、オブジェクトの配列を用意する
var array = [{id:1, name:"Ramen"}, {id:2, name:"Somen"}];HTMLを書く
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- ここのgetDataの部分にjsからデータを表示する --> <div id="getData"></div> <script src="code.js"></script> </body> </html>オブジェクトの配列を表示するためのJavaScriptのコード
// 配列の長さの文だけループを回す for (var i = 0; i < array.length; i++) { // まず、idを表示する // Htmlのdivの部分を指定する var getData = document.getElementById('getData'); // 表示したいデータを指定する var arrayId = document.createTextNode(array[i].id); // 要素を指定し、その要素の子要素としてデータを表示する getData.appendChild(arrayId); // 次に、nameを表示する var arrayName = document.createTextNode(array[i].name); getData.appendChild(arrayName); }最終的なJavaScriptのコード
window.onload = function () { // オブジェクトの配列を用意 var array = [{ id: 1, name: "Ramen" }, { id: 2, name: "Somen" }]; // 配列の長さの文だけループを回す for (var i = 0; i < array.length; i++) { // まず、idを表示する // Htmlのdivの部分を指定する var getData = document.getElementById('getData'); // 表示したいデータを指定する var arrayId = document.createTextNode(array[i].id); // 要素を指定し、その要素の子要素としてデータを表示する getData.appendChild(arrayId); // 次に、nameを表示する var arrayName = document.createTextNode(array[i].name); getData.appendChild(arrayName); } }最終的に
Htmlを開くとこのようにJavaScriptからのデータを表示することができます。
