今さら聞けないHTML　2022年01月22日

[html][scss] ボタン

ボタンのhtmlとscssです。

“`html:index.html

Button

“`

“`scss:style.scss
$cWhite: white;
$cBlack: black;

#container {
text-align: center;
}

.btn {
background-color: $cWhite;
color: $cBlack;
border: 1px solid $cBlack;
padding: 10px 40px;
margin: 50px 0;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;

&:hover {
background-color: $cBlack;
color: $cWhite;
}
}
“`

CSSを書けるようになったらすぐSCSS学ぶべき理由

わたしがHTML、CSSの勉強をし始めたのが約3年前。
それから経験を積んでいく中で、「SCSS」なるものがある
というのはなんとなく聞いたことがありました。
「とりあえず、CSSをもっとちゃんと書けるようになろう！」
「とりあえずCSS書けるし、それで困ってないから…」
などのようなことを考え、あまり調べもせずにいました。

ある時、意を決して「SCSS」どんなものなのか少し勉強してみたところ、
今は、普通のCSSを見たり書いたりするのが面倒になりました。

この記事はSCSSの書き方やメリットを説明するものではなく、
「CSSをある程度書けるようになったら、
すぐにSCSSもかけるようになったほうが便利ですよ～」という記事です。

#SCSSとは
簡単に説明すると、SCSSは「CSSをより効率的に記述できる言語」
みたいな感じでいいと思います。

#すぐ学ぶべき理由
SCSSはCSSがすでに書ける人なら、全然苦労せずに書けるようになると思います。
もちろん、深堀りして勉強すれば、た

Typescript + HTML + CSS の環境を手っ取り早く整えたい (Electronも）

# はじめに
ああ、HTML と CSS と Typescript を使ってソフト開発したいなぁ〜
ただ Typescript に HTML とか CSS が混じると環境整えるのが面倒臭くなるしなぁ
と思ってるそこのあなたのために、やるべきことをここに残しておこうと思う。

– Electronを使わない場合 – **Electron を使用しない場合** に従う。
– Electronを使う場合 – **Electron を使用する場合** に従う。

# Electron を使用しない場合
グダグダ説明せず、 全ての手順を書く。上から順番に従えば HTML,CSS,typescipt 環境の完成である。
最終的な全体のディレクトリ構造がこちら。主にsrcフォルダの中で開発を行っていく。

“`
.
├── dist
├── node_modules
├── src
│ ├── index.css
│ ├── index.html
│ └── index.ts
├── package-lock.json
├── package.json
├── tsconfig.j

jQueryのhoverで離れたmenuを出現させるのにつまづいたこと

# jQueryのhoverで離れたmenuを出現させるのにつまづいたこと

## やりたいこと
ヘッダーにhoverを使ってヘッダーから少し離れた下部にメニューをドロップダウンしたい

## つまづいたこと①
ヘッダーとメニューの間が空いているため、矢印がヘッダーから外れるとhoverが外れて表示されているメニューが消える。

### 原因
どうしてもヘッダー（グッズ紹介）からメニューへカーソルを移動させると「この〜切れてしまう」の部分（以降：hover外範囲）があるためにメニューが消えてしまう

## どうしたらいいのか
矢印がhover外範囲に移動するときでもメニューが表示された状態を保っていれば、メニューに矢印が入ればメニューの状態は維持される
### 結果
タイマーを使ってhoverから矢印が離れて

[javscript]ローカルストレージにjson形式でデータを保存し、取得する

# やりたいこと
ローカルストレージに値を入れたいのだが、文字列しか入れられない。
trueやfalse、数値などのbooleanやnumber型は登録できないので、管理しやすいように
json形式でデータを保存し、データを取得しそれを使えるようにする。

## ローカルストレージの基本
まずローカルストレージとはブラウザなどにデータを保持させておく仕組みです。
ローカルストレージは永続化するので、場合によっては削除する処理を入れないといけません。

### ローカルストレージの確認方法(chrome)
開発者ツールを開き、開発者ツール上部の矢印からApplicationを選択します。


Storageという項目の中にLocal Storageという項目があるのでそちらの項目を開き、該当のサイト

CSS：マスキングテープ風

##はじめに
完全なるメモ。HTMLとCSS(SCSS)だけでやります。
ネットの記事を参考にしているので被っているものがあったらすみません。
参考程度に。

種類は、ストライプ柄とドット柄。

##完成イメージ

ストライプ柄 マスキングテープ

ドット柄　マスキングテープ

##HTML

“`html:HTML

Codestepで学ぶHTML、CSS、jQueryの模写コーディングのメモ(中級編:前半)

模写サイト
#COFFEE / ストアサイト（カフェ）
—
https://code-step.com/store-menu/

スマホサイズとPCサイズ(完成図)

“`html:リセットCSS “`
全体のスタイル

“`css:全体のスタイル