20200707のHTMLに関する記事は7件です。

初心者によるプログラミング学習ログ 363日目

100日チャレンジの363日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
363日目は、

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

【javascript】 クリックイベント click  文字色変更 文字変更 innerHTML / classList / toggle

【ゴール】

その① 文字色変化

画面収録 2020-07-07 18.26.59.mov.gif

その② 文字大きさ変化

画面収録 2020-07-07 18.29.16.mov.gif

【メリット】

■ javascript 理解度向上

【必要なもの】

■ HTML記述(ページ内容表示、文や、文字の表示)
■ CSS記述(ページの装飾、色変更等)
■ javascript記述(CSSでは実現できない動き、)

【コード】

その①文字色を変更

HTML

*id を付与。

index.html
<button id="button">文字色が変わるよ</button>
<h2 id="text">文字色が変わるよ</h2>

CSS

*クリックイベント後の処理

style.css
.font-color {
      color: pink;
    }

javascript

*button id がクリックされたらスコープ内を処理
toggleメソッドはクラスが存在していれば削除、なければ付与。超絶便利メソッド

script.js
const change = document.getElementById('button');

    change.addEventListener('click', () => {
     document.getElementById('text').classList.toggle('font-color');
    });

その② 文字を変更

HTML

*その①と同じ

index.html
<button id="button">文字が変わるよ</button>
<h2 id="text">文字色が変わるよ</h2>

CSS

今回は不要

javascript

*button id がクリックされたらスコープ内を処理
innerHtmlメソッドで文字を変更

script.js
const change = document.getElementById('button');

change.addEventListener('click', () => {
  document.getElementById('text').innerHTML = '<h2>変わったね</h2>';
});

【留意点】

■アロー関数を積極的に使う。推奨の為
■javascript取得するIDを間違えないようにする
■メソッド、基本的な物を覚える。

【合わせて読みたい】

■ 【Javascript】 メソッド まとめ 基礎基本コード メモ
https://qiita.com/tanaka-yu3/items/2438798d159fa402b1d5

■ 【アロー関数】 javascript () => {}  意味 一言で、 入門 
https://qiita.com/tanaka-yu3/items/e16d51280f647aa19a58

■ドットインストールカリキュラム javascript
https://dotinstall.com/lessons/basic_javascript_v4/50603

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

jQueryでHTMLを自動生成して楽がしたい

先日こんなHTMLを見かけた

初心者あるあるなコードです。

<body>
 <form action="buy.php" method="POST">
    <fieldset>
      <legend>欲しいものはどれですか</legend>
      <div class=itembox">
        <input class=item" type="submit" value="iPhone11" name="item_name">
        <input class=item" type="submit" value="iPhoneXS" name="item_name">
        <input class=item" type="submit" value="iPhoneSE" name="item_name">
        <input class=item" type="submit" value="apple watch5" name="item_name">
        <input class=item" type="submit" value="airpods" name="item_name">
        <input class=item" type="submit" value="mac book pro" name="item_name">
      </div>
    </fieldset>
  </form>
</body>

お疲れ様ですって感じですよね...

formタグがあって、その中にたくさんの同じようなinputタグがあり、タップするとvalueの値を元にその商品を選択できる、そんなHTMLです。

この6つのinputタグってvalueの値以外は全部同じなんです。この程度の数であればギリ手を動かして書いてもいいかもですが、商品がもっとあった場合、または追加された場合対応できなくなります。

jQuery準備

というわけで、ここでjQueryの出番です。

bodyの閉じタグの上にこれを書きます。これでjQueryが使えるようになります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

そして下記を今読み込んだjQueryの上に書きます。

<form action="buy.php" method="POST">
    <fieldset>
      <legend>欲しいものはどれですか</legend>
      <div class="itembox"></div>
    </fieldset>
</form>

これで準備完了です。

jQueryで書く

それではinputタグ繰り返し部分をjQueryで生成していきます。

イメージとしては

<div class="itembox"></div>

に生成したhtmlタグを投げる感じです。

ではでは、下記を今さっき読み込んだjQueryの下に書きます。ファイルを分けた方がいいですがここでは割愛します。


<script>
    let inputTag = ""
    let array = ["iPhone11", "iPhoneXS", "iPhoneSE", "apple watch5", "airpods", "mac book pro"];

    for (i = 0; i < array.length; i++) {
      inputTag += `<div><input class="input" type="submit" value="${array[i]}" 
        name=item_name></div>`;
    }

    $(".itembox").html(inputTag);
</script>

ミソはvalueを配列に入れて、テンプレートリテラルを使い、繰り返したいhtmlとあわせてfor文で回して、最終的に全てのinputタグが入ったinputTagをitemboxクラスに所へえい!ってやってます。

全体像

<body>
  <form action="buy.php" method="POST">
    <fieldset>
      <legend>欲しいものはどれですか</legend>
      <div class="itembox"></div>
    </fieldset>
  </form>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    let inputTag = ""
    let array = ["iPhone11", "iPhoneXS", "iPhoneSE", "apple watch5", "airpods", "mac book pro"];

    for (i = 0; i < array.length; i++) {
      inputTag += `<div><input class="input" type="submit" value="${array[i]}" 
        name=item_name></div>`;
    }

    $(".itembox").html(inputTag);
  </script>
</body>

html部分だけ見ればかなりすっきりしました。要素を増やしたいときには、配列に追加したいものを追加するだけであとは自動生成してくれます。

最後に

特にプログラミングを始めたばかりだとhtmlのタグを考えたり、class名考えたりCSSやらでここまで頭が回らないと思います。

どんどん楽をしましょう。

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

Vue.js で プルダウンメニューの作り方 (基礎編)

プルダウンとは?

検索バーとしてよく使用されるプルダウンメニューバー。
Webサイトなどにおけるメニューの表示方法の一種で、クリックなどの操作によって複数のメニュー項目を表示させるタイプの表示方法のことである。

完成コード

HTML

<select v-model="selectedFruits">
  <option disabled value="">果物一覧</option>
  <option v-for="fruit in optionFruits" 
    v-bind:value="fruit.name" 
    v-bind:key="fruit.id">
  {{ Fruit.name }}
  </option>
</select>

Vue.js

export default {
  data() {
    return {
      selectedFruits: '', 
      optionFruits: [ 
          { id: 1, name: 'りんご' }, 
          { id: 2, name: 'みかん' }, 
          { id: 3, name: 'ぶどう' } 
      ], 
    }
  }
}

手順① dataを関数に

export default {
  data() {
    return {
  }
}

コンポーネントのdataオプションは関数でなければいけないため、return 以下に初期設定したいdataプロパティの内容を記述します。

手順② dataの値を設定

selectedFruits: '', 
optionFruits: [ 
  { id: 1, name: 'りんご' }, 
  { id: 2, name: 'みかん' }, 
  { id: 3, name: 'ぶどう' } 
], 

selectedFruitsプロパティにはからの文字列("")で指定します。
そしてプルダウン指定値を配列 [] で用意し、その中に複数の{}オブジェクトを用意します。

手順③ HTMLで表示する

<select v-model="selectedFruits">
  <option disabled value="">担当</option>
  <option v-for="fruit in optionFruits" 
    v-bind:value="fruit.name" 
    v-bind:key="fruit.id">
  {{ Fruit.name }}
  </option>
</select>

selectタグにデータバインディングを作成するためのv-modelを指定します。
そしてその値の中に先ほど用意した、selectedFruitsプロパティにはからの文字列("")をあてます。

<select v-model="selectedFruits"></select>

次にoptionタグはfor文で値を回し、それを一つ一つ選択できるように設定します。
その際、先ほど配列 []で用意したoptionFruitsをあてます。

  <option v-for="fruit in optionFruits" 
    v-bind:value="fruit.name" 
    v-bind:key="fruit.id">
  {{ Fruit.name }}
  </option>

key, valueは実際にフォームとして送信したいケースに合わせて値を変更してください。

実際使用するケースとしては、
バックエンド側と連携するプルダウンを作成するために、axiosを使用し、
apiを叩いてselectする値まで取得するケースが多いです。
そちらの記事はまた後ほど追加で書きます。

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

flex box 基礎

レイアウトを整えるにはfloatやmargin:0 auto;を使っていましたが、Flexboxがとても便利だったので備忘録とて投稿します。

参考>https://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

Flexboxの利点

flexboxとは、『簡単にいい感じのレイアウトにですることができるcssの仕組み』
floatやmargin:0 auto;と違った利点があります。

  ・複雑な内容を上下左右に簡単にレイアウト可能
  ・高さが消えず、clearfixが不要
  ・HTMLソースはそのままに、CSSのみで順序を入れ替え可能
  ・中央寄せ、均等分布などの画像ソフトで行なうような整列をHTML上で簡単に実現可能
  ・親や子のサイズが拡大縮小しても、その空間に応じて柔軟性高くレイアウトが可変する

などなど

Flexboxの注意点

  ・古いブラウザだと非対応
  ・IEでは最新版でも挙動がおかしい場合がある

FlexコンテナーとFlexアイテム

Flexレイアウトは大きく分けて2種類の要素に分かれており、それぞれ設定できるプロパティが異なります。

Flexコンテナー

Flexレイアウトを行うための親の箱です。下例で紹介しますがdisplay:flexと設定することでFlexコンテナーになります。

Flexアイテム

Flexコンテナー直下の要素は全て自動的にFlexアイテムとなります。
※Flexアイテム内に更にdivが含まれるなど、入れ子になっているアイテムはFlexアイテムとはなりません。

基本のflexレイアウト

html
<div class="flex"> /* flexコンテナー */
    <div>1</div> /* flexアイテム */
    <div>2</div> /* flexアイテム */
    <div>3</div> /* flexアイテム */
</div>
css
.flex {
    background-color: grey;
    display:flex;
}
.flex > div {
    background-color: white;
    margin: 10px 10px;
}

するとスクリーンショット 2020-07-07 9.09.07.png
こんな感じ

これの親要素(.flex)のCSSにdisplay:flex;を追加します

css
.flex {
    background-color: grey;
    display:flex;/* 追加 */
}
.flex > div {
    background-color: white;
    margin: 10px 10px;
}

スクリーンショット 2020-07-07 9.20.04.png
これだけで、簡単に横並びのレイアウトを作ることができました。

さらに追加します。

css
.flex {
    background-color: grey;
    display:flex;
    justify-content: center;/* 追加 */
    align-items: center;/* 追加 */

}
.flex > div {
    ~省略
}

スクリーンショット 2020-07-07 9.34.54.png

こんな感じで簡単にレイアウトを変更できます。

まとめ

便利なFlexboxのおかげでのおかげで思い通りのレイアウトが格段にやりやすくなりました。
この記事で紹介できなかったプロパティがまだまだ沢山あるので、また別記事で書きたいと思います。

ゲームでflexboxを学べるのでおすすめ
https://flexboxfroggy.com/#ja

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

TECH CAMP 1日目

体育会系からの未経験エンジニアを目指し、テックキャンプへ通うことにしました。

今までパソコンすらほとんど触ることもなかった自分が大丈夫なのか。と何度も考えましたが、最後は勢いで決めました。

何事も挑戦しないと始まらないと思いまして。(返金保証あるから、最悪なんとかなると思ってましたw)

そんなこんなで昨日からついにスタートしました。

ここでは、スクールでの流れや学んだことなどを発信していければと思います。

スクールに通うことを迷われている方などの参考になれば幸いです。

【1日目】
キックオフ…パソコンの設定や学び方を、専用サイトにて学んでいきます。(オンライン)

チームMTG…同期にてチーム作成が自動で行われ、メンターとチームでの顔合わせを行い
     今後の学び方や質疑応答

ひたすらカリキュラム…ただやるだけ。ひたすら。

こんな感じでした。

元々は教室での参加予定でしたが、コロナの影響により全てオンラインとなりました。

教室は使えるらしいですが、使える曜日が決められます。

ですが、教室を利用したとしてもメンターへの質問はオンラインのみなので、教室利用のメリットは何も有りません。

綺麗な教室と、少しいい椅子があるだけらしいです。w

僕は、短期集中転職を選択したので

平日の,10時〜22時まで学びます。

カリキュラムも本当にガッツリ入っています。

とりあえず

これから、10週間頑張りますw

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

【初心者でもわかる】cssでよく使われる単位は「px, %, vw, vh」のこの4種類だけ!

どうも、7noteです。今回は4種類の単位の話していきます。

CSSでは、次の4つの単位がよく使われます。

  • px
  • %
  • vw
  • vh

それぞれ解説していきます。

px(ピクセル)

使用例

style.css
div {
    width: 1000px;
    height: 500px;
    font-size: 16px;
}

pxの特徴は、直感的でわかりやすいところ。
パソコンの画面の大きさはpx(ピクセル)で表されます。
よくパソコンのモニターなどで、1920×1280などの表記みたことないでしょうか?これは横幅1920pxで縦幅が1280pxと言うことになります。

「width: 1000px;」なら、横幅を1000pxにしなさい。と言う意味です。

注意!

ピクセルの最小単位は「1px」です。
ブラウザでは基本的に0.5pxなどの指定はできません。
いや、指定はできるんだけど、効かないブラウザがあるので普通は指定しません。

%(パーセント)

使用例

style.css
div {
    margin: 0 5%;
    padding: 5%;
    top: 30%
}

%の特徴は親要素の横幅分を100%とした時の割合で表される。
例えば親要素の横幅が500pxだとして、中の子要素にwidth: 60%;を指定すると、横幅は300pxになります。

vw,vh(ブイダブリュー,ブイエイチ)

使用例

style.css
div {
    right: 10vw;
    width: 100vw;
}

vwとvh、はそれぞれ「viewport width」「viewport height」の略です。
pcサイトを作るときにも使われますが、どちらかと言うとスマホ用のページを作成するときによく使うことが多いです。
例えば、「width: 100vw;」を指定すれば、「画面幅と同じ横幅」になります。
ウィンドウサイズの横幅いっぱいが100vw。縦幅いっぱいが100vhになります。
「10vw;」を指定すれば、それは画面サイズの1/10サイズになります。
スマホでは画面の大きさが違うので、vwなどで計算してコーディングすることで、どのデバイスでみても綺麗な見た目になるように設計されています。

まとめ

他にもvminとか、vmaxもあるけど、覚えてなくてもそんなに困らないから最初は覚えなくて大丈夫!
大手企業のサイトとかは、この単位の使い方がとても綺麗に作られていることが多いので参考にしてみるととても勉強になりますよ!

おそまつ!

(コメント・質問・ソースの指摘等なんでもウェルカムです!初心者の方でも気軽に質問ください!)

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