リストで先頭の記号をa) b)…と表記したい【CSS】

実装で詰まったので記録

a.)
b.)
じゃないのよ！
a)
b)
がいいのよ！
という自分のような人のために

## 実際のコード

See the Pen
list_en by minmeg (【CSSセレクター完全版】覚えるべきCSSセレクターまとめ

#・初めに
この記事は以下の方を対象としています。また、記事修正のコメントやLGTMなどモチベーションにつながるのでよろしければお願いします‼

+ 初学者の方
+ フロントエンドエンジニア志望の方
+ セレクターについて学習したい方

#・導入
閲覧ありがとうございます。この記事は、初学者がフロントエンド目指してロードマップに沿ってアウトプットしていく記事になります。
こちらの記事はPart7です。最初からご覧になりたいかたは、以下よりどうぞ。

>[Roadmap](https://github.com/kamranahmedse/developer-roadmap/blob/master/img/frontend.png?raw=true)

#・記事一覧
[part1: Internet【HTTP,Browsers】](https://qiita.com/n4suka7/items/ac3c16b3e30ec59fff0d)
[part2: Internet【DNS,Domain,Hosting】](https://qiita.com/n4suka7/items/decb31c

【初心者向け】ノンデザイナーでも、一手間加えるだけでグッと印象が変わるCSS

#どうも7noteです。一手間加えることでwebデザインをレベルアップできるCSSの Tips

CSSひと手間でグッと引き立てる、webデザインTipsを紹介。
同じ技術を使っていても、使っているCSSや使い方だけで、WEBサイトの印象はグッと良くできます。

デザイナーでなくても簡単に使えるCSSをまとめました。

## テキスト系

### ・ webフォントを使う

“`html

“`

![sample01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.

reactでsrcタグを使って画像を表示する方法

## Reactでsrcタグを使いたいがソースのパス直書きだとうまくいかない

“`
class JCEbara extends React.Component {
render() {
return (

)
}
}
“`

## 画像をインポートして使ったらいけた
“`
import ebara from ‘./img/ebara_entry.png’

…省略
return (

)
“`

[Vivus Instant] SVGの手書き風テキストアニメーションを超簡単に作成する。

### はじめに
プログラミングスクールの課題のECサイトを作っています。SVGの手書き風テキストアニメーションに憧れがありましたが、課題納期等の関係で学習時間をあまり確保できない状況でした。[vivus.jsを利用したテキストアニメーション](http://maxwellito.github.io/vivus/)というところまでは辿りつきましたが、使っているドローソフトの設定がいけないのかvivus.jsがなかなか思ったような動作をしてくれない！諦めか！と思っていたところvivusが超簡単なものを用意してくれていました！これならすぐ作成可能ですし、デモということであれば100点な動きをしてくれると思います。

### 使用したもの
Vivus instant　https://maxwellito.github.io/viv

Safariはお役所仕事

#Safariはお役所仕事

Safariがお役所仕事するのでChromeとSafariで表示が違った時の話です

##何に困ったのか

問題はこんな感じのコード

（簡易版）

“`html

ナビゲーション

文字と画像

“`

Chromeだとfooterがdivの下に潜らないのに

Safariだとfooterが下に潜っちゃう事案が発生

これは困った！

要素を調べるとなんと…

##原因

親要素にサイズを指定してました

しかも子の画像が余裕で親のサイズオーバーなんですよね

馬鹿ですね

今回わかったことは

Chromeは要素が幅をオーバーしたらそれも計算する

Safariは言われたサイズを信じる

以上お役所仕事のSafariでした

【ありえへん凡記事】CSSの基本ついてまとめてみた

#・初めに
この記事は以下の方を対象としています。また、記事修正のコメントやLGTMなどモチベーションにつながるのでよろしければお願いします‼

+ 初学者の方
+ フロントエンドエンジニア志望の方
+ CSSの概要について学習、復習したい方

#・導入
閲覧ありがとうございます。この記事は、初学者がフロントエンド目指してロードマップに沿ってアウトプットしていく記事になります。
こちらの記事はPart6です。最初からご覧になりたいかたは、以下よりどうぞ。

>[Roadmap](https://github.com/kamranahmedse/developer-roadmap/blob/master/img/frontend.png?raw=true)

#・記事一覧
[part1: Internet【HTTP,Browsers】](https://qiita.com/n4suka7/items/ac3c16b3e30ec59fff0d)
[part2: Internet【DNS,Domain,Hosting】](https://qiita.com/n4suka7/items/dec

【初心者でもわかる】CSSで水滴を再現

#どうも7noteです。大きさも自由に変更可能な水滴をCSSで再現。


## ソース

“`index.html

“`

“`style.css
.drop {
width: 100px;
height: 80px;
border-radius: 50%;
background: radial-gradient(transparent 30%, #CDCDCD 80%);
box-shadow: 2px 2px 2px #737373;
position: relative;
}
.drop::before {
content: ”;
width: 15%;
height: 15%;
background: radial-gradient(rgb

【HTML】alt属性内の特殊記号・機種依存文字はどう書くのが正解？

## はじめに
コードレビューをしていて、こんなコードを見かけました。
``

「むむむ？:thinking:」
「`&`は特殊記号だからalt属性の中でも`&`って書くべきだよね？:thinking:」

絶対的な自信を持って指摘ができなかったので
正解を知るためにいろいろ検証をしてみました！

検証端末はWindows10です。

## 検証
### 【1】ブラウザ上の表示
下記のようなテストHTMLを用意してブラウザで開きます。
故意に画像をリンク切れにして、altをテキストで表示させます。

“`html:test.html

記号:アンパサンド&

参照なし

文字実体参照

[Bootstrap]ドロップダウンメニューが隠れて表示されない問題

# 記事の概要
　bootstrapでドロップダウンメニューを実装していたところ、他のブロック要素の下に埋もれてしまいうまく表示されないことがあった。　下図のように解決できました。

解決前：　ユーザーメニューをドロップダウンで実装したところ、メニューの一部が他のブロックの下に埋もれてしまった。

解決後：　うまく表示された。

# 原因と解決
　他のブロック要素が存在し、それがposition:

レスポンシブイメージ

ファイルの重さはほぼ画像が占めているのだとか。
その画像を、ユーザーの画面幅やデバイスの解像度に沿って最適になるよう設定しておくことで、できるだけ軽いwebサイトにすることができます！

### この記事について
レスポンシブイメージでの、３つの方法をまとめます。
最初にhtmlのimageタグに書くレスポンシブイメージの説明をして、最後にbackgroundイメージのレスポンシブイメージ対応について記載します。

### レスポンシブイメージの３つの方法

１、density switching　　（density…密度）
2、art direction
3、resolution switching　　（resolution…解像度）

### 1, density switching
一番シンプルな方法です。
低解像度ディスプレイか、高解像度ディスプレイ(retina displayなど）かによって画像を出し分けます。
下記のように記載すると自動的に低解像度か高解像度かを判断して出し分けてくれます。

“`html:density-switching.html

【React】動的テーブル　セル結合

動的テーブルでセル結合をする

目指すかたち
civilization VI wiki

テーブルの特徴
・一つのセルに要素が２つ以上あったりなかったりする
・同要素でもまとまってないセルが存在する（コスト）

想定する動き
・DBからテーブルデータ引っ張ってきて(fetch)ならべる

問題
・DBから引っ張ってきて普通に並べると一列ずつになっちゃう

“`react:
const items = [
{A: “A1”, B: “B1” , C: “C1”},
{A: “A1”, B: “B2” , C: “C1”},
{A: “A1”, B: “B2” , C: “C2”},
{A: “A2”, B: “B1” , C: “C1”},
{A: “A2”, B: “B1” , C: “C2”},
];

cons

【備忘録】HTML＆CSS 上級編

#はじめに
[HTML＆CSS中級編](https://qiita.com/pensuke628/items/1d181ae1a70b9408b1f8)の続きになります。
勉強ついでに、学習したことを備忘録としてまとめようと思います。

環境
OS：macOS
エディタ：VSCode
ブラウザ：Google Chrome
受講コース：HTML & CSS 上級編

#目次
1. [本コース中に使用したCSSのプロパティ](#1本コース中に使用したcssのプロパティ)
1. [レスポンシブデザインについて](#2レスポンシブデザインについて)
1. [box-sizingプロパティについて](#3box-sizingプロパティについて)
1. [その他の学びや注意点について](#4その他の学びや注意点について)
1. [最後に](#5最後に)

#1　本コース中に使用したCSSのプロパティ
コース学習中に登場したCSSのプロパティとそれらの使用用途を簡単にまとめました。
学習中にMDNを確認しているので、コース中では使われていない用途が書かれているかもしれません。
興味がある方は、調べて

【JavaScript】スクロール実装

#参考

https://github.com/cferdinandi/smooth-scroll

#実装の仕方

##1. head内でscriptを読み込む

“`html:index.html

“`

###2. bodyの最後に記述する
パラメーターはgithubを見てください。

“`javascript:main.js
let scroll = new SmoothScroll(‘a[href*=”#”]’, {
speedAsDuration: true, //全てのスクロールを同じ時間で設定
speed: 1000, //スクロールのスピード
header: “#header”, //headerの高さを考慮してスクロールしてくれる
easing

コロナ太りの俺必見！自分にあったペースで数を読み上げてくれるパーソナルトレーナーアプリを作ったよ。

Siriに頼んでみたんですけど運動アプリが起動するだけで数を数えてくれませんでした( ﾉД`)　なのでこんな感じのを作ります。

#腕立て伏せメトロノーム（実際に使えるので是非お試しください）

***[Push-ups Metronome v1.0](https://friendly-feynman-497760.netlify.app/)***

#つくった理由はパーソナルトレーナーっぽいサポートが効果ありそうだったから。
在宅ワークや外出自粛でぶ

超初心者が、英語学習を始めたわが子に「英単語カード」をプロトタイプしてみた結果（改善点まとめ）

##今回の目的　~Webアプリでプロトタイプ！~
Webアプリケーションの学習を、数日前に始めたばかりの**超初心者**です。
[前回の投稿記事](https://qiita.com/kokano23/items/e4bc61090ad2164398cc)のとおり、基本用語そのものが理解しきれずにスタートしているため、大苦戦中?
わが子（幼児）が英語教室に通い始めたばかりなので、せっかくなら**一緒に楽しく学べるツール**のような何かを作ろうと思いました。

結果、まだまだ技術が足りず、まったく思い通りのプロトタイプにはなりませんでした。
ですが、日々アウトプットしていくことを大事にしているため、今回記事として発信します。

##英単語カード（完成品）
以下、**Netlifyで公開**しているURLとなります。

https://vigilant-borg-962fa7.netlify.app

###使い方
####①単語練習
英単語が読めるように練習しよう！ということで、**日本語名**・**英語スペル**を単語カード風に登録しました。
（わが子の性格上、これだけだと読めずにや

コロナ禍で外出できずにいる両親のために「脳活クイズ」を作ってみた！

#作った経緯
こんにちは。wataminoです。
最近、両親と電話で話をすると、「あれ」、「あの人」、「その人」という「これ・それ」言葉がすごく多いのに気が付きました。
今に始まったことではないのですが、人とあまり会話しなくなったからか、結構頻繁にこれそれ言葉がでるので、Webアプリ作成の勉強をしていることもあり、今回、「脳活クイズ」なるものを作ってみました。
#実際クイズに挑戦してみてください。
さあ、問題です。あなたは何問とけますか？
（ここをクリックしたらクイズが始まりますよ！）
　→　https://gallant-engelbart-dec721.netlify.app/
#開発はCodePen
今回の開発には、CodePenを使いました。
※[codepen](https://codepen.io/about)とはウェブ開発に必要なHTML, JS, CSSの三要素を実際の表示を見ながら開発できるウェブサービスです。
![キャプチャ5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/12683

Vue Selectの簡単な使い方まとめ

Vue.jsでプルダウン形式のコントロールを実装できるVue Selectを使う際のメモ。

[公式ドキュメント](https://vue-select.org/)

##使い方

###HTML

“`HTML

　
　

値：{{selected}}

“`

###JavaScript

“`JavaScript

Vue.component(‘v-select’, VueSelect.VueSelect)

new Vue({
el: ‘#app’,
data: {
options: [“選択肢１”,”選択肢２”],
selected: ”,
}
})

“`

v-selectにバインドされたoptions配列の中身がプルダウン形式で選択できる。
選択した値はselectedにアクセスすることで参

クイズアプリを作ってjQueryの基礎を学ぶ　第２回(全２回)

##jQueryクイズアプリ
今回は[第１回](https://qiita.com/hamaguri/items/7e382077da95e824ad3a)で作成したクイズアプリをjQueryに書き換えて作っていきます。
　[・クイズアプリを作ってフロントエンドの基礎を学ぶ　第１回(全２回)](https://qiita.com/hamaguri/items/7e382077da95e824ad3a)

jQueryはJavaScriptのライブラリーです。
ライブラリーは、JavaScriptの複雑な処理をより簡単に使⽤できるようにします。
jQueryを使うには、オフィシャルサイトからライブラリーをダウンロードします。

・https://jquery.com/download/ にて、`”Download the compressed, production jQuery 3.5.1″`を右クリックして”jquery-3.5.1.min.js”を保存します。
・”jquery-3.5.1.min.js”をアプリ内のjsフォルダに置きます。
・HTML内で、 `