- 1. 【HTML/CSS】画像の表示位置（上下左右中央）を完璧に制御する
- 2. ライブラリなしでおしゃれなカラーピッカーを実装する【React】
- 3. 【GitHub】静的サイトの公開
- 4. 日本の旅客鉄道の変遷をMapbox GL JSで表示してみました
- 5. PHP初心者に超オススメのUdemy講座6つを厳選！web入門者必見
- 6. GoogleフォームをカスタマイズしてHPに埋め込む【こまりメモ】
- 7. jQueryを用いたフォーム送信時に空欄がある場合にアラートを出す処理
- 8. Thymeleaf HTML 表
- 9. Sassで画像が見つからず404 (Not Found)がでる
- 10. html文字列をReactElementに変換する
- 11. 高速道路整備の変遷をMapbox GL JSで表示してみました
- 12. HTML Thymeleaf メモ
- 13. class・idの複数指定
- 14. Slickでslick-slideのheightを100%にする方法
- 15. 【JavaScript】ハンバーガーメニューが閉じているのに中のリンクを押せる不具合の解消方法
- 16. CSSのみで紙吹雪を作る
- 17. 画面遷移せずにformを送信する方法
- 18. 【JavaScript】入力フォームを使ったHTMLページをスッキリした見た目にする
- 19. HTML/CSSまとめ
- 20. Vueでテーブルを書く
【HTML/CSS】画像の表示位置（上下左右中央）を完璧に制御する
# 概要
画像の表示位置をコントロールするCSSの実装について、雑に記載します。
（今後の自分の備忘録も兼ねて。）# HTML/CSS
“`html
“`
“`css
.contents {
width: 100%;
height: 100vh;
background-color: darkgray;
}.image {
/* ここに画像の表示位置をコントロールするCSSを書く */
}
“`CSSが何も当たっていない時の表示はこんな感じで、画像が左上に表示されます。
## 左中央
“`css
.image {
to
ライブラリなしでおしゃれなカラーピッカーを実装する【React】
## はじめに
``を使うことでカラーピッカー（ユーザーに色を選択させるUI）を簡単に実装できますが．見た目があまりかわいくない…そう思い，色々試してデザインする方法を編み出したので残しておきます．
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/color
## 結論
inputタグに`opacity: 0;`を設定することで透明にし，divタグで囲ってデザインする．## 実装例
React+TypeScript+TailwindCSSで今回は円形にデザインした実装例です
 GitHub公式ページにアクセスし、RepositoriesのNewをクリックします。
2) Repository nameを入力し、Create repositoryをクリックします。
3) 画面遷移したら、Quick setupという項目のところに表示されているURLをコピーしておきます。
4) エディターに戻り、ターミナルもしくはコマンドプロンプトを使い、GitHubにプッシュしていきます。“`terminal:ターミナルorコマンドプロンプト
①cd 公開したいフォルダ名
②git init
③git add .
④git commit -m “メッセージ”
⑤git remote add 3)でコピーしたURL
⑥git push -u origin master
“`5) GitHub公式ページに戻り、作成したリポジトリのページからSettingsをクリックします。
6) 下の方にGitHub Pagesという項目があり、`Chec
日本の旅客鉄道の変遷をMapbox GL JSで表示してみました
# はじめに
国土数値情報の[鉄道時系列データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html)を用いて、日本の旅客鉄道の変遷（1950～2020年）をMapbox GL JS（v2）の[タイムスライダー機能](https://docs.mapbox.com/jp/mapbox-gl-js/example/timeline-animation/)で表示してみました。
– [鉄道時系列データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html)は以下の国土数値情報の提供サイトよりgeojsonファイル（令和2年）をダウンロードして使用しています。
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v1_3.html– 背景地図には[Mapbox](https://www.mapbox.com/)を使用しているため、別途、Mapboxにてアクセストークンの取得及
PHP初心者に超オススメのUdemy講座6つを厳選！web入門者必見
この記事では、Udemyのオススメ初心者向けPHP講座を紹介します。
・未経験だけどwebアプリケーションを作れるようになりたい
・将来的にサーバーサイドエンジニアになりたい
・自分でコードを書くかは未定だけど、ウェブサービスを作って起業したいといった人にオススメできるものをチョイスしました。
## PHP+MySQL（MariaDB） Webサーバーサイドプログラミング入門
おすすめ度：★★★
・[PHP+MySQL（MariaDB） Webサーバーサイドプログラミング入門](https://px.a8.net/svt/ejp?a8mat=3BBPJR+AVR8TU+3L4M+BW8O2&a8ejpredirect=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fphp7basic%2F)
### この講座で学べる内容
・PHPの基礎知識とMySQL（MariaDB）の基礎が修得できる
・SQLの基礎が修得でき、データベースを利用したプログラムを作成できる
・PHPを利用したプログラムを作成でき、サーバーサイドのWebサービスを開発できる
・デー
GoogleフォームをカスタマイズしてHPに埋め込む【こまりメモ】
こんにちは。
こまりまゆこです。
自分が学習したことを載せています。###「Googleフォームを自分でカスタマイズしてHPに埋め込もう」
#####【主な内容】
・Googleフォームをとは？
・土台となるフォームの作り方
・カスタムに必要な数字とURL
・完成形##Googleフォームとは？
一言でいうと、アンケートや問い合わせフォームを簡単に作れるGoogleのサービス。
誰でも無料で使えるのも人気な点で様々な場面で使用されている。
回答も集計してくれるなど大変使いやすい。
https://www.google.com/intl/ja_jp/forms/about/##実際にフォームを作ってみよう
①「Googleフォームを作ってみる」から入る
②作りたいフォームを選ぶ(今回は連絡先情報を選択)
というライブラリを使う．## 実装例
`”“`react:index.tsx
import React from “react”;
import ReactHtmlParser from “react-html-parser”;const Index: React.VFC = () => {
const imgHtml = “
return ({ReactHtmlParser(imgHtml)});
};exp
高速道路整備の変遷をMapbox GL JSで表示してみました
# はじめに
国土数値情報の[高速道路時系列データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html)を用いて、高速道路整備の変遷（1962～2020年）をMapbox GL JS（v2）の[タイムスライダー機能](https://docs.mapbox.com/jp/mapbox-gl-js/example/timeline-animation/)で表示してみました。
– [高速道路時系列データ](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html)は以下の国土数値情報の提供サイトよりgeojsonファイル（令和2年）をダウンロードして使用しています。
https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N06-v1_2.html– 背景地図には[Mapbox](https://www.mapbox.com/)を使用しているため、別途、Mapboxにてアクセストークンの
HTML Thymeleaf メモ
##thymeleatの宣言
“`
“`##テキストにリンクを貼る
“`
買い物リスト
“`##ボタンを押して入力フォームをPOST
“`“`
###うまくいかないときの☑ポイント
|☑ポイント|解説|
|—-|—-|—-|
|「get」と「post」を間違っていないか||
|「th」がついているか|th:object
th:action
th:field
||
|「$」と「@」間違えていないか|”${inpu
class・idの複数指定
See the Pen
qiita by tomoe (@paripi)
on CodePen.“;
$name = htmlspecialchars($_POST[“name”], ENT_QUOTES);
$address = htmlspeci
【JavaScript】入力フォームを使ったHTMLページをスッキリした見た目にする
コードだけをみたい人は最後に全体を載せてますのでそちらへ。
それでは本題の前に、
まずは普通にhtmlでselect要素1つ、input-text要素1つを設置します。“`HTML
text and select form
年
“`上のHTMLをブラウザで見るとselect要素とinput-text要素が表示されます。
これらを多用して「入力ページ」を作るのはいいのですが、
そのページを印刷してそのまま利用するわけにはいきませ
HTML/CSSまとめ
– HTML
– nav → リンクなどのまとめをする– CSS
– カスケード：CSSの順番
あと勝ちになる、!importantで最優先で指定できる ※importantはあまり推奨されない
– スコアリング：インラインスタイル（HTML上に書くやつstyle）>id>class>何もない(h1)
– inherit：親クラスのプロパティを継承する
– initial：ブラウザのデフォルト値が適用される
– unset：inheritがあったらinheritが適用され、なければinitialが適用される
– all:unset:すべてのプロパティをクリアできる
– ユニバーサルセレクター：＊などすべてに適用されるセレクター
– ^ これは前方一致
– * これは部分一致
– $ これは後方一致
– first-of-type:一番最初のやつにスタイル適用
– nth-of-type(2):何番目か指定する事ができる
– :hoverでマウスカーソルを当てたときに色がかわる
– ::after 要素のあとに
Vueでテーブルを書く
# いきなり実装
“`html:index.html
VueTable
{{h.text}} {{d[h.id]}}
“`“`javascript:tet.js
var app = new V
