- 投稿日：2021-11-26T22:11:32+09:00
Djangoでwebサイト開発(Blog編)#1
こんにちは今回は、PythonのwebフレームワークDjangoを使って簡単な個人ブログサイトの構築をしていきます。 1、開発環境 今回使用した開発環境は以下のようになっています。 ①OS: Windows11 ②言語: Python, HTML & CSS 2、Djangoを始める まず開発ディレクトリ(今回はmyappというフォルダ)直下で以下のコマンドを入力してください。 windowsならコマンドプロンプト、mac, Linuxならターミナル C:開発ディレクトリ>django-admin startproject プロジェクト名 . ※この記事ではわかりやすくmyprojectという名前のプロジェクトを作成しました。 すると、開発ディレクトリに以下のディレクトリ構成が作成されます。 myapp/ myproject/ ┣ settings.py ┣ __init__.py ┣ asgi.py ┣ wisgy.py ┗ urls.py manage.py 以上の構成を確認したら、コマンドプロンプト or ターミナルで以下を実行してください。 C:~~myapp>python manage.py runserver すると以下のログが流れブラウザで表示するとスタートページ(ロケットページ)が表示されます。 Django version 3.2.9, using settings 'myproject.settings' Starting development server at http://0.0.0.0:8000/ Quit the server with CONTROL-C. djangoは8000番ポートでサーバーが起動します。(ちなみに有名なruby on railsとかだと3000番です。) ここまで来たらdjangoでのプロジェクト開始は成功です。 3、Djangoアプリを始める 上の章でDjangoプロジェクトを作成、サーバ立ち上げを行いました。 この章ではDjangoアプリの実装を行いたいと思います。 まず、コマンドプロンプトでmyappディレクトリ直下に入り、以下のコマンドを入力してください。 今回は「アプリ名:myblog」で行いました。 C:~~myapp>python manage.py startapp myblog すると以下のようなディレクトリ構成を確認できると思います。 myapp/ myblog/ ┣ admin.py ┣ __init__.py ┣ apps.py ┣ test.py ┣ views.py ┣ models.py ┗ urls.py(自分で作成) myproject/ manage.py myprojectとmanage.pyと同じ階層にmyappというフォルダが作成されます。 ここでmyproject/settings.pyを編集しましょう。 settings.py 以下、必要な部分を抜粋！ import os(最初の部分に追加) INSTALLED_APPS = [ 'myblog.apps.MyblogConfig',(※追加) 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', ] TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates')],(※追加) 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', 'myblog.context.context', ], }, }, ] コードの最後のほう LANGUAGE_CODE = 'ja' TIME_ZONE = 'Asia/Tokyo' 上記のTEMPLATESではtemplateファイルの設定を行っています。 templateファイルはサイトの見た目を形成するフロントエンドの部分です。ここではBASE_DIR内のtemplatesフォルダに格納するという意味です。 実際にtemplatesファイルを作成しましょう。 myapp/ myblog/ ┣ templates /myblog ┣ admin.py ┣ __init__.py ┣ apps.py ┣ test.py ┣ views.py ┣ models.py ┗ urls.py(自分で作成) できました！では実際にブログアプリの実装をしていきます。
- 投稿日：2021-11-26T20:17:03+09:00
DjangoのHTML表記まとめ
はじめに 個人的まとめ 変数 変数の展開 {{ var }} {{ 変数名 }} テンプレートへの変数の渡し方 def index(request): context = {'var': 'Hello'} return render(request, 'myhtml/index.html', context) <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>index</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p>{{ var }}</p> </body> </html> headタグはメタデータを書くところなので実際に表示されるわけではない pタグは一つの段落を表す <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>index</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p>Hello</p> </body> </html> テンプレートタグ Djangoにはプログラミング言語の予約語に相当する、テンプレートタグと呼ばれるものがある テンプレートタグは{% タグ名 %}と記述する if文 {% if s == "django" and n != 5 %} <p>おはよう</p> {% elif n != 5 or b is True %} <p>こんにちは</p> {% elif b is not True %} <p>こんばんは</p> {% else %} <p>ハロー</p> {% endif %} ==や!=、isが使用可能 andやor、notも使用可能 s=="django"だとエラーが出る。s == "django"のようにスペースを空けないとダメ for文 リスト **list_ = [ "hello", "world", "!" ]**のとき、 {% for i in list_ %} <p>{{ i }}</p> <hr> {% endfor %} <p>hello</p> <hr> <p>world</p> <hr> <p>!</p> <hr> hrタグは段落の意味的な区切りを表す。あくまで意味的な区切りであって、表示的な区切りではないので単に水平線を引きたいならばCSSを使う 辞書 dic = {"A":"APPLE","B":"BANANA","C":"CHERRY"}のとき、 {% for k, v in dic.items %} <p>{{ k }}{{ v }}</p> {% endfor %} 辞書の名前の後ろに.itemsをつけるのを忘れないように リストの中身がないときに別の内容を表示 {% for i in list_ %} <p>{{ i }}</p> {% empty %} <p>the list is empty.</p> {% endfor %} {% empty %}節を加えることでリストの中身が空だった場合に別の内容を表示できる {% if i %} {% for i in list_ %} <p>{{ i }}</p> {% endfor %} {% else %} <p>the list is empty.</p> {% endif %} 上記のようにもできるが、{% empty %}節を使った方が見やすい リストのうちの一部を表示 {% for i in list_|slice:"2:5" %} <p>{{i}}</p> {% endfor %} sliceフィルタを用いることで、リストの一部を表示することができる 上の場合はリストの2番目から4番目までが表示される ":5"とすれば最初から4番目まで、"2:"とすれば2番目から最後までが表示 for i in list_|slice:"2:5"は3箇所ともくっつけて書かないとだめ。 for i in list_ | slice: "2:5"などとするとエラーになる ループの最初だけ別の処理を行う {% for i in list_ %} {% if forloop.first %} <p>This is first time. {{ i }}</p> {% else %} <p>{{ i }}</p> {% endif %} {% endfor %} forloop.firstは1回目のループの場合はTrueを、それ以外の場合にはFalseを返す if文と組みあわせるとループの最初だけ別の処理をさせることができる ループの最後だけ別の処理を行う {% for i in list_ %} {% if forloop.last %} <p>This is last time. {{ i }}</p> {% else %} <p>{{ i }}</p> {% endif %} {% endfor %} forloop.lastは最後のループの場合はTrueを、それ以外の場合にはFalseを返す if文と組みあわせるとループの最初だけ別の処理をさせることができる もちろん、forloop.firstとforloop.lastは同時に使うこともできる ループカウントを取得する {% for i in list_ %} <p>index:{{ forloop.counter0 }}/ count:{{ forloop.counter }}/ value:{{ i }}</p> {% endfor %} forloop.counter0はループの回数を**0**からカウントアップする 1回目のループなら0、2回目のループなら1、N回目ならN-1になる Pythonのenumerateと同じ働きをする forloop.counterはループの回数を1からカウントアップする 1回目のループなら1、2回目のループなら2、N回目ならNになる ループカウントを逆順で取得する {% for i in list_ %} <p>index:{{ forloop.revcounter0 }}/ count:{{ forloop.revcounter }}/ value:{{ i }}</p> {% endfor %} forloop.revcounter0はループの回数をNからカウントダウンする 1回目のループならN、2回目のループならN-1、N回目なら1になる Pythonのenumerateと同じ働きをする forloop.revcounterはループの回数をN-1からカウントダウンする 1回目のループならN-1、2回目のループならN-2、N回目なら0になる ループの特定の回数のところで別の処理をする {% for i in list_ %} {% if forloop.counter|divisibleby:'3' %} <p>this is a multiple of three.{{forloop.counter}}</p> {% else %} <p>{{i}}</p> {% endif %} {% endfor %} forloop.counterとif文を組み合わせるとループの特定の回数のところで別の処理をする、といったことが実現できる divisiblebyフィルターは値が引数の値で割り切れる場合にTrueを返す 上記の例では3回ごとに違う処理をしている 挿入 {% include "other_template.file" %} 別のテンプレートを挿入する 各ページに同じもの（アイコン画像、外部のjsファイル、cssファイルなど）を配置するときなどに便利 一箇所を書き換えるだけで良くなるのでメンテナンス性が向上する 利用例 一部のページのみjQueryを必要とするとき、 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> {% include "js_parts.html" %} </head> <body> <p>Hello World!</p> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> </head> <body> <p>Hello World!</p> </body> </html> ブロック化 ヘッダーやフッター、サイドバーなど複数のページで共通するパーツをブロック化することでメンテナンス性が向上する {% block ブロック名 %}と{% endblock %}で囲ったところがひとつのブロックになる ブロック名は他のものと名前が被らなければなんでもいい 下記の例ではindex1.htmlはbase.htmlをextendsタグを使って継承し、my_titleブロックに任意の文字列を入れてカスタマイズを加えている index2.htmlはindex1.htmlをさらに継承し、index2ブロックに任意の文字列を入れてカスタマイズを加えている <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>{% block my_title %}タイトル{% endblock %}</title> </head> <body> <header> {% block my_header %} <p>ヘッダー</p> {% endblock %} </header> {% block my_body %} <p>ボディ</p> {% endblock %} <footer> {% block my_footer %} <p>フッター</p> {% endblock %} </footer> </body> </html> {% extends 'myhtml/base.html' %} {% block my_title %}トップページ{% endblock %} {% block my_body %} <p>トップページです</p> {% block index %} <p>インデックス１</p> {% endblock %} {% endblock %} {% extends 'myhtml/index1.html' %} {% block index %} <p>インデックス２</p> {% endblock %} 参考 これだけは知っておきたいDjangoテンプレートの基本文法
- 投稿日：2021-11-26T17:53:23+09:00
EJS de Storybook入門
おはようございます、こんにちは、こんばんわ。 今回はEJSでのStorybook導入とStorybookの簡単な使い方を書きます。 StorybookはUIコンポーネントとページを分離して構築するためのオープンソースツールです。 Storybook公式サイト 前置き 「Storybook 入門」とかで調べるとReactやらNuxtやらへの導入を前提とした記事が溢れています。 コンポーネント化を行うならばもちろんそれらのフレームワークを使うのが1番ですが、HTMLのテンプレートエンジンもフレームワークほどではないとはいえ、できない事もないです。 また、同時に2つのことを学ぶより1つのことを学ぶ方が楽だろうと思い、弊社で使われている「EJS」への導入を試みました。 Storybookはアドオンが強力なので、ぜひ最後まで読んで実践してみてください。 ファイル構成 ファイル構成 root/ ├ dest/ <!-- srcの出力ファイル --> ├ src/ <!-- コンパイル・トランスパイル前提で編集するファイル --> │ ├ ejs/ <!-- .ejsを格納 --> │ └ scss/ <!-- .scssを格納 --> │ ├ static/ <!-- コンパイルしない静的ファイル --> ├ node_modules/ └ package.json Storybook導入 StorybookはVue.jsやReact環境下だとCLIでバコッと導入できたりするのですが、EJSの環境下での導入なので手動で導入を進めます。 まずはHTML用のStorybookをインストールします。 $ npm install @storybook/html 次はStorybook用の設定ファイル・フォルダを用意します。 root/直下に.storybookフォルダを作成します。 ファイル構成 root/ ├ .storybook/ <!-- new!! --> ├ dest/ ├ src/ │ ├ ejs/ │ └ scss/ │ ├ static/ ├ node_modules/ └ package.json 作成した.storybookフォルダの中に設定ファイルを2ファイル(main.js,preview.js)を作成していきます。 .storybook/main.js const path = require('path'); module.exports = { webpackFinal: async (config, { configType }) => { config.module.rules.push(); return config; }, stories: ['../stories/**/*.stories.@(js|mdx)'] }; .storybook/preview.js import { addDecorator } from '@storybook/html' もう一息です。 package.jsonに起動用のscriptを記述します。 package.json "scripts": { "storybook": "start-storybook -p 6006" } (6006のポート番号だと都合の悪い方は自由な番号で大丈夫です) あとは正常に起動すれば一旦導入は完了です。 $ npm run storybook 以下の画面が表示されれば成功です！ コンポーネントを作成 コンポーネントの作成場所は以下になります。 ファイル構成 root/ ├ .storybook/ ├ dest/ ├ src/ │ ├ ejs/ │ │ └ _partials/ │ │ └ _components/ <!-- _components/配下に作成 --> │ │ │ └ scss/ │ ├ static/ ├ node_modules/ └ package.json 試しにボタンコンポーネントを作成してみましょう。 _components/_button.ejs <% //初期値を設定%> <% if (typeof disabled === 'undefined') { var disabled = false; } %> <% if (typeof type === 'undefined') { var type = 'button'; } %> <% if (typeof label === 'undefined') { var label = ''; } %> <% if (typeof modefireClass === 'undefined') { var modefireClass = ''; } %> <% if (typeof jsClass === 'undefined') { var jsClass = ''; } %> <% //初期値を設定%> <button <%= disabled ? 'disabled' : '' %> type=<%= type %> class="<%= modefireClass %> <%= jsClass %>" ><%= label %></button> 以下の5つの設定をできるように作成しました。 disabled type label modefireClass jsClass 余談ですが、初期値を設定を設定してあげないとEJSに怒られてしまうので、初期値は必須になります。 EJSを読み込めるようにする EJSのローダーがあるので、インストールします。 $ npm install ejs-compiled-loader インストール後は.storybook/main.jsにEJSローダー用の設定を記述するだけです。 .storybook/main.js const path = require('path'); module.exports = { webpackFinal: async (config, { configType }) => { config.module.rules.push( { test: /\.ejs$/, loaders: ['ejs-compiled-loader'], // 読み込む予定のEJSのディレクトリを指定する include: path.resolve(__dirname, '../src/ejs/_partials/_components/') } ); return config; }, stories: ['../stories/**/*.stories.@(js|mdx)'] }; 完了！ storiesの作成 作成したボタンコンポーネントをStorybookに表示させるため、storie/に設定ファイル(button.stories.js)を作成します。 xxx.stories.js xxx部分は自由ですが、わかりやすいように表示するコンポーネントと名前を統一します。 storie/button.stories.js import button from '../src/ejs/_partials/_components/_button.ejs'; // コンポーネントを読み込む export default { title: 'button', // storybookでリストに表示されるタイトル名 component: button // importしたコンポーネント }; export const nomarl = () => { // コンポーネントに渡す変数を宣言 const label = 'Click Here'; const type = 'button'; const disabled = false; const modefireClass = ''; const jsClass = ''; return button({ label, type, disabled, modefireClass, jsClass }); // 各変数を引数に入れてコンポーネントを表示 }; ここまで終わってStorybookを起動するとコンポーネントが表示されるはずです。 これにてstoriesの作成は完了になります。 コンポーネントが複数ある場合は1ファイルで完結する事もできると思いますが、コンポーネントごとに設定ファイルを作成するのをお勧めします。 StorybookにSCSSを読み込ませる CSSを読み込んでもいいですが、コンポーネント用のSCSSは大体インポートして使われると思うので、そのまま読み込めるようにSCSSに対応します。 まずは各ローダーをインストール $ npm install style-loader@2.0.0 css-loader@5.2.6 sass-loader@10.0.0 各ローダーが最新バージョンだと動かないらしいので、こちらのissueを参考にバージョン指定しています。（鬼ハマりポイント） https://github.com/storybookjs/presets/issues/195 sass-loaderなどバージョンを下げているので、すでにnode-sass、sass(dart-sass)などをインストールされている方はバージョンの見直しをしてください。 今回はnode-sassを入れます。 $ npm install node-sass@4.14.1 インストール後は.storybook/main.jsにローダー用の設定を記述します。 .storybook/main.js const path = require('path'); module.exports = { webpackFinal: async (config, { configType }) => { config.module.rules.push( { test: /\.ejs$/, loaders: ['ejs-compiled-loader'], include: path.resolve(__dirname, '../src/ejs/_partials/_components/') }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], // 読み込む予定のSCSSのディレクトリを指定する include: path.resolve(__dirname, '../src/scss/css/') } ); return config; }, stories: ['../stories/**/*.stories.@(js|mdx)'] }; sass(dart-sass)を使っている方はsass-loaderでoptionの記述をする必要があるので、ご注意を。 これでSCSSをインポートできるようになりました！ 各ファイルに必要なSCSSを読み込んでいきましょう。 ますはstorie/button.stories.js storie/button.stories.js import button from '../src/ejs/_partials/_components/_button.ejs'; import '../src/scss/css/_partials/_components/_button.scss'; // 必要SCSSを適宜読み込む export default { title: 'button', component: button }; export const nomarl = () => { const label = 'Click Here'; const type = 'button'; const disabled = false; const modefireClass = ''; const jsClass = ''; return button({ label, type, disabled, modefireClass, jsClass }); }; 全てのコンポーネントへ共通で読み込みたいファイルがある場合は.storybook/preview.jsで読み込めばOKです。 .storybook/preview.js import { addDecorator } from '@storybook/html'; import '../src/scss/css/bundle.scss'; Storybookを起動すると、SCSSが反映されているはずです。 Storybookにアドオンを入れる アドオンを入れてないStorybookはネタの乗っていない寿司みたいなものです。 アドオンを入れることでさらに強力なツールになります。 今回は以下4つのアドオンを追加します。 @storybook/addon-a11y アクセシビリティチェックをしてくれます。 @storybook/addon-knobs コンポーネントに渡す値をUIを用いて変更できるようにしてくれます。 @storybook/addon-notes マークダウン形式で説明文を記述できるようになります。 @storybook/addon-storysource stories.jsのソースコードをコンポーネントと合わせてブラウザから見ることができます。 まずはインストール $ npm install @storybook/addon-a11y @storybook/addon-knob @storybook/addon-notes @storybook/addon-storysource 各ファイルに必要な記述をしていきます。 .storybook/main.js const path = require('path'); module.exports = { webpackFinal: async (config, { configType }) => { config.module.rules.push( { test: /\.ejs$/, loaders: ['ejs-compiled-loader'], include: path.resolve(__dirname, '../src/ejs/_partials/_components/') }, { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], include: path.resolve(__dirname, '../src/scss/css/') } ); return config; }, stories: ['../stories/**/*.stories.@(js|mdx)'], addons: [ // アドオンは追加したらここに記述する '@storybook/addon-a11y', '@storybook/addon-knobs', '@storybook/addon-storysource', '@storybook/addon-notes' ], }; .storybook/preview.js import { addDecorator } from '@storybook/html'; import { withA11y } from '@storybook/addon-a11y'; //全てのコンポーネントで反映させるため、ここでimport import '../src/scss/css/bundle.scss'; addDecorator(withA11y); @storybook/addon-knobsは覚えることがちょっとあるので、公式ドキュメントを参照しながら触ってみてください。 storie/button.stories.js import { withKnobs, text, select, boolean } from '@storybook/addon-knobs'; // 渡す変数の指定方法によって記述が変わります。 import button from '../src/ejs/_partials/_components/_button.ejs'; import '../src/scss/css/_partials/_components/_button.scss'; const readme = ` // @storybook/addon-storysource用の記述 ## Props - label - 初期値: '' - type - 初期値: 'button' - disabled - 初期値: false - modefireClass - modefire用のクラス付与 - 初期値: '' - jsClass - JavaScript用のクラス付与 - 初期値: '' ## 関連コンポーネント なし `; export default { title: 'button', component: button, decorators: [withKnobs], parameters: { notes: readme // readme読み込み } }; export const nomarl = () => { const label = text('Text', 'Click Here'); // @storybook/addon-knobs用の記述 const type = select('type', { // @storybook/addon-knobs用の記述 button: 'button', submit: 'submit', reset: 'reset' }); const disabled = boolean('disabled', false); // @storybook/addon-knobs用の記述 const modefireClass = text('modefireClass', ''); // @storybook/addon-knobs用の記述 const jsClass = text('jsClass', ''); // @storybook/addon-knobs用の記述 return button({ label, type, disabled, modefireClass, jsClass }); }; これでStorybookの画面から設定変数の値を触れたり、コンポーネントの説明を参照することができるようになりました。 お気に入りのアドオンでカスタマイズして最強のStorybookを目指しましょう！
- 投稿日：2021-11-26T12:54:52+09:00
HTMLの画面サイズの扱い
これは何？ ツールなどをちゃちゃっと作って公開するときにモバイル対応してないとちょっと残念。その対策のメモです。 簡単に言うと、viewportをJavaScriptで制御する、またはCSSでなんとかする方法です。 実装 CSSで何とかする div.contentをスクリーンのサイズで動的に変えるのがポイント。 <!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" id="meta_viewport"> <style> /* smaller than */ @media only screen and (max-width: 400px) { body { margin: 0px; } div.content { width: 100%; } } /* larger than */ @media only screen and (min-width: 400px) { div.content { width: 200px; } } body { background: #e2e1e0; text-align: center; font-family: arial; display: flex; flex-direction: column; align-items: center; } div.content { background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 5px; height: 200px; } </style> </head> <body> <div class="content"> Hello! </div> </body> </html> viewportで何とかする window.onresizeのEventでviewportを動的に更新。JavaScript内の「content_width」にdiv.contentのwidthにmarginを考慮するのがポイント。 <!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" id="meta_viewport"> <style> body { background: #e2e1e0; text-align: center; font-family: arial; display: flex; flex-direction: column; align-items: center; } div.content { background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 5px; height: 200px; width: 200px; } </style> </head> <body> <div class="content"> Hello! </div> <script> const adjust_content_width = () => { const s_width = window.outerWidth const content_width = 220 const meta_vp = document.querySelector('meta#meta_viewport') const content_scale = s_width/content_width < 1 ? Math.floor(100 * s_width/content_width)/100 : 1.0 meta_vp.setAttribute('content',`width=${s_width}, initial-scale=${content_scale}, maximum-scale=${content_scale}`) } window.onload = adjust_content_width window.onresize = adjust_content_width </script> </body> </html> Reference もう逃げない。HTMLのviewportをちゃんと理解する - Qiita
- 投稿日：2021-11-26T11:38:13+09:00
いまさら聞けないHTML（レイアウト編）
はじめに 社内Wikiに細々とまとめていたものをQiitaへ移行したいと考え、鋭意作業中。 適宜追記予定。 table テーブルを作成する テーブル内の構成はtr,th,tdタグを用いる <table> <tr> <th>品物</th> <th>単価</th> <th>在庫</th> </tr> <tr> <td>りんご</td> <td>50</td> <td>1000</td> </tr> <tr> <td>みかん</td> <td>30</td> <td>2000</td> </tr> </table> tr テーブル内で行を定義する <table> <tr> <th>品物</th> <th>単価</th> <th>在庫</th> </tr> <tr> <td>りんご</td> <td>50</td> <td>1000</td> </tr> <tr> <td>みかん</td> <td>30</td> <td>2000</td> </tr> </table> th テーブル内で見出しセルを定義する 属性 意味 rowspan セルを列結合する colspan セルを行結合する <table> <thead> <tr> <th rowspan="2"> 仕上げ </th> <th rowspan="2"> サイズ </th> <th> 2019年5月31日まで </th> <th> 2019年6月1日から </th> </tr> <tr> <td>税抜き</td> <td>税込み</td> </tr> </thead> </table> td テーブル内でセルを定義する 属性 意味 rowspan セルを列結合する colspan セルを行結合する <table> <tr> <th>フォント</th> <td colspan="3">明朝体</td> </tr> </table> hr 横罫線を引く <!-- 生年月日入力箇所を横罫線で囲む --> <hr> <div> <label>生年月日</label> <div> <input type="text">年 <input type="text">月 <input type="text">日 </div> </div> <hr>
- 投稿日：2021-11-26T11:32:29+09:00
いまさら聞けないHTML（入力フォーム編）
はじめに 社内Wikiに細々とまとめていたものをQiitaへ移行したいと考え、鋭意作業中。 適宜追記予定。 select セレクトボックスを作成 optionタグで選択項目を増やしていく <select> <option value="">選択項目</option> </select> option セレクトボックスの選択項目を指定する 属性 意味 selected デフォルト時の選択内容 value フォームで送信する際の値 <select> <option value="24" selected>24ページ</option> <option value="36">36ページ</option> </select>