Web技術 【CSS】input type numberのスピンボタンを削除する方法
先日、ディレクターからinput type numberの矢印ボタンを削除できるかと聞かれたので、CSSで対応できると伝えた。その時のコードをメモしておく。input type numberのスピンボタン（フィールドエリアの右側に表示される...
Web技術 読書 【ブックレビュー】「空腹」こそ最強のクスリは、健康でいたければ、読んで実践した方が絶対良い。
"「空腹」こそ最強のクスリ"という本を読んだ。著者は、医学博士の青木厚さんだ。結論は、16時間何も食べない時間を作ればOK。これだけだ。もっと詳しいく知りたければ、是非この本を購入すると良いだろう。この本に出会う前からプチ断食してたこの本に...
Web技術 【JavaScript】アコーディオンの作り方
JavaScriptでアコーディオンをコーディングしたので、メモしておく。今回は、ロード時にすべて閉じていて、dtタグをクリックするとプラスアイコンがマイナスアイコンに変化する仕様でコーディングした。表示結果 See the Pen mdO...
Web技術 【CSS】IEでflexとflex-directionを使った際に出現する謎の余白の対処法
現場でflexとflex-dicrection: columnを使った際に出現した謎の余白の対処方法をメモしておく結論は、flex-directionを指定した子要素にline-height:0%を設定すればOKだ。HTML<section...
Web技術 【CSS】ラジオボタンとチェックボックスのカスタマイズ方法
ラジオボタンとチェックボックスのカスタマイズ方法をメモしておく。基本的には、下記のコードを添付するだけでOKだが、場合応じて余白や色を設定するラジオボタンHTML<div class="radio"> <input type="radio"...
Web技術 【JavaScript】サムネイル付きswiper作成方法
HTMLheadの中にswiperファイルを読み込む<!-- swiperライブラリ --> <link rel="stylesheet" href=""> <!-- //swiperライブラリ -->bodyタグの中に下記のコードを設置す...
Web技術 【CSS】おすすめ基本設定（scssで記述してある）
CSS/* table of contents -----------------------------1.背景画像パス指定2.フォント指定3.インプットフォーカス4.リンク5.画像6.ul liタグリセット---------------...
Web技術 【SCSS】cssコンパイル用おすすめmixin
おすすめmixinSCSS@charset "utf-8";/* table of content -----------------1.縦横中央配置2.vwフォントサイズ自動計算3.position absolute（縦・横の中央配置）4...
Web技術 【CSS】子要素を親要素からはみ出して画面いっぱいにする方法
子要素を親要素からはみ出して画面いっぱいにする方法表示結果 See the Pen rNWqagE by 山崎毅 (@nbudjgzu) on CodePen.HTML<div class="box"> <div class="btnAre...
Web技術 【JavaScript】バックスラッシュ（“）を使うと「+」を使わなくて済むので楽
JavaScriptconst firstName = "Takeshi";const job = "Programmer";const birthYear = 1982;const year = 2020;const theInfo = ...