20201123のHTMLに関する記事は9件です。

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



きれいに整える


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

id,class

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

getElementByIdの使い方

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

例)

test.js
document.getElementById("buttom").onclick = function(){
         alert("○○");

ここでbuttomを押すと、alertで"○○"が出てくる。

if文、for文

if文

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

for文

test.js
 for (let i = 0; i < 3; i++) {
   console.log("ただいま" + (i+1) + "回目。");
 }

実行すると、

ただいま1回目
ただいま2回目
ただいま3回目

となる。

よく出たエラー

スペルミスを多くしてしまい、エラーがでることが多々あった。前述したとおり、インテンドなどして、コード綺麗にしておけば、すぐエラーを修正することが出来た。

最後に

洗練さんでインターン1日目(フルスタック・Webエンジニア講座 セクション4.Javascript)です。

最後に
現在ここでインターンしています。
まだまだ駆け出しですが頑張ります!やる気は人一倍です!
https://senren.work/


  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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

大手日系メーカーからITベンチャーへ

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

転職して思うこと

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

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

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

<環境について>
大手勤務時代は人が多くて人付き合いに疲れて、仕事に集中できなかった。
ベンチャーは人数が少なくていい。
無駄に気を使う必要がない。風通しが良い。
老害っぽい人が少ない、社内政治に巻き込まれない、興味のないゴシップに巻き込まれない(小声)
若手が多いからか気が合うのかも。。

大手、特に日系メーカーだとルールが厳して、それを守らないと酷く怒られる。
中には理解に苦しむものも多く、若手は仕事しづらい場合も多い。
ベンチャーにはそもそもルールが少なく、社員同士で考えながら物事を進めていく感じがあってよい。
なんだがだいぶ自由になれた気がする。

ただ、結局のところ大手でもベンチャーでも被雇用者であるわけで、ある意味では雇い主の奴隷みたいなところはある。
そこらへんのバランスは自分の中でもうまく考えてやっていかないといけないなぁと思うところですね:eyes:

ITベンチャーに行って得たもの?

・やる気のある前向きな同僚(メーカー時代は会社に居座ろうとする考えの人が多かった)
・活気のある職場(同上)
・より主体的に行動ができる(他部署や業績不振に影響される不安から解放された、”歯車感”が減った)
・勉強すればするほど仕事にも活きてくるので勉強が楽しい
・プログラミングの技術的な話が聞けて、成長できる
・会社大きくなっていくことを考えるとなんだかロマンがある

大手メーカーを辞めて失ったもの?

・年功序列で上がっていく給料
  →資格取得などして自分で自分の評価を上げていく(修羅の道)
・安定(?)
  →首を切られてもある程度は生きていけるように知識と技術力を身に着ける(修羅の道)
・良い世間体や社会的信用(?)
  →ある意味しょうがない
・ローンが組みにくくなった
  →ローンは組まない
・大企業に勤める友人とは話が合いにくくなったかも
  →ある意味しょうがない

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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

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

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

83259fff6716b6f4c7fecf4bce14be65.png

STEP1

まずは、適当に図形を作ります。
9f3677a538d89182a58bf73cbd025449.png

STEP2

ここの数値を調整すると全体の角が丸くなります。
5f5ff3a08a7517390ef05f37fed2a20b.png

STEP3

四隅を個別に調整するためには、横の四角っぽいやつをクリックします。
d7bb7e19673a341d0bd2aeb41f4137b1.png

STEP4

そして、四隅の丸み具合を調整できるようになりました。
順番は
左上(200)→右上(20) → 右下(500) → 左下(0)
です。
578dd68708587266eecdd870ca99080f.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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

はじめに

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

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

YouTube動画

動画で学びたい方はこちらもどうぞ!
【YouTube動画】 HTML/CSSのFlexboxについて詳細解説! これでどんなデザインでも自由自在!【Flexbox入門】
HTML/CSS の flexbox について詳細解説! これでどんなデザインでも自由自在!【Flexbox入門】

GitHub

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

コンテナ内の全要素の配置

コンテナに入っている要素の並びを一括で指定したい場合は、flex-direction, justify-content, align-items, align-content, flex-wrapなどがあります。

flex-direction

flex-directionは、コンテナ内の要素をどの軸方向で並べるかを決めるプロパティです。

<div class="container" style="display: flex; flex-direction: <オプション>">
  <div class="red">1</div>
  <div class="blue">2</div>
  <div class="green">3</div>
  <div class="purple">4</div>
</div>

flex-direction: row;

何も指定しない場合、デフォルトはこれになります。
スクリーンショット 2020-11-20 16.13.32.png

flex-direction: row-reverse;

スクリーンショット 2020-11-20 16.13.41.png

flex-direction: column;

スクリーンショット 2020-11-20 16.14.34.png

flex-direction: column-reverse;

スクリーンショット 2020-11-20 16.14.41.png

justify-content

justify-contentは、コンテナ内の要素をflex-directionの向きに従って、どのようにスペースを空けるかを決めるプロパティです。

<div class="container" style="display: flex; justify-content: <オプション>;">
  <div class="red">1</div>
  <div class="blue">2</div>
  <div class="green">3</div>
  <div class="purple">4</div>
</div>

justify-content: flex-start;

スクリーンショット 2020-11-20 16.27.47.png

justify-content: flex-end;

スクリーンショット 2020-11-20 16.28.06.png

justify-content: center;

スクリーンショット 2020-11-20 16.28.14.png

justify-content: space-between;

スクリーンショット 2020-11-20 16.28.34.png

justify-content: space-around;

スクリーンショット 2020-11-20 16.28.44.png

justify-content: space-evenly;

スクリーンショット 2020-11-20 16.28.53.png

align-items

align-itemsは、コンテナ内の要素をflex-directionの向きに対してどの位置で配置するかを決めるプロパティです。

<div class="container" style="height: 100px; align-items: <オプション>;">
  <div class="red square">1</div>
  <div class="blue square">2</div>
  <div class="green square">3</div>
  <div class="purple square">4</div>
</div>

align-items: flex-start;

スクリーンショット 2020-11-23 14.54.20.png

align-items: flex-end;

スクリーンショット 2020-11-23 14.54.29.png

align-items: center;

スクリーンショット 2020-11-23 14.54.54.png

align-items: stretch;

スクリーンショット 2020-11-23 14.55.08.png

align-items: baseline;

スクリーンショット 2020-11-23 14.55.21.png

align-content

align-contentは、ウィンドウ幅が縮められたときに、コンテナ内の要素をどのように折り返すかを決めるプロパティです。

<div class="container" style="display: flex; flex-wrap: wrap; align-content: <オプション>;">
  <div class="red rectangle">1</div>
  <div class="blue rectangle">2</div>
  <div class="green rectangle">3</div>
  <div class="purple rectangle">4</div>
</div>

align-content: flex-start;

スクリーンショット 2020-11-23 15.10.40.png

align-content: flex-end;

スクリーンショット 2020-11-23 15.10.50.png

align-content: center;

スクリーンショット 2020-11-23 15.10.59.png

align-content: stretch;

スクリーンショット 2020-11-23 15.11.10.png

align-content: space-between;

スクリーンショット 2020-11-23 15.11.18.png

align-content: space-around;

スクリーンショット 2020-11-23 15.11.35.png

flex-wrap

flex-wrapはウィンドウ幅が縮められたときに、コンテナ内の要素を複数行にするかどうかを決めるプロパティです。

<div class="container" style="display: flex; flex-wrap: <オプション>;">
  <div class="red rectangle">1</div>
  <div class="blue rectangle">2</div>
  <div class="green rectangle">3</div>
  <div class="purple rectangle">4</div>
</div>

nowrap;

スクリーンショット 2020-11-23 15.25.53.png

wrap;

スクリーンショット 2020-11-23 15.26.04.png

wrap-reverse;

スクリーンショット 2020-11-23 15.26.14.png

コンテナ内の一部の要素の配置

一部の要素だけ配置を変えたい場合のプロパティは、order, flex-grow, flex-shrink, align-selfなどがあります。

order

orderはHTML要素の記述する順番は変えずに、表示順を変えるプロパティです。
下のような書き方をすると、2番目の要素 (青い箱) が4番目に移ります。

<div class="container" style='display: flex;'>
  <div class="red rectangle">1</div>
  <div class="blue rectangle" style="order: 4">2</div>
  <div class="green rectangle">3</div>
  <div class="purple rectangle">4</div>
</div>

スクリーンショット 2020-11-23 15.30.14.png

flex-glow

flex-glowはコンテナ内に隙間があったときに、その隙間を各要素がどの比率で占有するか設定するプロパティです。

<div class="container" style='display: flex;'>
  <p class="red" style="flex-grow: 0; padding: 12px; text-align: center;">1</p>
  <p class="blue" style="flex-grow: 0; padding: 12px; text-align: center;">2</p>
</div>

スクリーンショット 2020-11-23 15.39.02.png

<div class="container" style='display: flex;'>
  <p class="red" style="flex-grow: 1; padding: 12px; text-align: center;">1</p>
  <p class="blue" style="flex-grow: 1; padding: 12px; text-align: center;">2</p>
</div>

スクリーンショット 2020-11-23 15.44.34.png

<div class="container" style='display: flex;'>
  <p class="red" style="flex-grow: 1; padding: 12px; text-align: center;">1</p>
  <p class="blue" style="flex-grow: 1; padding: 12px; text-align: center;">2</p>
  <p class="green" style="flex-grow: 2; padding: 12px; text-align: center;">1</p>
</div>

スクリーンショット 2020-11-23 15.44.43.png

flex-shrink

flex-shrinkはウィンドウを縮めるときに、どの比率で縮めるかを指定できるプロパティです。

<div class="container" style='display: flex;'>
  <p class="red rectangle" style="flex-shrink: 0;">0</p>
  <p class="blue rectangle" style="flex-shrink: 1;">1</p>
  <p class="green rectangle" style="flex-shrink: 2;">2</p>
  <p class="purple rectangle" style="flex-shrink: 1;">1</p>
</div>

output.gif

align-self

align-selfは任意の要素の位置を個別に設定できるプロパティです。

<div class="container" style="display: flex; align-items: flex-start;">
  <p class="red rectangle">red</p>
  <p class="blue rectangle" style="align-self: center;">blue</p>
  <p class="green rectangle">green</p>
</div>

スクリーンショット 2020-11-23 16.06.34.png

具体例

上記で説明したFlexboxの具体例をみていきます。

例1. 中央とそのすぐ左への配置

緑をウィンドウの中心におき、そのすぐ左に赤を配置するレイアウトを考えます (上下の要素は目安で入れただけなので、無視してください)。
スクリーンショット 2020-11-23 16.27.59.png


解答例 (他の解答例も募集中)
<div style="display: flex;">
  <div style="flex-grow: 1; width: 100%; display: flex; justify-content: flex-end;">
    <p class="red square">中心すぐ左</p>
  </div>
  <div class="green square" style="flex-grow: 0; width: 150px;">中心</div>
  <div style="flex-grow: 1; width: 100%;"></div>
</div>


例2. 右側にメニューとそれ以外の範囲

右側にメニューやアイコンなどがあって、左側はそれ以外のものを配置するレイアウトを考えてみます。
スクリーンショット 2020-11-23 16.07.55.png


解答例 (他の解答例も募集中)
<div style="display: flex;">
  <div class="red" style="display: flex; flex-grow: 1; padding: 12px;">
    左の範囲すべて
  </div>

  <div style="display: flex;">
    <p class="green"></p>
    <p class="purple">メニュー</p>    
  </div>
</div>


例3. 両端にメニュー

両端に2組みずつ要素を配置するレイアウトを考えてみます。
スクリーンショット 2020-11-23 16.22.01.png


解答例 (他の解答例も募集中)
<div style="display: flex; justify-content: space-between;">
  <div style="display: flex">
    <p class="red"></p>
    <p class="blue">メニュー</p>
  </div>
  <div style="display: flex;">
    <p class="green"></p>
    <p class="purple">メニュー</p>    
  </div>
</div>


例4. フッター

ページの一番下にフッターを配置するレイアウトを考えます。
スクリーンショット 2020-11-23 16.25.16.png


解答例 (他の解答例も募集中)
<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh">
  <div>
    <h2 class="title">ページ下にフッター</h2>
    <div>
      下にフッターがあります。
    </div>    
  </div>

  <div class="red" style="display: flex; align-items: center; padding: 0 40px; height: 40px; width: 100%;">
    フッター
  </div>
</div>


例5. 小さくなり方が項目ごとに違うテーブルのような要素

タイトルの長さを固定にし、ウィンドウを小さくすると、概要, 備考 < 価格の順で小さくなるようなレイアウトを考えます。
スクリーンショット 2020-11-23 16.45.42.png


解答例 (他の解答例も募集中)
<div style="display: flex; height: 40px;">
  <div class="red" style="width: 260px; flex-shrink: 0;">タイトル</div>
  <div class="blue" style="width: 260px; flex-shrink: 1;">概要</div>
  <div class="green" style="width: 260px; flex-shrink: 4; min-width: 100px;">価格</div>
  <div class="purple" style="width: 260px; flex-shrink: 1;">備考</div>
</div>


  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

どんなデザインでも自由自在! Flexbox入門

はじめに

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

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

YouTube動画

動画で学びたい方はこちらもどうぞ!
【YouTube動画】 HTML/CSSのFlexboxについて詳細解説! これでどんなデザインでも自由自在!【Flexbox入門】
HTML/CSS の flexbox について詳細解説! これでどんなデザインでも自由自在!【Flexbox入門】

GitHub

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

コンテナ内の全要素の配置

コンテナに入っている要素の並びを一括で指定したい場合は、flex-direction, justify-content, align-items, align-content, flex-wrapなどがあります。

flex-direction

flex-directionは、コンテナ内の要素をどの軸方向で並べるかを決めるプロパティです。

<div class="container" style="display: flex; flex-direction: <オプション>">
  <div class="red">1</div>
  <div class="blue">2</div>
  <div class="green">3</div>
  <div class="purple">4</div>
</div>

flex-direction: row;

何も指定しない場合、デフォルトはこれになります。
スクリーンショット 2020-11-20 16.13.32.png

flex-direction: row-reverse;

スクリーンショット 2020-11-20 16.13.41.png

flex-direction: column;

スクリーンショット 2020-11-20 16.14.34.png

flex-direction: column-reverse;

スクリーンショット 2020-11-20 16.14.41.png

justify-content

justify-contentは、コンテナ内の要素をflex-directionの向きに従って、どのようにスペースを空けるかを決めるプロパティです。

<div class="container" style="display: flex; justify-content: <オプション>;">
  <div class="red">1</div>
  <div class="blue">2</div>
  <div class="green">3</div>
  <div class="purple">4</div>
</div>

justify-content: flex-start;

スクリーンショット 2020-11-20 16.27.47.png

justify-content: flex-end;

スクリーンショット 2020-11-20 16.28.06.png

justify-content: center;

スクリーンショット 2020-11-20 16.28.14.png

justify-content: space-between;

スクリーンショット 2020-11-20 16.28.34.png

justify-content: space-around;

スクリーンショット 2020-11-20 16.28.44.png

justify-content: space-evenly;

スクリーンショット 2020-11-20 16.28.53.png

align-items

align-itemsは、コンテナ内の要素をflex-directionの向きに対してどの位置で配置するかを決めるプロパティです。

<div class="container" style="height: 100px; align-items: <オプション>;">
  <div class="red square">1</div>
  <div class="blue square">2</div>
  <div class="green square">3</div>
  <div class="purple square">4</div>
</div>

align-items: flex-start;

スクリーンショット 2020-11-23 14.54.20.png

align-items: flex-end;

スクリーンショット 2020-11-23 14.54.29.png

align-items: center;

スクリーンショット 2020-11-23 14.54.54.png

align-items: stretch;

スクリーンショット 2020-11-23 14.55.08.png

align-items: baseline;

スクリーンショット 2020-11-23 14.55.21.png

align-content

align-contentは、ウィンドウ幅が縮められたときに、コンテナ内の要素をどのように折り返すかを決めるプロパティです。

<div class="container" style="display: flex; flex-wrap: wrap; align-content: <オプション>;">
  <div class="red rectangle">1</div>
  <div class="blue rectangle">2</div>
  <div class="green rectangle">3</div>
  <div class="purple rectangle">4</div>
</div>

align-content: flex-start;

スクリーンショット 2020-11-23 15.10.40.png

align-content: flex-end;

スクリーンショット 2020-11-23 15.10.50.png

align-content: center;

スクリーンショット 2020-11-23 15.10.59.png

align-content: stretch;

スクリーンショット 2020-11-23 15.11.10.png

align-content: space-between;

スクリーンショット 2020-11-23 15.11.18.png

align-content: space-around;

スクリーンショット 2020-11-23 15.11.35.png

flex-wrap

flex-wrapはウィンドウ幅が縮められたときに、コンテナ内の要素を複数行にするかどうかを決めるプロパティです。

<div class="container" style="display: flex; flex-wrap: <オプション>;">
  <div class="red rectangle">1</div>
  <div class="blue rectangle">2</div>
  <div class="green rectangle">3</div>
  <div class="purple rectangle">4</div>
</div>

nowrap;

スクリーンショット 2020-11-23 15.25.53.png

wrap;

スクリーンショット 2020-11-23 15.26.04.png

wrap-reverse;

スクリーンショット 2020-11-23 15.26.14.png

コンテナ内の一部の要素の配置

一部の要素だけ配置を変えたい場合のプロパティは、order, flex-grow, flex-shrink, align-selfなどがあります。

order

orderはHTML要素の記述する順番は変えずに、表示順を変えるプロパティです。
下のような書き方をすると、2番目の要素 (青い箱) が4番目に移ります。

<div class="container" style='display: flex;'>
  <div class="red rectangle">1</div>
  <div class="blue rectangle" style="order: 4">2</div>
  <div class="green rectangle">3</div>
  <div class="purple rectangle">4</div>
</div>

スクリーンショット 2020-11-23 15.30.14.png

flex-glow

flex-glowはコンテナ内に隙間があったときに、その隙間を各要素がどの比率で占有するか設定するプロパティです。

<div class="container" style='display: flex;'>
  <p class="red" style="flex-grow: 0; padding: 12px; text-align: center;">1</p>
  <p class="blue" style="flex-grow: 0; padding: 12px; text-align: center;">2</p>
</div>

スクリーンショット 2020-11-23 15.39.02.png

<div class="container" style='display: flex;'>
  <p class="red" style="flex-grow: 1; padding: 12px; text-align: center;">1</p>
  <p class="blue" style="flex-grow: 1; padding: 12px; text-align: center;">2</p>
</div>

スクリーンショット 2020-11-23 15.44.34.png

<div class="container" style='display: flex;'>
  <p class="red" style="flex-grow: 1; padding: 12px; text-align: center;">1</p>
  <p class="blue" style="flex-grow: 1; padding: 12px; text-align: center;">2</p>
  <p class="green" style="flex-grow: 2; padding: 12px; text-align: center;">1</p>
</div>

スクリーンショット 2020-11-23 15.44.43.png

flex-shrink

flex-shrinkはウィンドウを縮めるときに、どの比率で縮めるかを指定できるプロパティです。

<div class="container" style='display: flex;'>
  <p class="red rectangle" style="flex-shrink: 0;">0</p>
  <p class="blue rectangle" style="flex-shrink: 1;">1</p>
  <p class="green rectangle" style="flex-shrink: 2;">2</p>
  <p class="purple rectangle" style="flex-shrink: 1;">1</p>
</div>

output.gif

align-self

align-selfは任意の要素の位置を個別に設定できるプロパティです。

<div class="container" style="display: flex; align-items: flex-start;">
  <p class="red rectangle">red</p>
  <p class="blue rectangle" style="align-self: center;">blue</p>
  <p class="green rectangle">green</p>
</div>

スクリーンショット 2020-11-23 16.06.34.png

具体例

上記で説明したFlexboxの具体例をみていきます。

例1. 中央とそのすぐ左への配置

緑をウィンドウの中心におき、そのすぐ左に赤を配置するレイアウトを考えます (上下の要素は目安で入れただけなので、無視してください)。
スクリーンショット 2020-11-23 16.27.59.png


解答例 (他の解答例も募集中)
<div style="display: flex;">
  <div style="flex-grow: 1; width: 100%; display: flex; justify-content: flex-end;">
    <p class="red square">中心すぐ左</p>
  </div>
  <div class="green square" style="flex-grow: 0; width: 150px;">中心</div>
  <div style="flex-grow: 1; width: 100%;"></div>
</div>


例2. 右側にメニューとそれ以外の範囲

右側にメニューやアイコンなどがあって、左側はそれ以外のものを配置するレイアウトを考えてみます。
スクリーンショット 2020-11-23 16.07.55.png


解答例 (他の解答例も募集中)
<div style="display: flex;">
  <div class="red" style="display: flex; flex-grow: 1; padding: 12px;">
    左の範囲すべて
  </div>

  <div style="display: flex;">
    <p class="green"></p>
    <p class="purple">メニュー</p>    
  </div>
</div>


例3. 両端にメニュー

両端に2組みずつ要素を配置するレイアウトを考えてみます。
スクリーンショット 2020-11-23 16.22.01.png


解答例 (他の解答例も募集中)
<div style="display: flex; justify-content: space-between;">
  <div style="display: flex">
    <p class="red"></p>
    <p class="blue">メニュー</p>
  </div>
  <div style="display: flex;">
    <p class="green"></p>
    <p class="purple">メニュー</p>    
  </div>
</div>


例4. フッター

ページの一番下にフッターを配置するレイアウトを考えます。
スクリーンショット 2020-11-23 16.25.16.png


解答例 (他の解答例も募集中)
<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh">
  <div>
    <h2 class="title">ページ下にフッター</h2>
    <div>
      下にフッターがあります。
    </div>    
  </div>

  <div class="red" style="display: flex; align-items: center; padding: 0 40px; height: 40px; width: 100%;">
    フッター
  </div>
</div>


例5. 小さくなり方が項目ごとに違うテーブルのような要素

タイトルの長さを固定にし、ウィンドウを小さくすると、概要, 備考 < 価格の順で小さくなるようなレイアウトを考えます。
スクリーンショット 2020-11-23 16.45.42.png


解答例 (他の解答例も募集中)
<div style="display: flex; height: 40px;">
  <div class="red" style="width: 260px; flex-shrink: 0;">タイトル</div>
  <div class="blue" style="width: 260px; flex-shrink: 1;">概要</div>
  <div class="green" style="width: 260px; flex-shrink: 4; min-width: 100px;">価格</div>
  <div class="purple" style="width: 260px; flex-shrink: 1;">備考</div>
</div>


  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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

現状

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

概要

下記を参考にLazyを使ってみました。Lazy Load何?とか 、なぜ使うの? とかも記載されてるます
Lazy Loadで画像を遅延ロードする方法

手順

  • lazyloadのjsを読み込む
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.min.js"></script>
  • imgタグをの画像指定をsrcからdata-srcに変更(※下記はVueで記述)
  • imgタグのclassにlazyloadを追加
<!-- <img class="content_img" :src="videoInfo.img_url"> -->
<img class="content_img lazyload" :data-src="videoInfo.img_url">
  • bodyの最後でlazyload()を実行
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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

コード

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,'./');
};

内容

ページ読み込み時に実行

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

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

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

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

var input = document.getElementById('input');
input.value = searchParams.get('q');

ブラウザのURL欄からパラメータを削除

window.history.replaceState(0, 0,'./');
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

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

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

flexboxの入れ替え、orderプロパティ

以下を使います。

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

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

html(使用例)
<div class="parent">
  <div class="child_1">1</div>
  <div class="child_2">2</div>
  <div class="child_3">3</div>
</div>
css(使用例)
.parent{
  display: flex;
}
.child_1{
  order: 1;
}
.child_3{
  order: 2;
}

この場合、.child_nはどのような順になるでしょう?答えは2,1,3です。
0から始まる事に注意ましょう。

縦並びの入れ替え、flex-directionプロパティ

縦並びの場合の順番の入れ替えはflex-directionを、display:flex;とセットで使います。flexboxが横並びでしか使わなそうなのでなんだか不思議な感じですが、flex-directionがflexのオプション的なイメージだと思います。

で実際の使い方ですが、display:flex;を使用すると、初期値として「flex-direction:row;」が付与されます。これで横並びになってます。そして縦の場合は「flex-direction:column;」を使用し、後から方向を縦に変えます。

試しに先程の使用例に追加してみます。

css(使用例)
.parent{
  display: flex;
  flex-direction: column;
}
.child_1{
  order: 1;
}
.child_3{
  order: 2;
}

すると画面上は縦に2,1,3と並んだかと思います。

実践篇

初心者向けの解説に実践していきます。不要な方は見て頂かなくても結構です。
以下のようなワイヤーフレームをXDで作りました。

【WF】
スクリーンショット 2020-11-22 22.12.01.png

見てみると、mainとsidebarの配置がPCとモバイルで変わっている事が分かります。
上記で紹介した,flex,order,flex-directionを使用することで作る事が出来ます。
まずは以下のようなHTMLを用意します。

html
<div class="container">
  <header>header</header>
  <div class="mainContents">
    <main>mein contents</main>
    <aside>side bar</aside>
  </div>
  <footer>footer</footer>
</div>

今回は分かりやすくブロックと最低限のテキストだけにしています。
次にCSSです。モバイル版から作っていきます。

css
@charset "UTF-8";
/* reset */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
/* body */
body{
  background: rgb(230, 230, 230);
}
.container{
  max-width: 960px;
  margin: 50px auto;
  padding: 10px;
  background: white;
}
/* header */
header, footer{
  width: 100%;
  height: 3rem;
  background: pink;
}
/* main contents */
main{
  height: 200px;
  background: aquamarine;
  margin: 1rem 0;
}
/* main contents sidebar */
aside{
  width: 100%;
  height: 50px;
  background: beige;
  margin: 1rem 0;
}

ブラウザを確認しましょう。

スクリーンショット 2020-11-22 22.49.30.png

最初からhtmlをsidebar→mainの順にしても良いのですが、文章構造的におかしい気もしますし、今回は練習で書いているので気にしないで下さい。
ではmainとsidebarの上下を入れ替えます。

css
.mainContents{
  /* flexboxを縦に配置 */
  display: flex;
  flex-direction: column;
}
main{
  height: 200px;
  background: aquamarine;
  /* bottomのみに変更 */
  margin-bottom: 1rem;
  /* 配置の順位を2番目に */
  order: 1;
}

親クラス(.mainContents)に対し、flexで横並び、flex-directionで縦方向に変更してます。
子要素(main)には、配置の順を2番目にするためorder:1;を付与しました。

スクリーンショット 2020-11-23 0.01.34.png

今度はPC版のサイズのコードを書き足していきます。
ブレイクポイントは768pxとします。
図解すると以下のような構成に。

flex_sample_2_カンプ.jpg

横並びにし、mainとsidebarの割合を7:3にします。

css
/* 768px以上のcss */
@media screen and (min-width: 768px){
  .mainContents{
    /* flexboxを横に配置(初期値に戻す) */
    flex-direction: row;
  }
}
@media screen and (min-width: 768px){
  main{
    margin-top: 1rem;
    width: 70%;
    /* 配置の順位を初期値に戻す */
    order: 0;
  }
}
@media screen and (min-width: 768px){
  aside{
    width: 30%;
    height: 150px;
    margin-left: 1rem;
  }
}

mediaクエリを使用し768px以上で切り替わるようにしてます。親クラスのflex-direction、子クラスorderを初期値に戻すところがポイントでしょうか?画面を確認します。

48728ee3a322005adaa9d61bf7ca0240.gif

このように画面が切り替わればOKです。以下に完成形コードを載せておきます。marginの配置など少し調整しているので見比べておいて下さい。

html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flexbox_sample_3s</title>
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
  <!-- CSS -->
  <link rel="stylesheet" href="../assets/css/flexbox_sample_3.css">
</head>
<body>
  <div class="container">
    <header>header</header>
    <div class="mainContents">
      <main>mein contents</main>
      <aside>side bar</aside>
    </div>
    <footer>footer</footer>
  </div>
</body>
</html>
css
@charset "UTF-8";
/* reset */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
/* body */
body{
  background: rgb(230, 230, 230);
}
.container{
  max-width: 960px;
  margin: 50px auto;
  padding: 10px;
  background: white;
}
/* header */
header, footer{
  width: 100%;
  height: 3rem;
  background: pink;
}
/* main contents */
.mainContents{
  margin: 1rem 0;
  /* flexboxを縦に配置 */
  display: flex;
  flex-direction: column;
}
/* 768px以上のcss */
@media screen and (min-width: 768px){
  .mainContents{
    /* flexboxを横に配置(初期値に戻す) */
    flex-direction: row;
  }
}
main{
  height: 200px;
  background: aquamarine;
  /* 配置の順位を2番目に */
  order: 1;
}
@media screen and (min-width: 768px){
  main{
    width: 70%;
    /* 配置の順位を初期値に戻す */
    order: 0;
  }
}
/* main contents sidebar */
aside{
  width: 100%;
  height: 50px;
  background: beige;
  margin-bottom: 1rem;
}
@media screen and (min-width: 768px){
  aside{
    width: 30%;
    height: 150px;
    margin-left: 1rem;  
  }
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

プラン表

div

screencapture-file-Users-makotokawakami-projects-css-plan-div-html-2020-11-23-00_23_23.png

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>CSS Chat</title>
  <style>
    .plan{
      border-radius:10px;
      margin-left:3%;
      width: calc(85% / 3);
      /* width: 20%; */
      /* border: solid 1px #333 ; */

    }
    .plan div{
      /* margin-bottom:0.5rem; */
      height:120px;
      display: table;
      margin: 0 auto;
      padding:0 5px;

    }
    .plan p{
      text-align:center;
      vertical-align:middle;
      display: table-cell;

    }

    a{
      background-color: #25b327;
      color: white;
      padding:5px 10px;
      border-radius: 30px;
      font-weight: bold;
    }
  </style>
</head>
<body>

<div style="display:flex;">
  <div class="plan" style="padding-top: 3px; width:15%;">
    <div>
      <p>
        見出し見出し見出し
      </p>
    </div>
    <div>
      <p>
        見出し
      </p>
    </div>
    <div>
      <p>
        見出し
      </p>
    </div>
    <div>
      <p>
        見出し
      </p>
    </div>
    <div>
      <p>
        見出し
      </p>
    </div>
  </div>
  <div class="plan" style="border: solid 3px #99FF66; ">
    <div>
      <p style="color:#99FF66; font-size:1.5rem; font-weight: bold">
        A
      </p>
    </div>
    <div>
      <p>
        データ1データ1データ1
      </p>
    </div>
    <div>
      <p>
        データ2<br>
        <a href="#">申し込み</a>
      </p>
    </div>

    <div style="display:flex; padding:0; ">
      <div style="width:50%; border-right: solid 1px #99FF66;">
        <p>
          データ3
        </p>
      </div>
      <div style="width:50%; border-left: solid 1px #99FF66;">
        <p>
          データ3-2データ3-2データ3-2
        </p>
      </div>
    </div>

    <div style="display:flex; padding:0; ">
      <div style="width:50%; border-right: solid 1px #99FF66;">
        <p>
          データ4
        </p>
      </div>
      <div style="width:50%; border-left: solid 1px #99FF66;">
        <p>
          データ4-2
        </p>
      </div>
    </div>

  </div>
  <div class="plan" style="border: solid 3px #FF9966; ">
    <div>
      <p style="color:#FF9966; font-size:1.5rem; font-weight: bold">
        B
      </p>
    </div>
    <div>
      <p>
        データ1
      </p>
    </div>
    <div>
      <p>
        データ2<br>
        <a href="#">申し込み</a>
      </p>
    </div>
    <div>
      <p>
        データ3
      </p>
    </div>
    <div>
      <p>
        データ4
      </p>
    </div>
  </div>
  <div class="plan" style="border: solid 3px #99CCFF; ">
    <div>
      <p style="color:#99CCFF; font-size:1.5rem; font-weight: bold">
        C
      </p>
    </div>
    <div>
      <p>
        データ1
      </p>
    </div>
    <div>
      <p>
        データ2<br>
        <a href="#">申し込み</a>
      </p>
    </div>
    <div>
      <p>
        データ3データ3データ3データ3データ3データ3
      </p>
    </div>
    <div>
      <p>
        データ4
      </p>
    </div>
  </div>
</div>
</body>

table

screencapture-file-Users-makotokawakami-projects-css-plan-table-html-2020-11-23-07_41_56.png

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>CSS Chat</title>
  <style>

    table{
      /* border-collapse: collapse; */
      border-spacing: 5px 0;
      table-layout: fixed;
      width:100%;
    }

    table th{
      text-align: center;
      padding: 7px 0;
      width: calc(100% / 3);
    }

    table td{
      text-align: center;
      padding: 10px 5px;
      width: calc(100% / 3);
      height:100px;
    }

    table td a{
      background-color: #25b327;
      color: white;
      padding:5px 20px;
      border-radius: 30px;
      font-weight: bold;
    }
    /* table tr:last-child{
      border-bottom:solid 1px #99FF66;
    } */

    /* 縦1列目 */
    table th:nth-child(1){
      background-color:#99FF66;
    }
    table td:nth-child(1){
      border-right:solid 1px #99FF66;
      border-left:solid 1px #99FF66;
    }

    /* 縦2列目 */
    table th:nth-child(2){
      background-color:#f34955;
      color: white;
    }
    table td:nth-child(2){
      border-right:solid 1px #f34955;
      border-left:solid 1px #f34955;
    }

    /* 縦3列目 */
    table th:nth-child(3){
      background-color:#f5b932;
      color: white;
    }
    table td:nth-child(3){
      border-right:solid 1px #f5b932;
      border-left:solid 1px #f5b932;
    }

    /* 横2行目 */
    table tr:nth-child(2) td{
      font-size:1.2rem;
    }

    /* table .popular{
      width: 180px;
    } */
    /* table th.popular{
      position: relative;
    } */
    /* table th.popular span.inner{
      position: absolute;
      color:white;
      background-color: #f34955;
      left: 0;
      bottom: 0;
      display: block;
      width: 180px;
      padding: 10px 0;
    } */
    /* table tr *:nth-child(1){
      background: #49c5f0;
    } */

  </style>
</head>
<body>
  <table>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
    <tr>
      <td>¥0</td>
      <td>¥5,000</td>
      <td>¥8,000</td>
    </tr>
    <tr>
      <td><a href="#">申し込み</a></td>
      <td><a href="#">申し込み</a></td>
      <td><a href="#">申し込み</a></td>
    </tr>
    <tr>
      <td>データ1</td>
      <td>データ1</td>
      <td>データ1</td>
    </tr>
    <tr>
      <td>
        <div style="display:flex; height:100%;">
          <div style="width:50%; text-align: center; padding:35px 0; border-right:solid 1px #99FF66">データ2</div>
          <div style="width:50%; text-align: center; padding:35px 0; border-left:solid 1px #99FF66">データ2</div>
        </div>
      </td>
      <td>データ2</td>
      <td>データ2</td>
    </tr>
    <tr>
      <td style="border-bottom:solid 1px #99FF66;">
        <div style="display:flex;">
          <div style="width:50%; text-align: center; border-right:solid 1px #99FF66">データ3</div>
          <div style="width:50%; text-align: center; border-left:solid 1px #99FF66">データ3</div>
        </div>
      </td>
      <td style="border-bottom:solid 1px #f34955;">データ3</td>
      <td style="border-bottom:solid 1px #f5b932;">データ3データ2データ2データ2</td>
    </tr>
  </table>
</body>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む