Web技術 【JavaScript】アコーディオンの作り方
JavaScriptでアコーディオンをコーディングしたので、メモしておく。今回は、ロード時にすべて閉じていて、dtタグをクリックするとプラスアイコンがマイナスアイコンに変化する仕様でコーディングした。表示結果 See the Pen mdO...
Web技術 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 = ...
Web技術 【WordPress】WordPressで作る簡易ログイン画面
WordPressで簡易ログイン画面を作ったので、メモしておくheader-front.php<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="...
Web技術 【JavaScript】JavaScriptをmodule化する方法
<!DOCTYPE html><html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> </head> <body> <script type="module"...