どうも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マスターの方がおられましたら、他の活用方法などについても情報を共有していただけると嬉しいです!

おそまつ！

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

はじめに

あるCSSフレームワークのログイン画面を参考にしていると-webkit-というプレフィックスで始まるプロパティを見かけました。
このプロパティが一体何なのか知らなかったため、調べたことをまとめてみます。

この記事の対象者

• -webkit-や-moz-といったプレフィックスについて知らない人
• これらのプレフィックスが付いているCSSプロパティについて理解を深めたい人

-webkit-や-moz-とは何者なのか

-webkit-や-moz-というプレフィックスはベンダープレフィックスと呼ばれるもので、ブラウザベンダーが試験的に草案（W3Cの勧告プロセスにおける第1段階）の機能を導入したり、独自の拡張機能を追加する際に使われるプレフィックスです。

実際には下記の4種類のベンダープレフィックスが存在し、各ブラウザ独自の機能を利用する場合はこれらのプレフィックスをつけることで利用できるようになります。

プレフィックス	ブラウザ
-webkit-	基本的にWebKitベースのブラウザーすべて（Chrome、Safariなど）
-moz-	Firefox
-o-	WebKit導入前の古いOpera
-ms-	IE、Edge

ベンダープレフィックスの使い方

ベンダープレフィックス付きのプロパティを使う場合は、ベンダープレフィックスが付いていないプロパティも併用して記述します。

style.css

.centering {
  -webkit-justify-content: center;
  justify-content: center;
}

これはそのプロパティが草案から勧告候補（W3Cの勧告プロセスにおける第1段階から第3段階）になったときには外すことが推奨されているためです。

まとめ

• -webkit-や-moz-といったプレフィックスはベンダープレフィックスと呼ばれる。
• ベンダープレフィックスは試験的に草案の機能を導入したり、独自の拡張機能を追加する場合に使われる。
• ベンダープレフィックス付きのプロパティを使う場合は、ベンダープレフィックスなしのプロパティも併用する。

今回はベンダープレフィックスについて調べてみたことをまとめてみました。

それではまた。

TomoProg

参考

この記事は以下のサイトを参考にさせていただきました。

ベンダープレフィックス－CSSの基本
Vendor Prefix (ベンダー接頭辞) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
W3C勧告とはなんぞ？Web標準化とW3Cにおける勧告プロセスについて | WEMO

初めに

フロントエンドエンジニアを目指してプログラミングを学習しています。
長田と申します。
プログラミング学習のアウトプットとして自作の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情報を確認。
無ければ新規作成します。

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

④商品一覧・検索機能

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

備忘録的に。
よくある左右2カラムレイアウトで、片方のメインコンテンツなどが可変幅でwidthが設定されていない場合、その子要素にcssで text-overflow: Ellipsis;　を指定しても、はみ出してしまって適用できない場合がある。その対処法。親要素にwidthは指定されていない、したくないときに有効である。

style.css

 .container {
            display: flex;
            height: 100vh;
            /*便宜上設定*/
            width: 1000px;
            margin: 0 auto;
        }

        .left {
            width: 100%;
            background-color: yellow;
            flex:1 1 auto;
        }

        .right {
            flex: 0 0 300px;
            background-color: blue;
            color: white;
            min-width: 0;
        }

        .header {
            background: red;
            color: white;
            display: table;
            table-layout: fixed;
            width: 100%;
        }

        .header .content {
            white-space: nowrap;
            display: table-cell;
            text-overflow: Ellipsis;
            overflow: hidden;
        }

        .header .buttons {
            background: green;
            display: table-cell;
            width: 200px;
        }

        @media screen and (max-width: 1000px){
            /*伸縮に対応可能かどうか確認のため*/
            .container {
                width: 100%;
            }
        }

index.html

<div class="container">

        <div class="left">
            コンテンツ-左　（内容幅-可変）
            <div class="header">
                <div class="buttons">ボタンなど</div>
                <div class="content">
                   省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト省略したいテキスト
                </div>
            </div>
        </div>
        <div class="right">
            コンテンツ-右　（内容幅-固定(仮で300pxにしている。％指定でもOK)）
        </div>

    </div>

ただ、これでいう「ボタンなど」にwidthが設定する必要があるのが、完璧ではないところ。できるならここも内容に応じて可変させたい。

はじめに

モバイルっぽいハンバーガー・メニューのテンプレ（HTML/CSS/JS）を作ってみた

スクリーンショット

コード

• GitHub
• Codepen

メモ

• ハンバーガーメニューを引き出す → メイン画面の幅が短くなる → テキストがあると、めっちゃ折り返す → かっこわるい → メイン画面もスライドさせた

メニューに合わせてメイン画面もスライド

function openNav() {
  document.getElementById("mySidenav").style.width = "180px";
  document.getElementById("main").style.left = "180px"; 　// ここ
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

• 初回のハンバーガーメニュークリック →　ハンバーガーメニューを引き出すときのアニメーションに 0.3s の delay があるが、その間にメイン画面がだけが先に動いてしまう（スライドのアニメーションをしない）¹ → メニューの 0.3s 遅れの間、背景の白が見えてしまう → かっこわるい → アニメーション前の初期値を入れて解決

#main {
  position: relative;
  transition: 0.3s;
  left: 0; /* ここ */
}

学び

• これくらいであれば、CSSフレームワークを使わない方が良い（Flexboxすらわかっていない初心者がリッチなフレームワークを下手に使うとかえって時間がかかる）
• 初心者がこういうのを作ろうとしたときに、そもそも名前がわからないのでサンプルコードをググることすらできない。今回のようなメニューを Drawer Menu Off Canvas Menu というらしく、これでググるとよい

お世話になったサイト

• How TO - Off-Canvas Menu → 今回のベースはこれ
• flexboxを使ってheaderメニューを作る【学習メモ】
• 【CSS】Flexboxで実装する、実践的なヘッダーのレイアウト3つ
• ヘッダーでよく見るレイアウトの作り方（Flexboxとmargin:autoを使用）
• 【考え方】flexboxを使用したヘッダーの記述について

今後

• モバイルのWebアプリつくる
• テンプレはもう少し汎用性を高める
• Overscroll.js あたり盛り込みたい

---

1. CSSのtransitionがうごかなかった失敗談 の内容でした。ありがとうございます ↩