どうも7noteです。cssを書く場所（書き方）は3つある話。

cssを書く時はCSSを書ける場所が3つあります。

• 1. HTMLのタグの中（インラインともいう）
• 2. style要素の中
• 3. 外部ファイル

1つずつ書き方や特徴を書いていきたいと思います。
またそれぞれの優先順位についても確認していきたいと思います。

1. 要素のタグの中（インラインともいう）

インラインの書き方

タグの中にstyle=" "と記述し、その中にcssを書いていく方法

index.htnl

<p style="font-size: 20px;">こんにちは！</p>

特徴

3つの中では一番優先順位の高い書き方で、外部ファイルでcssを読み込んでいたとしてもインラインで書いたスタイルが優先して適応されます。（!importantは除く）

優先順位が高い事と、各所バラバラに記述が必要なため、変更を入れにくく開発・管理がしにくいです。
HTML要素のタグ内に長いcssを書くわけにはいかないので、
使いどころとしては一時的には確認用・javascriptで動的に書かれる場合などが多いかなと思います。

一般的には他の2つに比べてこの書き方が使われることは少ないです。

2. style要素の中

style要素での書き方

<style></style>のタグを用意し、この中にcssを書いていく方法

index.htnl

<style>
  p {
    font-size: 30px;
  }
</style>

<p>こんにちは！</p>

特徴

htmlファイル内ですが、style要素を書くことでその中にcssが書けます。

そのhtmlファイルにある要素にだけcssが効くので、このhtmlファイルにだけ効くcssと思っていただくといいかなと思います。

初めて使うプロパティなどの動作チェックをするために簡易的にhtmlファイルを作って、
その中でstyle要素を使うことがありますが、あまり汎用はしてないです。

3. 外部ファイル

外部ファイルでの書き方

cssファイルを作成し、それをhtmlファイルから読み込む方法

index.htnl

<link rel="stylesheet" href="style.css">
<p>こんにちは！</p>

style.css

p {
  font-size: 40px;
}

特徴

現在一番主流な書き方。メンテナンス性が高い

ほとんどのWEBサイトが、cssを外部ファイルから読み込んで作成されていると思います。

理由としては、「メンテナンス制が高い・複数のhtmlファイルで共通してCSSを使うことができる」などが人気の理由だと思われます。

新しくhtmlを使って何か物を作ろうと思っている場合は、htmlファイルとcssファイルはそれぞれ別々で管理することをおすすめします。

優先順位について

cssを書く場所について3つ紹介しましたが、もし同時に3つの書き方を行なった場合どれが優先されるのかについて。

こちら↓

最優先： HTMLのタグの中
優先　： style要素の中、外部ファイル

もし同じp要素に対してそれぞれで別々の値を指定した場合、最も優先されるのは「HTMLのタグの中に書かれたcss」です。

そして、「style要素の中と外部ファイル」に関しては優先順位は同率で、後に読み込まれた方が優先されます。

たとえば以下の例では、p要素の文字サイズは40pxになります。

index.htnl

<style>
p {
  font-size: 30px;
}
</style>
<link rel="stylesheet" href="style.css">
<p>こんにちは！</p>

style.css

p {
  font-size: 40px;
}

htmlファイルを上から順番に読み込んだ時に、後にくるstyle.cssのcssが適応されることになります。

まとめ

結論としては、正直、外部ファイルにしかcssを書くことはほどんどありません。
でもいざ「ちょっと上書きして書きたいな」や「あれ、javascriptを入れた影響かcssが効かなくなったぞ」など、いざという時に知っていなければならない知識だと思います。

もし記事を読んでいるcssマスターの方がおられましたら、他の活用方法などについても情報を共有していただけると嬉しいです!

おそまつ！

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

はじめに

独学でプログラミングを学習中の大学3年生です。
今回が初投稿になります。

フォームの値を配列で受け取るときに入力欄を動的に追加したいことがあったので、
調べてまとめてみました。
初学者にも分かりやすいように、できるだけ簡潔なコードになるよう心がけています。

CodePen

以下のページで動作を確認できます。
コードも見やすいかもしれません。
https://codepen.io/yuji-207/pen/OJNMYgv

コード

form.html

<form action="" method="">
  <input type="text" name="text[]" class="text"></input>
  <button type="button" class="btn-clone">clone</button>
  <button type="button" class="btn-remove">remove</button>
</form>

バックエンドで配列textとしてデータを受け取れます。

stylesheet.css

input, button {
  display: block;
}

.btn-remove {
  display: none;
}

入力欄の削除ボタンはデフォルトで非表示にしておきます。

script.js

$(function() {

  // button
  var btn_clone = $('.btn-clone');  // 追加ボタン
  var btn_remove = $('.btn-remove');  // 削除ボタン

  // clone
  btn_clone.click(function() {

    var text = $('.text').last();  // 最後尾にあるinput

    text
      .clone()  // クローン
      .val('')  // valueもクローンされるので削除する
      .insertAfter(text);  // inputを最後尾に追加

    if ($('.text').length >= 2) {
      $(btn_remove).show();  // inputが2つ以上あるときに削除ボタンを表示
    }

  });

  // remove
    btn_remove.click(function() {

    $('.text')
      .last()
      .remove();

    if ($('.text').length < 2) {
      btn_remove.hide();  // inputが2つ未満のときに削除ボタンを非表示
    }

  });
});

入力欄が2つ以上あるときだけ、削除ボタンを表示させます。

ハマったこと

初歩の初歩で少しだけハマりました。
ここでハマる人はあまりいないと思いますが、一応…

script.js

var len = $('.text').length

このような入力欄の数を数える変数を1行目とかで宣言してしまうと、
（当たり前ですが）入力欄を増やしたとしても、lenは増えません。

参考

参考にさせていただきました。ありがとうございます。
https://qiita.com/SiskAra/items/5f4bc7ee4e598b863add

初めに

フロントエンドエンジニアを目指してプログラミングを学習しています。
長田と申します。
プログラミング学習のアウトプットとして自作のWebサービス「FOOTBALL SHIRTS」のポートフォリオを制作しました。
この記事では「FOOTBALL SHIRTS」の概要や制作過程について説明します。
ソースコード↓
https://github.com/satoruosada/uniform

目的

・フルスクラッチ開発を行うことでWebアプリの基本的な構成、動作を知る.
・自作のWebアプリで同じ初学者の方の役に立つサービスを提供したい.

スペック

使用言語 / HTML５/ CSS3 / Javascript / PHP

DBMS / MySQL

開発環境 / MacOS Catalina 10.15.6

バージョン管理 / SourceTree(3.0.15)

主な機能

ユーザー管理機能
　・ユーザー登録機能
　・ユーザーログイン機能
　・ユーザー編集機能
　・ユーザー削除機能

出品する商品登録管理機能
　・商品登録
　・商品編集
　・商品詳細
　・商品一覧（ページネーション）
　・商品検索機能
　

商品詳細機能
　・商品詳細表示
　・商品へのリンク
　・お気に入り機能
　・掲示板機能（メッセージ投稿）

概要

「FOOTBALL SHIRTS」は、サッカーのユニフォームを出品するWebサービスです。

サッカーのユニフォームマニアが様々な世界中のサッカーのユニフォームを集めたり、転売できる専門のwebサービスを制作してみました。

開発手順

実装させたい主な機能から必要な項目を洗い出し、サンプルとしてExcelに必要なDB情報を書き出していきました。
洗い出した情報を元にテーブルを作成します。

AdobeXDデザインカンプ作成

コーディング

デザインカンプを元に画面モックを作成
その後裏側の機能を実装していきます

セキュリティ対策

バリデーションチェック
サーバーサイド(PHP)側
　☑︎未入力チェック
　☑︎最大、最小文字数チェック
　☑︎半角英数字チェック
　☑︎正規表現を使用したemail型式チェック
　☑︎正規表現を使用したURL型式チェック
　☑︎同値チェック
　それぞれ関数を作成し各フォームで判定を行なっています。
以下一部抜粋です

フロントエンド(HTML)側

なりすまし対策について

セッションハイジャックによるなりすまし対策としてsession_regenerate_id関数を使用しています。

session_regenerate_id関数は、現在のセッションのデータを保持したまま、セッションIDを新しく生成してくれます。

パスワードのハッシュ化について

パスワードをDBで登録する際は開発環境から見えてしまうのでセキュリティ上よくありません。
「FOOTBALL SHIRTS」ではpassword_hash関数でパスワードをハッシュ化してDB登録しています。

ログイン時には、
password_verifiを使用し、ハッシュ化されたパスワードを確認しています。

このとき$passはフォームからpostされたパスワード
DBから配列形式で取り出した情報を$resultに詰め
array_shiftを使って先頭から要素を一つ取り出し第二引数としています。

SQLインジェクション対策

DB接続時は、プレースホルダーを利用しSQL文を作成。
プリペアードステートメントを使うことでSQLインジェクション対策を行なっています。

XSS（クロスサイトスクリプティング）対策

画面へ文字列や数値を出力する際は、htmlspecialchars関数を使いエスケープ処理を行なっています。

エスケープ処理とは特殊な文字を無害な文字に強制的に置き換える方法です

第二引数のエスケープにはいくつか種類がありますが最もエスケープ文字数の多いENT_QUOTESを使用しています。

「FOOTBALL SHIRTS」で出来ること

①「FOOTBALL SHIRTS」へのユーザー登録、ログイン、ログアウト

②ログイン後「FOOTBALL SHIRTS」の商品登録（出品）・編集・マイページ機能

「FOOTBALL SHIRTS」の商品登録ページでは、「FOOTBALL SHIRTS」の商品名、カテゴリー、詳細コメント、商品の画像の登録が可能です。

画像登録にはjQueryを利用しドラック&ドロップでInputされるよう設定しています。

登録完了後はマイページに遷移し、きちんと登録できたことが確認できるようメッセージが表示されます。

マイページでは自身が登録した「FOOTBALL SHIRTS」の商品の閲覧、編集、自身のプロフィール編集、パスワード変更、退会、お気に入り登録した「FOOTBALL SHIRTS」の閲覧が可能です。

③「FOOTBALL SHIRTS」詳細画面に、Ajax処理によるお気に入り登録機能、掲示板機能を実装

お気に入り機能について
「FOOTBALL SHIRTS」の商品詳細画面では、商品画像右上のハートアイコンを押すことで
マイページのお気に入り一覧に商品を登録できます。
こちらはAjaxを用いて実装しています。

掲示板機能について

「FOOTBALL SHIRTS」のやり取りについて気軽に質問できるように
掲示板機能を各詳細ページに実装しています。

まず掲示板自体が存在するかDB情報を確認。
無ければ新規作成します。

もし既に掲示板情報があればメッセージのみ追加できるよう条件分岐させています。

④商品一覧・検索機能

　商品一覧ページにはページネーション、カテゴリ選択による表示順選択機能を実装しました。