Lesson05 -CSS・まとめ
CSSのプロパティと値の種類
レイアウトをする
display:flex
要素と要素を横に並べるためのプロパティ・値です。
横並びにしたい要素自体に命令を出すのではなく、その要素の親要素に指定します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
※昔は「float」というプロパティを使ってページのレイアウトを作成する方法が一般的でしたが、後続のレイアウトに影響しないよう複雑なコードを書く必要があったため、初心者がつまづく原因となっていました。
現在は上記のようなflexboxと呼ばれる方法を使ったレイアウト作成が主流となっています。
参考：https://corecolors.net/css13/
justify-content
display:flexを指定して横並びにした要素に対して、水平方向の揃え位置を指定するプロパティです。
値には以下のものがあります
- :flex-start →コンテンツの揃え位置を起点に指定する（通常左端に配置）
- :flex-end →コンテンツの揃え位置を終点に指定する（通常右端に配置）
- :center →親要素の幅に対して中央に揃える（通常左右均等に配置）
- :space-between →親要素の幅の中で余白を含む均等配置
- :space-around →親要素の幅の中で余白を含む均等配置（起点と終点にも均等に余白がつく）
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
align-items
display:flexを指定して横並びにした要素に対して、垂直方向の揃え位置を指定するプロパティです。
値には以下のものがあります
- :flex-start →開始位置に揃える
- :center →中央に揃える
- :flex-end →終了位置に揃える
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
※注意
align-itemsの命令を指定しないと、flexで並列に並ぶ要素の高さは 「一番高いもの、または親要素の高さ」に自動的に伸縮します。
テキスト同士を並列に並べる場合問題はありませんが、テキストと画像などを並べる場合、画像の高さが伸縮して比率がおかしくなってしまうので注意しましょう。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
flex-direction
display:flexを指定して横並びにした要素に対して、どの方向に並べるかを指定することができます。
値は下記のものがあります
- :row →左から右に揃える
- :row-reverse →右から左に揃える
- :column →上から下に揃える
- :column-reverse →下から上に揃える
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
flex-wrap
display:flexを指定して横並びにした要素に対して、1行に並べて配置するか、複数行に折り返して配置するかを指定することができます。
値は下記のものがあります
- :wrap →親要素の幅をコンテンツが超えたら折り返す
- :nowrap →折り返さない
- :wrap-reverse →親要素の幅をコンテンツが超えたら折り返し、行の並び順が入れ替わる
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
display:flexをゲーム感覚で勉強できるツールがあります🐸
参考：https://flexboxfroggy.com/#ja
位置を指定する
position
要素の位置を任意の場所に指定したいときに使うプロパティです。よく使われるポイントとしては、「トップに戻るボタン」が挙げられます。
値には以下のものがあります。
- :static →初期値の状態、位置は変更されない
- :relative →相対的な配置場所を決める
- :absolute →絶対的な配置場所を決める
- :fixed →画面の指定の場所に固定する
上記で位置の基準を決めた後、どこに配置したいのか基準からの距離を指定します。
基本的に上下・左右どちらか2点から指定します。
- top:数値 →上からの距離
- bottom:数値 →下からの距離
- left:数値 →左からの距離
- right:数値 →右からの距離
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
display:block;
表示形式を指定するための命令です。
インライン要素に指定することでブロックレベル要素に変えることができます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
display:none;
要素を非表示にすることができる命令です。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
文字の装飾、編集
color
要素内のテキストの色を指定するプロパティです。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
font-size
要素内のテキストの大きさを指定するプロパティです。
数値の後ろに「px」「%」「em」などの単位をつけて指定します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
letter-spacing
要素内の文字と文字の間の余白を取ることができるプロパティです。
数値＋単位でどのくらい余白を取るかを設定します。
em（＝1文字の高さ）という単位を使用すると、その文字のサイズに合わせて相対的な比率で余白を設定することができます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
font-family
要素内のテキストの文字の種類を指定するプロパティです。
値には「フォント名」もしくは「総称名（明朝体やゴシック体など）」を入力します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
フォントはブラウザやOSの環境によって閲覧できる種類が異なるため、いくつかのフォントを指定し、最終的にどれも表示ができなければ総称名、というように記述しておくのが一般的です。
最初に記述したフォントがなければ次のフォント、それもなければまた次のフォント、という順番で表示されます。一つ一つのフォントをカンマでくぎります。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
※閲覧環境に左右されず同じフォントの表示を可能にする方法として、WEBフォントというものがあります。
参考：Google fonts
https://fonts.google.com/
white-space
文章の「改行」や「空白（スペース）」を、ブラウザ上でどのように表示するかを調整できるプロパティです。
例えば文章を途中で改行させるor横一列のまま表示させるかを設定したり、HTML内で入力した改行をそのまま反映するかどうか、スペースをそのまま表示するか、といった「文字の並び方」や「折り返し方」をコントロールできます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
背景を透過する
background:rgba(R出力値,G出力値,B出力値,アルファ出力値)
要素の背景を透過させるプロパティです。backgroundもしくはbackground-colorの値に
背景色（rgbの出力値）
＋
アルファ値（不透明度のこと、0〜1の間で表し、0に近いほど透明に近い）
を指定します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
影をつける
box-shadow
要素に影をつけることができる命令です。要素が浮き出ているような立体感を表現できます。
box-shadowには複数の値を指定することができます。
- ・横方向の距離（正の数なら右に移動、負の数なら左に移動）
- ・縦方向の距離（正の数なら下に移動、負の数なら上に移動）
- ・ぼかし具合（数値が大きいほどふわっとした表現になり、小さいほどくっきりする）
- ・広がり具合（数値が大きいほど広がり、小さいほど狭くなる）
- ・色
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
角丸表現
border-radius
要素にこの命令をすることで角丸の表現ができます。値に数値を入れて角丸の半径を指定します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
ブラウザ設定を打ち消す
list-style:none
ulの箇条書きの・や、olの1.2.3.などの表記を消すための表記です。
ulかolもしくはliどちらに命令を出しても効かせることができます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
text-decoration:none
aタグでリンクを設置したときに表示される下線を消すための表記です。
aタグに対して命令を出します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
プロパティ（応用編）
・trantionプロパティ、animationプロパティ紹介記事
変化をつける、アニメーション表現を行うためのプロパティです。
https://nnc-studio.jp/plugin/2023/04/12/css_animation/
・transformプロパティ紹介記事
移動、拡大、回転、立体表現を行うためのプロパティです。
https://nnc-studio.jp/plugin/2023/05/18/css-transform/
セレクタの指定方法（応用） 〜of type
例えばulの中にliが複数あり、何番目のli、というように限定的な指定をすることができます。
nth-of-type()
要素の順番を指定することができます。
（）の中に数値、もしくはeven（偶数）・odd（奇数）を記述して指定します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
first-of-type・last-of-type
複数ある特定の要素の中で一番最初・一番最後にある要素を指定します。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
WEBサイトの公開に向けて
レスポンシブ対応(スマホ対応)
WEBサイトはPC・タブレット・スマホなどさまざまなデバイス（端末）で閲覧されています。
デバイスごとにブラウザの幅が異なっており、それぞれの環境で適切なサイズ感でWEBサイトが閲覧できるようデザインすることを、レスポンシブデザインと呼んでいます。
一昔前まではPC用とスマホ用で別々のページを用意するという作り方をしていましたが、現在はスマホの普及が進んでいるため、
最初からモバイル端末で閲覧することを前提としてサイトを制作し、画面幅に合わせてレイアウトを最適化する「モバイルファースト」という考え方が主流です。
レスポンシブ対応は、一般的に以下の流れで行います。
- 1.HTMLを作成
- 2.CSSを作成
- 3.スマホ（タブレット）用のCSSを追加
HTML内に必要な記述
headタグ内に、以下を記述します。
スマホなどデバイスの画面サイズに合わせて、拡大・縮小せずにそのまま表示するための指定です。
（VSCodeの入力支援を使う場合はあらかじめ記載されていることが多いです）
<meta name="viewport" content="width=device-width, initial-scale=1.0">CSS内で使われる記述（最大幅 max-width）
例えばwidth: 1200px;と要素の幅を設定すると、幅の小さなタブレットやスマホでは要素がはみ出してしまいます。
そこで、max-widthプロパティを使用することで要素の最大幅を設定することができます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
CSS内で使われる記述（メディアクエリ）
例えば以下のように記述をすれば、画面幅が768px以下の時に限定して命令を出すことができます。
メディアクエリという機能を使うと、「画面の幅が〇〇px以下の時だけ、このデザインにする」という条件をつけることができます。
例えばナビゲーションメニューのレイアウトで、PC表示の時はメニューを横に並べ、スマホ表示の時にはそれを縦に並べるといった時に役立ちます。
@media screen and (max-width:768px) {
/* ここに命令を記入 */
}See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
UI/UXレビュアーとして AIに相談してみよう
スマホ用のレイアウトを組む時に、「ボタンの大きさはこれでいいかな？」「使いやすいかな？」と迷ったら、
AIにUI/UX(使いやすさ)の観点からアドバイスをもらうこともできます！
プロンプト例：
カフェのWebサイトをスマホ対応しています。スマホで見た時にユーザーが使いやすいと感じるメニューの配置やボタンのサイズについて、UI/UXデザインの観点からアドバイスを3つください。
ファビコン(favicon)の設定
ファビコンとは、ブラウザのタブやURL欄、ブックマーク等に表示される「小さなシンボルマーク」のことです。
設定されていなくてもサイトの公開は可能ですが、設定されていると一目で何のサイトかがわかりやすく、ユーザーに安心感を与えることができます。
ファビコン画像は.ico形式が主流ですが、svgやpngなどでも作成可能です。無料の変換ツールもあるので活用しましょう。
参考：ファビコン（favicon）とは？作り方や設定方法を完全マスター！
画像が用意できたら、headタグ内に以下のように記述します。
<link rel="icon" href="任意のパス/favicon.ico">OGP情報
Open Graph Protocolのことで、ウェブサイトがSNS等でシェアされた時に、タイトルや画像・概要文といった付帯情報を表示させるための仕組みです。
これを設定しておくことでシェアされた時のクリック率が上がり、サイトへの訪問者を増やす上で効果的です。
こちらもheadタグ内に以下のように記述をしていきます。
<meta property="og:title" content="ページのタイトルを記入">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.example.com">
<meta property="og:image" content="image/ogimage.jpg">
<meta property="og:description" content="ディスクリプションテキストを記入">- og:title ・・・ページタイトル
- og:type・・・ページの種類(Webサイトなら website)
- og:url・・・ページのURL
- og:image・・・シェアされた時に表示されるアイキャッチ画像のパス
- og:description・・・ページの説明文(概要文)
AIの活用：OGPの概要文を考えてもらう
OGPの「概要文」は、SNS等でシェアされた時にユーザーがクリックするかどうかを決める重要な文章です。
文字数の調整や、魅力的なキャッチコピー作りに迷った時は、AIに提案してもらいましょう！
プロンプト例：
落ち着いた雰囲気のカフェのWebサイトを公開する準備をしています。SNSでシェアされた時に表示されるOGPの概要文(og:description)を考えてください。
ターゲットは20代女性で、自家製プリンとラテアートをアピールしたいです。
スマホでも読みやすいよう、60文字前後で3パターン提案してください。
WEBサイトの公開に必要なもの
作成したWEBサイトを公開するためには、サーバー・ドメイン・FTPソフトの3つが必要です。
サーバー
Webサイトのデータ(HTMLや画像など)を置いておく場所です。専門業者から間借りする「レンタルサーバー」を利用するのが一般的です。
ドメイン
インターネット上のWebサイトの住所にあたります。（google.co.jp など）
そのWEBサイトのサービス名や企業名などを入れたオリジナルドメインにすることで、覚えやすく・わかりやすくなります。
FTPクライアントソフト
自分のPCにあるWebサイトのデータを、サーバーにアップロードするための専用ソフトのことです。
WEBサイト公開の流れ
1.サーバーとドメインを契約する
価格や容量、サポート体制などを比較してレンタルサーバーを契約し同時にドメインを取得します。
※契約後に届く「FTPサーバーのアドレス」「アカウント」「パスワード」の3つは、アップロード時に必要になるため大切に保管しておきましょう。
また、サーバー契約時にはSSLの設定も行っておきましょう。
ユーザーとの通信を暗号化することでセキュリティを守るために必要な設定で、これによってWEBサイトをhttps://〜の状態で公開することができます。
2.サーバーとドメインを紐づける（DNS設定）
取得したドメイン名(URL)にアクセスした時に、契約したサーバーのデータが正しく表示されるように、2つを紐付ける案内設定(DNS設定)を行います。
3.データをアップロードする
「FTPソフト」を使い、自分のPCにあるHTMLやCSS、画像ファイルをサーバーへ転送します。
アップロードが完了したら、実際にWEBサイトにアクセスして正しく閲覧できるかをチェックしましょう！
公開後の運用
SEO(検索エンジン最適化)
「Search Engine Optimization」の略で、Googleなどの検索結果で自分のサイトをより上位に表示させるための取り組みのことです。
検索結果の上位に表示されることで、より多くのユーザーにWEBサイトを訪問してもらえる確率が高くなります。
検索の仕組みとして、Googleの「クローラー」という巡回ロボットが、世界中のWebサイトの情報を集めてデータベースに登録しています。
このクローラーが、以下のポイントなどを総合的に判断して検索結果順位を決めています。
- ・ユーザーにとって有益で充実したコンテンツか
- ・HTMLのタグ(見出しや段落など)がルール通り正しくマークアップされているか
- ・SSLが設定された安全なサイトか
またSEO対策の結果分析に、「Googleアナリティクス」というツールが一般的によく使用されています。
自分のサイトに「何人来たか」「どのページがよく見られているか」「どこから来たか」といったデータを確認できるため、公開後のSEO対策には欠かせないツールとして名前を覚えておきましょう！
公開準備のアシスタントとしてAIを活用しよう
サイトを作った後は「どうすればたくさんの人に見てもらえるか(SEOやOGP)」を考える必要があります。
検索されやすいキーワードの選定や、SNSでシェアされた時の魅力的な紹介文(ディスクリプション)の作成は、AIの得意分野です！
プロンプト例：
20代女性向けのカフェのWebサイトを公開する準備をしています。
検索エンジンで上位に表示される(SEO対策)ために、ページタイトルと概要文(ディスクリプション)に含めるべき効果的な『検索キーワード』の候補を10個挙げてください。
また、それらを使った魅力的な概要文を60文字程度で3パターン提案してください。
CMS(コンテンツ管理システム)
「Contents Management System」の略で、HTMLやCSSの専門知識がなくても、ブログ感覚でWebサイトを管理・更新できるシステムのことです。
CMSを導入すると、専用の管理画面から「ここにタイトルを入力」「ここに本文を入力」とするだけで簡単にページを追加できるようになります。
CMSの中で、世界で最も使われているのが WordPress(ワードプレス) です。
システム自体が無料で使えることに加え、「お問い合わせフォーム」などを簡単に追加できる『プラグイン(拡張機能)』が豊富に用意されているため、人気のCMSです。
参考リンク
・もうdisplay:flexで悩まない！初心者向けCSSレイアウト徹底解説
https://nnc-studio.jp/plugin/2024/09/09/display-flex/
・【2026年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例
https://willcloud.jp/knowhow/font-family/
・Google fonts
https://fonts.google.com/
・Google Fontsの使い方
https://code-jump.com/google-fonts/
・検証ツール（デベロッパーモード）の使い方
https://prog-8.com/docs/html-dev
・初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
https://saruwakakun.com/html-css/basic/chrome-dev-tool?fbclid=IwAR1r7-OjWgOIQXB9YVX8gXXDY-ND2JlZThjvJTeP1HCZvzF6u5PW5wVnu7Y
