[HTML,CSS]新人エンジニアがView作成時にするうっかりミス

# はじめに
新人エンジニアの私がビューを作成しているときに犯したうっかりミスをいくつか紹介します。
反面教師にして、皆さんもお気をつけください。

# 新人エンジニアがView作成時にするうっかりミス
## ウインドウを縮めた時にビューが崩れる
私「ビュー完成しました！」
先輩「お〜画面ちょっと縮めてみて」
・・・・・
私「あれ、レイアウトが崩れた…」

画面サイズは端末や見る人によっても異なります。
ウィンドウを縮めたときにもレイアウトが崩れていないかを必ず確認するようにしましょう。

## cssの記述が散らばっている
“`
.header {
　　　　font-size: 16px;
　　　　padding-top: 20px;
background-color: grey;
padding-bottom: 30px;
}

.body {
padding: 25px;
background-color: white;
　　　　font-size: 14px;
}
“`
上記のコードで気になる点が**2つ**あります。
1つ目は`.header`で`pa

【Vue.js】tableタグの中でcomponentが読み込まれない

# コンポーネントが正しく読み込まれない！

“`html

… …

hogege

“`

このようなtableを作ってthead部分だけコンポーネント化していました。
そうするとコンポーネントが読み込まれているのですが、完全にレイアウトが崩れてしまいました。

調べたところ以下のドキュメントに記載がありました。

https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats:~:text=Element%20Placement%20Restrictions

“`
Some HTML elements, such as

,
,
and have restrictions on what element
元記事を表示

スクロールアニメーション

# パターン1

## イメージ

## HTML
“`html:HTML



“`

## CSS
“`css:CSS
.scroll {
position: absolute;
right: 6vw;
bottom: -11%;
z-index: 1;
width: 1.5625vw;
heigh

元記事を表示

アコーディオン

# 概要
タイトルをクリックしたらコンテンツが開閉される。
Boxは配下は一つのページで複数表示されることを想定し、idでなくclassで制御している。

# HTML
“`html:HTML

タイトル（クリック領域）


コンテンツ（開閉領域）

“`

# CSS
“`css:CSS

.accordionBoxTitle {
position: relative;
padding: 4.8% 5%;
font-size: 14px;
text-align: center;
cursor: pointer;
}

.accordionBoxIcon {
posi

元記事を表示

ローディング画面

# 概要
ページを開いたらローディングが表示され、指定の秒数が経ったらページ（要素）が見えるようにする。

# 使用するアニメーション（プラグイン）
## Loaders.css
https://connoratherton.com/loaders

### 実装方法
#### CSSを読み込む
GitHubから`loaders.min.css`をダウンロードし、cssファイルを読み込む。
https://github.com/ConnorAtherton/loaders.css
#### 使用するアニメーションを選ぶ
デモページから使用したいアニメーションのコードを確認し、`class`と`

`をコピペする。
https://connoratherton.com/loaders

# HTML
“`html

フローティングバナー（追従バナー）

指定のスクロール位置がブラウザトップに到達したらバナー（要素）を出現させる。

## HTML
“`html

バナーイン位置

バナーアウト位置





“`

## CSS

“`css
.floatBnr {
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
display: none;
width: 100%;
padding: 0;

元記事を表示

フレックスボックス

## フレックスボックスを使ってみよう

親要素に`display:flex;`で横並び

`flex:1;`と指定すると
１つ目のボックスが伸びて、なおかつブラウザの幅に合わせて柔軟に幅が変わる。

## 関連用語について理解しておこう

ボックス全体を　flex container
ボックス単体を　flex item

それぞれつけられるプロパティは異なる↓

ー－－flex container－－－
・flex-direction
・justify-content
・align-items
・flex-wrap
・align-content

ー－－flex itemー－－
・align-self
・order
・flex-basis
・flex-grow
・flex-shrink

ー－－flex container－－－

要素の並び、揃えを制御しよう

【flex-direction】
主軸の方向を決める（主軸↓　交差軸→)

・flex-direction:row　初期値で、左から右

・flex-direction:row-reve

元記事を表示

CSS　セレクター

## CSSの基本セレクターを学んでみよう

まず、

`h1{
color:red;
}`

`h1`をセレクター、`color:red;`を宣言と呼ぶ。

## idセレクターを使おう

id属性は同じページ内で同じ値を使ってはいけない。
また、id属性はclass属性のように空白を含めてはいけないため、複数の値を指定できない。

## 属性セレクターを使おう

属性セレクターには[]を使う。

`twitter`
↑この場合、
CSSに
`[target]{
　font-size:10px;
}`
と指定

※targetとは別ページに飛ばす際に使うセレクター

`TOP`
↑この場合、
`[href=”#top”]`と指定

ー－－urlを指定したいときー－－
完全一致　`[href=”value”]`
前方一致　`[href^=”https”]`
後方一致 `[href$=”value”]`
部分一致　`[href＊=”value”]`

## セレクターを組み

元記事を表示

CSS　基礎文法

## スタイルを継承を理解しよう

継承されるかどうか調べるときはMDNの仕様書を見る。

継承されないプロパティ例えばborderを子要素にも継承したかった場合、
子要素にinheritというキーワードを使う。

`p{
border:inherit;
}`

## デベロッパーツールを使ってみよう

要素を調べるとき、
デベロッパーツールを開いてCSSをクリックor矢印をクリック
または開いていないとき要素を右クリックして検証で見ることができる。

Comptedタブはプロパティをまとめてみることができる。

## テキストにスタイルを設定しよう

h1を細字にする
`h1{
font-weight:nomal;
}`

打ち消し線
`p{
text-decoration:line-throught;
}`

下線
`p{
text-decoratuion:under-line;
}`

## line-heightで行の高さを調整しよう

line-heightを文字サイズの３倍にしたかった場合、１文字分を表すemという単位を使う。
単位なしの場合でも指定されたfont-size

元記事を表示

自作のChrome拡張機能をManifest V3へ移行した際の修正内容まとめ

# 自作のChrome拡張機能
[Chord Dictionary](https://chrome.google.com/webstore/detail/chord-dictionary/lnefagbhokamcaedbeopnhdabkcemkcf?hl=ja)

# 修正内容

## manifest.json
“`diff_json:manifest.json
{
– “manifest_version”: 2,
+ “manifest_version”: 3,
“web_accessible_resources”: [
– “main.js”,
– “main.css”,
+ {
+ “resources”: [“main.js”, “main.css”, “sounds/*.mp3”],
+ “matches”: [“http://*/*”, “https://*/*”]
+ }
],
– “browser_action”: {
+ “action”: {
“default_title”: “Chord Di

元記事を表示

HTMLのdialog要素の背景をクリックしてdialog要素を閉じる方法

IE11のサポートが終了して遂に色々なタグが自由に使えるようになってきました。
今まで使いたくても対応が面倒なので全部divにしていた要素の一つ、dialog要素を実装していて`::backdrop`の部分をクリックして閉じるにはどうすればいいのか調べた際のメモです。

## やりかた
dialog要素がクリックされた際、`getBoundingClientRect`でdialog要素の寸法を調べ、クリックされた位置がdialog要素の内か外かをチェックし、要素外なら`close()`を発動させる。

“`js
const dialog = document.getElementsByTagName(“dialog”)[0];
const button = document.getElementsByTagName(“button”)[0];
button.addEventListener(“click”, (event) => {
dialog.showModal();
});
dialog.addEventListener(“click”, (event) => {
c

元記事を表示

最近話題のPyScriptを使ってみる

# 初めに〜PyScriptとは〜
最近、**PyScript**というものが少しホットな話題になっているようです。

これまでHTMLの中に書くことができるのは**JavaScript**だけだったのですが、PyScriptを用いると**PythonコードをHTMLの中に書いて、実行することができます。**
例えば入力されたデータを用いてグラフを描画するといったことは、これまでJavaScriptでしかできませんでしたが、これからはPythonを使うことでも可能になるのです！

2022年4月末に**Anaconda**から発表されたPyScriptですが、当記事執筆時点（2022年6月）で公開されているのは**アルファ版（パイロット版）** です。
まだまだ機能が足りないところもありますが、今後の開発が期待されます。

:::note warn
本記事執筆時点（2022年6月）で、PyScriptはアルファ版です。本番環境での使用はお控えください。
公式も「本番環境での使用は推奨しません」と発表しています。
:::

# 開発環境
この記事では以下の環境で開発を行っています。

元記事を表示

Bootstrapの水平中央の設定(text-center, d-flex)

Bootstrapの水平方向の中央配置の設定が、いまいち理解できていなかったので、軽くまとめました。

特に
* text-center
* justify-content-center
の使い方が理解できていなかったので、そういう方の参考になればと思います。

### 画面イメージ

### ソースコード

“`html











まるばつゲーム