今さら聞けないHTML　2020年10月15日

Emmetについて

## ■ はじめに

HTML,CSSのコーディング速度を格段に高めてくれるEmmetについて記事にしました。
この記事で得る内容は以下の通りです。

・Emmetの使用方法について
・Emmetを活用する事で、作業速度及び作業効率が上がる

■ 公式
・[Emmet チートシート](https://docs.emmet.io/cheat-sheet/)

## ■ HTMLでのEmmetの使い方（要素）

#### ① 要素の名前（例：div）を入力する


#### ② TabキーかEnterキーを入力する（以降の手順でこの記述を省略します）

![スクリーンショット 2020-10-15 9.31.36.png](https://qiita-image-store.s3.ap-northeas

css,js,html 備忘録

要素を上下中央に配置する方法

参考元：https://sole-color-blog.com/blog/532/

（自分用）スムーズにいかなかった点と解決方法①

自分用で投稿しますが、参考になれば幸いです。

1.floatを使用して二つの要素を左右に並べたときに下の要素が上に押し寄せてきた。
　→floatさせた要素に対して高さを持たせる。

2.aタグの下線を消したい。
　→aタグのcssにtext-decoration: none; を入力する。

3.liタグをdisplay: flex;で横並びにした時に、先頭のli要素の左側に謎の隙間が存在していた。
　→ul要素にpadding-left: 0; を指定する。

4.liタグをdisplay: flex;で横並びにした時に、中の文字数によって枠の大きさが変わってしまう。
　→下記3点を満たすとき、自動で均等幅になる。
　 ・display: flex;の要素が改行不可
　 ・子要素の幅がすべて統一指定
　 ・子要素の幅合計が親要素の幅を超える(width: 100%;を指定する)

5.liタグの中にあるaタグの縦位置を中央に揃えたい。
　→aタグにmarginを設定する

HTMLのfieldset要素について

#プログラミング勉強日記
2020年10月14日
HTMLのfieldset要素を初めて知ったのでまとめる。

#fieldset要素とは

– inputタグなど複数ある入力項目をまとめられる

　ウェブのフォーム内のラベル(``)のようにいくつかのコントロールをグループ化するために用いる。なので、複数のinputタグなどを項目としてグループ化するための要素である。

#fieldsetで使える属性

##disabled属性
　グループ化されている内部のすべての入力装置が無効になる。

##form属性
　`

`要素のid属性を指定することで`

`要素は中になくてもその一部にできる。

##name属性
　グループに関連付けられた名前。

#使い方

“`html

sample1

awk で html エスケープ

# awk で html エスケープする

[これ](https://www.kusaremkn.com/memo/pg/htmlescape) の awk 版を作ろうと思って。

“`awk:html.awk
#!/usr/bin/awk -f

{
gsub(“&”, “\\&”);
gsub(“‘”, “\\'”);
gsub(“`”, “\\`”);
gsub(“\””, “\\"”);
gsub(“<", "\\<"); gsub(">“, “\\>”);
print;
}
“`

# 遺言
置換先文字列の `\\&` を `\&` て書いてて悩んでたらカップ麺がのびた。

CSS Gridでslickしたら中身がクソでかくなった時のメモ

## 現象
親要素にCSSグリッドレイアウトを使用していて子要素をslickでカルーセルにしたら、カルーセルの大きさがとんでもないことになった。

“`html:index.html

hoge

“`

“`css:style.css
.grid {
display: grid;
grid-template:
“title” auto
“slider” auto /
auto;
}
.title {
grid-area: title;
}
.slider {
grid-ar

JavaScript htmlのプルダウンメニューの読み取り方法

・htmlで記述した、プルダウンメニューの作り方

“`

英語【初心者でもわかる】同じ属性値（nameやvalue）を持つチェックボックスも連動してチェックさせたり外したりする方法

# どうも7noteです。jQueryで同じ属性値同士を連動させる方法について。

**全く同じチェックボックスが複数個所にある場面**（通常時＆モーダル等）に出くわしたとき、通常画面ではチェックを入れているのにモーダルの画面にあるチェックボックスが反映されないので困ってしまいます。

今回は**離れた場所でも同じ属性値を持つチェックボックス同士を連動させる方法**について書いていきます。

この記事はjQueryを使用しています。（jQueryって何？という方は[こちら](https://qiita.com/7note/items/45bd8efbedd557667218)）

## ソース

“`index.html
//通常通り見えている用

りんご
ばなな

ド初心者がWEBデザイナーになる話。　＃2

# 初回の更新か早2ヶ月

お久しぶりの更新でございます。

以下、無駄話です。

---

初回更新時は目指すべき道がわからな過ぎて、webサイトの模写をしていたと思う。
最近はWordPressを使用したサイトの保守管理を行っていて、調べながらなんとか１つずつ問題を解消する日々。
ただ、解決出来る問題もあれば解決できない問題もあり…
根本的なWordPressへの理解が浅いんだなと思う。

作るものはコレ、例えば投稿ページをカスタムしてー
って、意味はわかるし仕組みはなんとなくわかるけど
じゃあそれを実践、ってなると全く何もできなくなってしまう。

プロの方々はどうやってWordPressを勉強したのだろうか。

本を頼りに、もともと作成してあったWebサイトをWordPressにしよう♪
みたいなのは完遂したが、それだけではちっとも知識として入っていないらしい。

やるべき事はわかっているのに、手段を調べてもさっぱり理解出来ていない現状。

まだまだ道は険しい。

【自分用】サーブレットクラスの処理の転送

【課題】乱数を発生させて、偶数が生成された場合はフォワードに、
奇数が生成された場合はリダイレクトに処理を転送する

【サーブレットクラス】

“`java

package p185;

import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(“/P185”)
public class P185 extends HttpServlet {
private static final long serialVersionUID = 1L;

デプロイ後に背景画像が適用されない場合の対処法

# この記事を書いた背景
デプロイしたら背景画像が表示されない！
調べたら結構そういう人いたため。

# 実施環境
macOS Catalina 10.15.7
VS Code 1.50.0
Ruby 2.6.5
Rails 6.0.0
サーバー：AWS EC2
WEBサーバー：Nginx
アプリケーションサーバー：unicorn 5.4.1

# 対処法
僕はこれでいけました。
デプロイ後、本番に上がったアプリ等で背景画像が表示されます。

### ①背景画像は『/app/assets/images』フォルダに格納する
### ②背景画像を指定するCSSの種類を『SCSS』にする
### ③背景画像を指定するCSSの記述『background-image: image-url(“画像名”);』

“`css:scss
/*例*/
body {
background-image: image-url(“wallpaper.jpg”);
}
“`

※この記述だと逆にローカル環境で背景画像が表示されない…笑

初投稿！！Mathオブジェクトまとめ

JavaScriptで数当てゲームを作る中で使用したMathオブジェクトについてまとめてみました。
(＊あくまでも使用したメソッドのみです。その他のMathメソッドについてはまた学習次第追記します。)


CSS BUTTONS


#Creative Button Hover

See the Pen

【超初心者向け】autofocus: trueの使用法

# autofocus属性
「autofocus: true」とはページを読み込んだらすぐにautofocus属性を記述している部分にカーソルが移動して入力状態になる、というものです。
# 具体例
一覧ページからマイページへ移動し名前を変更しようとする場合。
　
一覧ページからマイページボタンをクリックしてマイページに行くと自ら名前のフォーム部分を選択しなくてもカーソルが移動した状態でマイページが表示されます。そのためすぐに編集をすることができます！
***
⚠️autofocus:trueは1つのhtmlファイルに1つまでということを押さえておきましょう。
# 記述の仕方
ここでは上記画像のコードをそのままご紹介します。
全体の中で「autofocus: ture」がどのように使用されているのかを把握しましょう。
環境：rail

JavaScriptで毎秒カウントダウンを自動更新する方法

まず、htmlの中にテキストとspan idでtextContentでJSで取得したデータを置き換える要素を作っておきます。

“`

知ってました？大阪万博まであと日時間分秒

“`
次に、関数countdownを作っていきます。引数はdue(意味：期限）です。

“`
function countdown(due){
const now=new Date();
const rest =due.getTime()-now.getTime();
const sec =Math.floor(rest/1000)%60;
const min =Math.floor(rest/1000/60)%60;
const hours=Math.floor(rest/1000/60/60)%24;
const days=Math.floor

レスポンシブWebデザイン

#概要
レスポンシブWebデザインについて説明します。様々なブラウザで表示する際に必要となります。

目次

– レスポンシブWebデザインとは
– viewportの設定
– メディアクエリーとは
– ブレークポイント

#レスポンシブWebデザインとは
レスポンシブWebデザインとは、表示領域に合わせ見え方が変わるようにデザインされたWebサイトのこと。
例えば、パソコンとスマートフォンだとデバイスの表示領域が違い、パソコン用の表示領域のWebサイトをスマートフォンで見ると文字が小さく見にくかったりする。このような場合に、レスポンシブWebデザインを使うと、コンテンツは変更せずにWebの見え方を変えることが出来る。

#viewportの設定(HTML)
レスポンシブWebデザインを適用するのに必要な手順①
viewportとは、様々なデバイスにおける表示領域のこと。これを設定しないと、上記に記載したようにスマートフォンで見た際に文字が小さくなったりする。
HTML内のhead内に< meta >タグを記述して表示領域の横幅を合わせる。

“`html:hello.html

HTMLでdivを乱用するのは良くない

#プログラミング勉強日記
2020年10月12日
HTMLでコードを書くときにdivタグをよく使ってしまっていたがよくないと知ったのでその理由をまとめる。

#そもそもdivタグとは
　divタグはdivisionの略語で、`

`で囲った部分をブロックレベル要素としてグループ化することができる。divタグを使うことでCSSでレイアウトをそろえることができる。

#divタグを多用するのはよくない理由

– Webページの読み込み速度が低下
– CSSでスタイルを変えるのが大変になる
– JavaScriptで要素を参照するときの読み込み速度が低下

　divタグを多用されている場合は、ブラウザの技術が各要素を特定するのに時間がかかるので、Webページの読み込みの速度が遅くなる。
　また、idやclass属性を増えるのでCSSでスタイルを変えることも難しくなってしまう。また、JavaScriptで要素を参照する際にも処理能力が必要になるので、処理が遅れることがある。

#正しいdivタグの使い方

– 分割の目的や要素を集合化したいときに使用する
– 複数の要素が並んでいる場合に

動画を挿入する方法

#トップページなどに動画を挿入する方法
##GIF
###https://gyazo.com/3015a8b1f689153dcfe7fcb308d483bb

#下記コード
“`java:index.html

Brilliant Blue

“`
“`java:css
.bg-video-wrap {
position: relative;
}
p {
font-family: serif;
color: #fff;
font-size

【作ってみた】CSSだけで、ちょっとだけリアルなモンスターボール

# どうも7noteです。CSSだけでモンスターボール作ってみました。


HTML・CSSの基本だけで作ったわりにはそこそこできたが、もっとリアルなものは作れそう。うーん難しい。。。
無駄な行とかもあるかもですが堪忍ください。

“`index.html

“`

“`style.css
body {
background: #31962d;
}

.ball {
width: 200px;
height: 200px;
background: radial-gradient(8px 10px at

Flexboxでspace-between使用時の最後の要素の位置を指定する

Flexboxを使う時、要素の並び方を指定する「justify-content : space-between」をよく使う。
しかし最後の行のflexアイテム数によって並び方が異なるのでその辺の指定方法の覚え書き。
※各アイテムはレスポンシブで、ウィンドウ幅が縮んでもレイアウトはそのままとする

##はじめに
justify-content : space-between を使うメリット（多分）

・flexアイテムにいちいちマージンを指定しなくても左右の隙間が空けられる。
flexアイテムの左右マージンを考えて配置するのが面倒だと思っている。左右マージンを指定する為、親コンテナのpaddingを調整しないといけなかったりする。またcalcを使ったりしてマージンを含めた幅を計算するのもしんどい。

なのであえて、flexアイテムの左右マージンを気にしない「justify-content : space-between」での並べ方を考えてみる。

##最後の行の要素数が1つで、左寄せにしたい（デフォルト）
普通にCSSを指定する。