レスポンシブ画像のテンプレートを作ろう

# はじめに
`img レスポンシブ`というようなワードでimgタグによって出力される画像をレスポンシブ対応させようとしたことはないでしょうか？
いろいろな記事を参考にしてるとどれが正解のコードなのか分からなくなってしまいます。
デザインに正解はないから見た目が整っていればいいんだよという人もいれば、これはHTMLのルールに則っていないからダメだという人もいます。
初学者は何を参考にすればいいのか分からず頭を抱えてしまうので、テンプレートを基にコードを書いて貰えばいいのでは？と思ったので、今回はimgタグのレスポンシブのレンプレートを作ります:innocent:

# 前置き
以下の知識は知っているものとして話を進めていきます。

– ブロックレベル要素
– インライン要素
– imgタグはインライン要素
– width
– max-width

# 画像をレスポンシブ対応していく
早速レスポンシブ対応にしていきたいところなのですが、imgタグはブロックレベル要素の子要素にして扱うということを知っておいてください。
HTMLの配置ルールではブロックレベル要素の中にインライン要素を配置す

お問い合わせフォーム、jsでバリデーション

“`javascript:contact.js
window.addEventListener(‘DOMContentLoaded’, () => {
// 「送信」ボタンの要素を取得
const submit = document.querySelector(‘#contact-submit’);

// エラーメッセージと赤枠の削除
function reset(input_infomation, error_message){
const input_info = document.querySelector(input_infomation);
const err_message = document.querySelector(error_message);
err_message.textContent =”;
input_info.classList.remove(‘input-invalid’);
};

// 「お名前」入力欄の空欄チェック関数

大手日系メーカーからITベンチャーに転職して思うこと

#大手日系メーカーからITベンチャーへ
何を思ったかITベンチャーへ転職をして半年が経ちました。(やっていたことはPHP, HTML, JavaScriptなど)
なんとなく半年経って思うことをまとめておこうと思います。

#転職して思うこと
20代の若いうちは貴重な時間なので、もしやりたいことがあるのであれば転職は早いうちにしたほうがいいと思った。
（年次が上がれば上がるほど転職を決断するのは難しかっただろう…）

大手勤務時代は、やりたくないことをしてただただ時間が過ぎていく感じがした。
（まぁ、かと言ってベンチャーがそうじゃないとは言い切れないところがあるが、
大手特有の若手に対して理不尽な感じとか何事にも納得できない感じとかは今はしない）

あと、周りのほとんどの人が仕事に対して情熱がなかった。
なんとかやり過ごそうとする人が多く、きつかった。
何のために仕事をして、何がしたいのか分からなかった。
向上心のある人と働きたいと思った。

＜環境について＞
大手勤務時代は人が多くて人付き合いに疲れて、仕事に集中できなかった。
ベンチャーは人数が少なくていい。
無駄に気

overflow hiddenについて

##overflowとは
CSSのプロパティの１つで、`要素のボックスからはみ出た部分をどう扱うかを指定する。`

`visible`：初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。
`hidden` ：はみ出た部分が隠れる。
`scroll` ：はみ出た部分が隠れてスクロールできる状態になる。
`auto` ：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）。

##hidden
`要素のボックスからはみ出てしまった部分を非表示にする。`

“`

あいうえおあいうえおあいうえお

/* css */
.menu {
width: 50px;
height: 50px;
overflow: hidden;
background: rgb(242, 173, 173);
}
“`

![スクリーンショット 2020-11-24 9.13.57.png](https://qiita-image-store.s3.ap-northeast-1.amazo

overflow visibleについて

##overflowとは
CSSのプロパティの１つで、`要素のボックスからはみ出た部分をどう扱うかを指定する。`

`visible`：初期値。はみ出た部分がはみ出たままの状態で表示される場合がある。
`hidden` ：はみ出た部分が隠れる。
`scroll` ：はみ出た部分が隠れてスクロールできる状態になる。
`auto` ：ブラウザにより表示が変わる（基本的にはスクロールできる状態に）。

##visible

“`

あいうえおあいうえお

/* css */
.menu {
width: 50px;
height: 50px; /* heightを指定しなければはみ出ない。 */
overflow: visible; /* visibleは初期値の為、書かれていなくても同じ表示になる。 */
background: rgb(242, 173, 173);
}

“`

![スクリーンショット 2020-11-24 8.59.48.png](https://qiita-i

【HTML・CSS】ゲーミングな文字を作ります

ゲーミングPCが欲しい・・・でも高すぎる・・・そんな風に考えたことはありませんか？
雰囲気だけでもゲーミング感を味わいたい・・・そんな私のために、HTMLとCSSでゲーミング風＝虹色に光る文字を作ります。
実用性はあまりないので、ネタとしてご覧ください。

# 作り方
作り方としては、大きく分けて2段階あります。

1. 背景を文字で切り抜く
2. 背景に虹色を適用する

以上の順で、作成していきます。

## 背景を文字で切り抜く
背景を文字で切り取るには、CSSの`background-clip`を使います。
これは背景を適用する範囲を決めるプロパティです。（[参考](https://developer.mozilla.org/ja/docs/Web/CSS/background-clip)）
使用できる値には以下があります。

* `border-box` : 境界の外側の辺まで背景を表示する
* `padding-box` ： パディングの外側の辺まで背景を表示する
* `content-box` ： コンテンツのみ背景を表示する
* `text` ： テキスト部分のみ背景を

Udemy フルスタック・Webエンジニア講座　セクション4.Javascript

きれいに整える

インテンドを活用してコードをきれいにする。
後々見なすときに便利！使いやすさを大事にしよう。

id,class

個別属性はid、共通属性はclassで指定すること。

getElementByIdの使い方

**getElementById**というメソッドは、idプロパティが指定された文字列に一致する要素を表すElementオブジェクトを返すことが出来る。

例)

“`javascript:test.js
document.getElementById(“buttom”).onclick = function(){
alert(“○○”);
“`
ここでbuttomを押すと、alertで”○○”が出てくる。

if文、for文

if文

“`javascript:test.js
if (条件) {
条件が真であれば実行
} else {
条件が偽であれば実行
}
“`

for文

“`javascript:test.

Figmaで角を丸くする方法(border-radius)

Figmaで表を作ったときに、**四隅の角の丸みを角ごとに変えたい**と思ったときに
どうやってやるんだっけとなったので、備忘録として残しておきます。

こちらを読めば、こんな感じで**角ごとに丸みを変えることができる**ようになります。


## STEP1
まずは、適当に図形を作ります。

## STEP2
ここの数値を調整すると全体の角が丸くなります。
![5f5ff3a08a7517390

HTML/CSS初心者は必見！ どんなデザインでも自由自在にできるFlexbox入門

# はじめに
今回は要素を綺麗に配置するときに、大変役立つFlexboxの使い方について紹介します！

ここでは、要素 (アイテム) が入っている箱のことをコンテナと呼んで説明します。

# YouTube動画
動画で学びたい方はこちらもどうぞ！
[【YouTube動画】 HTML/CSSのFlexboxについて詳細解説！ これでどんなデザインでも自由自在！【Flexbox入門】](https://youtu.be/84VY9zho4_g)
[](https://youtu.be/84VY9zho4_g)

# GitHub
コードのサンプルをGitHubにアップロードしてます！
Pathや一部コードを修正する必要がありますが、ローカルで試してみたい方はこちらもどうぞ！
https://github.com/yassun-youtube/html-flexbox-samples

Lazy Loadを使ってみる【現状NG】

#現状
遅延表示することができていません

#概要
下記を参考にLazyを使ってみました。Lazy Load何？とか 、なぜ使うの？ とかも記載されてるます
[Lazy Loadで画像を遅延ロードする方法](https://cluster-seo.com/blog/lazy-load-javascript-library.html)

#手順
– lazyloadのjsを読み込む

~~~html

~~~

– imgタグをの画像指定をsrcからdata-srcに変更(※下記はVueで記述)
– imgタグのclassにlazyloadを追加

~~~html

メモ：超簡単にURLパラメータ事前入力

## コード

“`JavaScript
window.onload = function(){
const searchParams = new URLSearchParams(decodeURI(location.search));
var input = document.getElementById(‘input’);
input.value = searchParams.get(‘q’);
window.history.replaceState(0, 0,’./’);
};
“`

## 内容

ページ読み込み時に実行

“`JavaScript
window.onload = function(){
//処理
};
“`

デコードしたURLからパラメータを取得

“`JavaScript
const searchParams = new URLSearchParams(decodeURI(location.search));
“`

`q`というパラメータの値を`input`にセット

“`JavaScript
var input = d

flexboxで要素の順番を入れ替える。

flexboxでbox内の順番を入れ替える、cssを紹介します。レスポンシブなサイトを使う時に結構使ったりするので覚えておくと便利です。

## flexboxの入れ替え、orderプロパティ
以下を使います。

“`css:css
.parent{
display: flex;
}
.child{
order: 1;
}
“`

親クラスに通常通りflexを使い、子クラスにはorder:1;を使います。
このorderを使う事で子要素の並び順を変更する事が出来ます。**order初期値は0です。**

“`html:html(使用例)

1

2

3

“`

“`css:css(使用例)
.parent{
display: flex;
}
.child_1{
order: 1;
}
.c

プラン表

# div

“`html