20200729のHTMLに関する記事は6件です。

inputタグのtype属性について

inputタグのtype属性について

一つ前の記事で紹介したinputタグのtype属性を今回は書いていきたいと思う。
inputタグはtype属性を変える事で様々な役割を持たせることができるので、非常に便利なタグだ。

text

名前やメールアドレスなど一行で入力できる情報を入力してもらいたい時に使用する。

number

半角数字のみを入力してもらいたい時に使用する。

tel

電話番号を入力してもらいたい時に使用する。

email

メールアドレスを入力してもらいたい時に使用する。

url

urlを入力してもらいたい時に使用する。

password

パスワードを入力してもらいたい時に使用する。入力された文字は全て黒丸で表示される。

reset

入力した文章を全て消す時に使う。

submit

送信ボタンの役割をする。

他にも色々あるが、必要になったら調べてみるといい。

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

HTMLとCSS

プログラミングスクールを卒業し、学んだことの復習も兼ねて、HTML、CSSについて書いておこうと思います。

HTML:Hyper Text Markup Language(マークアップ言語)
CSS:Cascading Style Sheets(スタイルシート言語)

markupとは印をつけるという意味で、その印とはHTMLのタグですね。
つまり印をつけて、ここは何々だと宣言する言語なんですね。
なおタグとは"<>"のこと?

cascadeとは「階段状の滝のような」「連鎖的に伝わる」という意味らしく、つまりstyle(装飾) sheetを上から下へ文書に次々と適用させるということみたいです。

HTML、CSSはマークアップ言語と聞いていたのですが、実はCSSはマークアップ言語じゃなかった…?

ではまずHTMLから

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>HTMLの勉強</title>
    </head>
    <body>
        <h1>2020年井上計画</h1>
        <p>今のところなし</p>
        <strong>そのうち考える</strong>
        <footer>
            <p><a href="https://qiita.com/popo62520908">プライバシーポリシー</a></p>
            <p><a>1990 lnoueRyo Inc.</a></p>
        </footer>
    </body>
</html>

結果こんな感じになります。

qiita.png

officeのワードみたいな感じですね。
ちなみにCSSは以下の通りです。

<style>
    p {
        color: blue
    }
    h1 {
        background-color: red;
    }
</style>

qiita2.png

初学者的にはHTML、CSSはワードでいい気がします。
HTML、CSSがどんなものかというのがこれでなんとなくわかったと思います。

次回はもう少し詳しく入っていこうと思います。

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

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

100日チャレンジの385日目

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

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

サイトのフォーム制作必要なタグについて(HTML)

サイトのフォーム制作必要なタグについて(HTML)

お問い合わせフォームなどの制作に必要なタグ一覧

今回は、サイトのお問い合わせフォームなどに必要なタグをまとめて行こうと思う。
前の記事で書いたタグなどは今回割愛する。

formタグ

formタグはお問い合わせなどのフォームを作る時に使う。
他の記事を見てみると、別にformタグで囲わなくてもこの後記述する、inputタグやtextareaタグは使えるので用途によって使い分けるといい。
またHTML5からform属性を持たせることで、formタグの外にあってもform要素と関連付けることもできるようになっている。

inputタグ

inputタグは、様々なtype属性がありtext,submit,reset,passwordなど使う目的によってtype属性を持たせるといい。type属性の種類に関してはまた別の記事に書く。

textareaタグ

textareaタグは、お問い合わせの本文など長文が予想されるところに配置するべきタグ。plaaceholder属性を持たせることで書いて欲しい内容の案内文などを予め入れておくこともできる。

labelタグ

labelタグは、inputやtextareaなどのタグに足して見出しをつける時に使うタグである。見出しをつけたいタグにid属性を指定してlabelタグのfor属性にそのid属性の属性値を入れることで自分の指定したタグに見出しをつけることができる。

filedsetタグ

filedsetタグは、フォームの内容を個人情報とお問い合わせ内容などカテゴリーで分けて見やすくすることができるタグである。

legendタグ

legendタグは、filedsetタグによってグループ化されたフォームの入力項目にタイトルをつけるためのタグである。

selectタグ

selectタグは、製作者側で用意した項目を選んでもらう時に使うタグ。optionタグを使って項目を増やすことができる。また、optionタグの項目が増えた場合にはoptgroupタグを使って選択肢をカテゴリーで分けることもできる。

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

ReactでsetStateをしても画面表示が切り替わらない問題の解決方法メモ

はじめに

概要

Reactでフロントエンドのツールを作っている時に、stateの中に設定されているjson形式のデータを、HTMLのテーブルとして表示する機能を作りました。

その際に、表示の基となるデータを変更しても、テーブル内に表示される値は切り替わらないというエラーに出会ったため、簡単な解決方法をここにメモしておきます。

TL;DR

Reactを使うときに、イテラブルなオブジェクトを基に画面表示をする場合は、各要素ごとにidが振られていないと、同オブジェクトの値が変わっても画面表示が切り変わらないことがあるようです。

やりたかったこと

stateに登録されているjsonの配列形式のデータを、HTMLの<table>要素の中に上手く表示させることがしたかったです。
具体的には、stateには以下のようなデータが登録をされていました。

this.state.dummyData = [
  {
    "key":"aa",
    "value":"bb"
  },{
    "key":"aa",
    "value":"bb"
  },{
    "key":"aa",
    "value":"bb"
  }
]

こんな感じで、単純なオブジェクトの配列になっていました。
これを基に画面表示をする、概略化したコードは、以下のような感じです。

render(){
  // 省略
  <table>
    <tbody>
      {this.state.dummyData.map((d,i) => 
        <tr>
          <td>{d.key}</td>
          <td>{d.value}</td>
        </tr>
      )}
    </tbody>
  </table>
  // 省略
}

配列の中身の数だけ<tr>を生成して、その中の<td>に値を表示しているだけです。
しかしこれだと、this.state.dummyDataの値が変わっても、テーブルの中身は変わらない場合がありました。

解決方法

解決方法のヒントは、Reactの開発モードの時に出るコンソール内のwarningにちゃんと出ていました。

Warning: Each child in a list should have a unique "key" prop.

Reactで、リストを基に画面に要素を複数個表示する場合は、各要素にkeyを設定することが推奨されています。そのため、以下のように変更をしました。

まず、表示基のstate内のオブジェクトの各項目には、idを振るようにしました。

this.state.dummyData = [
  {
    "id":001,
    "key":"aa",
    "value":"bb"
  },{
    "id":002,
    "key":"aa",
    "value":"bb"
  },{
    "id":003,
    "key":"aa",
    "value":"bb"
  }
]

そして、画面表示をする際は、<tr>keyとしてidを設定します。

render(){
  // 省略
  <table>
    <tbody>
      {this.state.dummyData.map((d,i) => 
        <tr key={d.id}>
          <td>{d.key}</td>
          <td>{d.value}</td>
        </tr>
      )}
    </tbody>
  </table>
  // 省略
}

こうすることで、表示基のオブジェクトが変更されたときに毎回render関数が走るようになり、きちんと画面が切り替わりました。

まとめ

Reactを使うのは初めてだったので、単純なところで引っかかってしまいました。

「React 配列 展開」とかでググって出てくるサンプルコードの多くは、map関数の中でHTML要素にkeyを設定していなかったのですが、表示内容が変更される可能性がある場合には、きちんとkeyを設定しなければならないようです。

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

【初心者でもわかる】cssで使ってはいけないclass名、使わない方がいいclass名

どうも、7noteです。今回はcssで使ってはいけないclass名、使わない方がいいclass名について。

ホームページ制作でclassは多くの場面で使用しますが、使えなかったり、使うのをやめておいた方がいいclass名があります。誰かに教えてもらわないとなかなか知らないこともあるのでわかりやすくまとめてみました。

使ってはいけないclass名

1.[アルファベット文字][数字][ハイフン(-)][アンダースコア(_)]以外の文字はダメ

正確にはこのように定義されています。

文字[a-zA-Z0-9]およびISO 10646のU+0080以上の文字、さらにハイフン(-)およびアンダースコア(_)のみ使える。

なので、これらの文字以外はclass名で使用することはできません。アルファベットか数字かハイフン(-)かアンダースコア(_)以外は使わないようにしましょう。使う時はこの4種類だけで「class="abc_01"」みたいなclassをつけるようにしましょう。

2.頭文字に、『数字[0-9]、2つのハイフン[--]、ハイフンの直後の数字(-[0-9])』はダメ

例を書くとこんな感じになります。

使ってはいけないclass名.html
<!-- 使ってはいけないclass名の例 -->
<p class="1point">ワンポイントアドバイス</p> <!-- 頭文字に数字ダメ -->
<p class="--ready">準備</p> <!-- 頭文字にハイフン2個ダメ -->
<p class="-1go">出発</p> <!-- 頭文字にハイフン&数字ダメ -->

使わない方がいいclass名

ここから先はルールで決まっているわけではないが、避けた方がいいclass名の付け方について紹介していきます。

1.既存の要素名(タグ)やid名と同じclass名は避ける

単純にややこしいから。

2.見た目のままのclass名は避ける(これけっこう大事)

赤文字の箇所に対してストレートにclass="red"とつけてしまうとどうなるか。

「赤文字になっているとこ、赤やめて下線に変えて〜。」

なんてことになったら悲惨です。クラス名も一緒に変えなければならなくなってしまいます。

もちろんredとつけた方がいい場面もありますが、その赤文字の意味が強調させたいという意図であれば、英語の強調という意味のemphasisなどをつける方が綺麗なclass名と言えるでしょう。もしくはもっとわかりやすい英語でpointなどをつけるなど、とにかく見た目通りのclass名はつけないようにしましょう。
class名は意味や構造を考えてつけるようにしましょう!

3.他の人が見たときに意味が理解しにくいclass名は避ける

上の2.で「emphasis」をつけたほうが・・・とか自分で書いてますが、チームでソースを触る人全員が英単語を理解できているかと言われると怪しいことが多いと思います。基本的に英語でclass名をつけることが多いですが、あまりにも聞き慣れない単語は素直に日本語のclass名をつけてもいいかなと考えています。

4.ハイフン(-)とアンダースコア(_)は統一する

単純にややこしいから。

まとめ

class名はBEMなどの付け方などもあるので気になる方は調べてみてください!
まだ経験が浅いとclass名はめっっっっちゃ悩む事多いと思いますが、ある程度慣れてきたらマイルールなどを決めてスラスラとclass名をつけられるようにしておくとGOOD!です。

おそまつ!

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

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