トップ メニュー

ゼロから学ぶ ウェブ開発-スタータードキュメント
CSS篇


・はじめに
ベーシックレベル講座へようこそ！
ここではCSSについて基礎的な部分を学んでいく場所になります。前提条件としては、vsコードの使い方とHTMLがスタンダードレベル修了までわかっている状態から始まります。
本講座はベーシックレベルでCSSの書き方と頻繁に使うプロパティの紹介、スタンダードレベルで発展的な内容を扱っていきます。

CSSを始める上で、HTMLにCSSファイルを読み込ませる必要があります。
HTML スタンダードレベル講座 CSSについて>>でCSSファイルの読み込みについて書いてあります。
これらを踏まえた上でよろしくおねがいします。


・CSSとは？

CSS (Cascading Style Sheets) は、HTMLなどの文書タイプの言語を装飾する際に用いられる言語です。
HTMLで作ったサイトはインターネット黎明期のような簡素なサイトとなっており、非常に味気ないものです。しかしCSSを書き加えることでサイトの見た目を格段におしゃれにすることができます。




・CSSの基本構文

/* cssの書き方 */
セレクタ {
    プロパティ０: 値;
    プロパティ１: 値;
    プロパティ２: 値;
        ︙
}

CSSの書き方の特徴はHTML同様に記号で囲う形式で、波括弧{ ~ }で囲います。
セレクタ―というのは。どの要素に対してスタイルを適応させるのかを指定する部分で、HTMLタグや
HTML スタンダードレベル講座 要素と属性の利用>>で習ったid="id名"やclass="class名"のid名 やclass名 を書き入れることで、その要素に装飾を施すことができます。
また、先程HTMLタグをセレクタ―にというのを書きましたが、ここで重要になるのが
HTML スタンダードレベル講座 CSSの装飾に使えるタグ>> です。
頻繁に使うタグがありますのでしっかり復習しておくことをおすすめします。



HTMLタグをセレクタ―にする場合

/* HTMLタグ　<body>　を入れます。 */
body {
    プロパティ: 値;
}


id="id名"をセレクタ―にする場合

/* 例：id名「tamago」を入れます。 */
#tamago {
プロパティ: 値;
}


class="class名"をセレクタ―にする場合

/* 例：class名「soushoku」を入れます。 */
.soushoku {
プロパティ: 値;
}



・値について

CSSの値は、プロパティの設定に使用されるもので、要素の外観や動作を指定します。各プロパティには許容される値の範囲や形式が決められています。



・長さ、大きさの単位

絶対的な値を示す単位（固定の大きさ）

　px　ピクセル　mm　ミリメートル
pt　ポイント（1pt = 1/72インチ）　cmセンチメートル
pcパイカ（1pc = 12pt）　in　　インチ（1in = 2.54cm）　


相対的な値を示す単位｛ 親や環境に依存（例：〜pxに対して〜％大きい） ｝

　%　親要素に対する割合　vw　　表示する画面の横幅に基づく　
em現在のフォントサイズに基づくvh表示する画面の高さに基づく
rem　ルート要素のフォントサイズに基づく　


・色の値

CSSにおける色の値は、フォントや要素の背景、要素を囲う枠線の色などに適応されます。

　色の指定方法　
カラーネームred, blue, green, aqua, deepskyblueなどの色の名称を使う場合
16進数カラーピッカーなどで出てくるコード（白：#fff 黒：#000 赤：#ff0000）
RGB値rgb(255, 0, 0)などのように 光の三原色である赤、緑、青の濃さで指定する方法
RGB値の補足RGB値では透明度も表現することができる

これらがCSSにおける基礎的な部分です。
以降のスタンダードレベルではこれらの知識を踏まえて、実践的に使うプロパティを扱っていきます。
ベーシックレベル講座は以上です！お疲れ様でした。


・必修プロパティ

CSSにおけるプロパティとは、HTMLを装飾するための命令です。
ここでは頻繁に使うプロパティを紹介していきます。



・要素の高さ、幅を指定

CSSでは要素の高さ、幅を指定する際widthとheightを使います。
意味は英語で習う内容と同じ、widthは幅、heightは高さ を意味します。
幅や高さを調節したいHTML要素をセレクタ―にし、（classやid, HTMLタグ）width、heightのプロパティを書き、 任意の値を入れ大きさを調節する。 
/* 要素の高さ、幅を指定 */
セレクタ― {
    /* 幅を指定 */
    width: 値;
    /* 高さを指定 */
    height: 値;
}


・余白の指定

CSSで余白の指定を指定する際marginとpaddingを使います。

margin と padding の違い

　余白の指定方法　
margin　要素の外側の余白。（要素同士がくっつかないように空白をつけるもの）　
padding要素の内側の余白。（要素の中にあるテキストや画像につける空白）

わかりやすくするとこんな感じ

borderは、要素の外側と内側の境界線という意味です。

marginは border の外側（要素の外側）の余白

paddingは contents（テキストや画像、動画）などの周りに付く余白 
/* 余白の指定 */
セレクタ― {
    /* 要素外の余白を指定 */
    margin: 値;
    /* 要素内の余白を指定 */
    padding: 値;
}

marginやpadding上記の例文のような記述だけでは、要素の全ての辺にその値分の余白が適応されてしまいます。
そうすると、例えば「右側だけテキストに余白を付けたい」や「上側が他の要素と重なるから上だけ余白を作りたい！」というときに不便です。
そんなときはこのように記述します。

/* 余白の指定 */
セレクタ― {
    /* 要素外の余白を指定 */
    margin-top: 値; /* 要素外 上側の余白を指定 */
    margin-right: 値; /* 要素外 右側の余白を指定 */
    margin-left: 値; /* 要素外 左側の余白を指定 */
    margin-bottom: 値; /* 要素外 下側の余白を指定 */

    /* 要素内の余白を指定 */
    padding-top: 値; /* 要素内 上側の余白を指定 */
    padding-right: 値; /* 要素内 右側の余白を指定 */
    padding-left: 値; /* 要素内 左側の余白を指定 */
    padding-bottom: 値; /* 要素内 下側の余白を指定 */
}

こうやって記述すれば特定の箇所だけに余白を指定することができます。
しかし、これだと少しコード量が多いですね…
一応もう少し短く１行で記述する方保もご紹介に上がります。
ただ、機能的な面ではどちらを使っていただいても構いません。わかりやすい、覚えやすい方で慣れていきましょう。

/* 余白の指定 */
セレクタ― {
    /* 要素外の余白を指定 */
    margin: 上側の余白の値 右側の余白の値 下側の余白の値 左側の余白の値;
    /* 例 */
    margin: 20px 50px 20px 10px;

    /* 要素内の余白を指定 */
    padding: 上側 右側 下側 左側;
    /* 例 */
    padding: 20px 50px 20px 10px;
}


・要素の境界線の指定

ベーシックレベル 余白の指定>>で先程、borderは、要素の外側と内側の境界線という意味です。




枠線を囲う要素



/* 境界線の指定 */
セレクタ― {
    border: 種類 色 境界線の太さの値;

    /* 例 */
    border: sold white 3px;
}



borderの種類として、今回はsoldを書き入れました。sold はシンプルに単色で塗るものです。
他にも上記の画像通りに７種類ありますが、一般的にはsolid を頻繁に使うと思うのでこのsolid だけは覚えておきましょう。

border はmargin やpaddingと同様に上側、下側、右側、左側、と装飾を分けることができます。 

セレクタ― {
    border-top: 種類 色 境界線の太さの値; /* 上側の境界線を指定 */
    border-right: 種類 色 境界線の太さの値; /* 右側の境界線を指定 */
    border-left: 種類 色 境界線の太さの値; /* 左側の境界線を指定 */
    border-bottom: 種類 色 境界線の太さの値; /* 下側の境界線を指定 */
}

境界線の角に丸みをもたせる

境界線の角に丸みをもたせるときはborder-radiusというプロパティを使います。

セレクタ― {
    border-radius: 値（px）; /* radiusは”半径”という意味がある */
}



枠線に丸みをもたせる



・フォントの色を指定

CSSで文字に色をつけるときはcolorプロパティに色を指定することで、要素内のテキストの色を変更できます。

セレクタ― {
    color: 値; /* 値はカラーネーム or RGB値 or 16進数のどれかで書く */
}


・フォントの種類を指定

CSSでフォントを指定するとは、HTML文書内の文字の表示形式を、フォントの種類、サイズ、太さ、スタイルなど、細かく設定することです。
CSSのfont-familyプロパティを使うことで、文字のフォントの種類を指定できます。 

セレクタ― {
    font-family: フォント名;
}

例えば、「Times New Roman」や「Helvetica」といった具体的なフォント名、または「serif」や「sans-serif」、「Arial」といったフォントの種類を指定します。
しかし、これらのフォントはブラウザやOSによって異なるため、ただし指定するだけでは何の変化も得られない場合があります。
例えば、OS がWindows でEdge でサイトを閲覧する場合、明朝体の１種であるMS明朝という指定で、サイト内のフォントを明朝体に変更できます。しかし、これはWindows に限定されるものであり、Android やiOS, Linuxでは明朝体では表示されません。
また、ブラウザによって機能が異なることから、Safari やFirefox などの異端なブラウザとなるとそれらで動作しても他のブラウザでは動作しないと言った不具合が出てきます。


共通して正常に表示させるには

共通して正常にフォントを表示させるには Google Fonts >>というサービスを使います。
ここでは無料でフォントを配信しており、出力されたプログラムのコードをHTML内に書き込み、CSSのfont-familyにGoogle Fonts から引用したフォント名を書き込めば全てのブラウザ、全てのOSにおいて正常に表示されるようになります。
Google Fontsは対応している言語が多く、それらの言語において何十種類、何百種類とフォントが存在しているため、自分の作りたいサイトのテーマに合わせて選ぶことができます。



今回は試しに Agu Display というフォントを導入してみました



This site was created by Programming Club.



・Google Fontsの導入

Google Fontsでフォントを導入するには、まずほしいフォントを探し、そのフォントのページに飛びます。

フォントページを開いたら、 Get fontのボタンを押します。



すると、<> Get embed code というボタンが表示されるので、そこをクリック
クリックするとHTMLとCSSのコードが出力されます。



導入したいフォントのHTMLのコードをコピーし、フォントを導入したいHTMLの<head>の中にコピーしたHTMLをペースト。これでフォントデータが読み込まれます。

Google FontsにはHTMLと一緒にCSSも出力されると先ほど書きました。
そのCSSは例文みたいなものなのでコピペして使うことは多分無いと思います。

フォントを適応させたいセレクタ―に先ほど紹介したfont-familyにGoogle Fontsから読み込んだフォント名を貼り付けるだけで適応されます。



・フォントサイズを指定

フォントサイズを指定はCSSのfont-sizeプロパティを使うことで、フォントの種類を指定できます。 
セレクタ― {
    font-size: 値（主に％で指定）;
}
元のサイズを100％として、それを基準にフォントサイズを指定していきます。



・フォントの太さを指定

フォントの太さの指定はCSSのfont-weightプロパティを使うことで、文字の太さを指定できます。

セレクタ― {
    font-weight: 値（整数で指定）;
}


・文字の行間を設定

行間とは、文字と文字の間、または行と行の間のスペースのことです。



行間とは文字と行の高さを指し、文章の読みやすさに影響します。
長文の羅列は行間を少し広めに指定しておくと読みやすくなります。
行間の指定はCSSのline-heightプロパティを使います。



セレクタ― {
    line-height: 値（整数、少数 or %で指定）;
}
 /* 例 */
セレクタ― {
    line-height: 1.5; /* デフォルトの行間サイズ */
    line-height: 2; /* ちょいデカめ */
    line-height: 180%; /* デフォルトの行間サイズ */
    line-height: 230%; /* ちょいデカめ */
}


・行揃えの指定

行揃えとは、、、、察してください。
使用するプロパティはtext-alignです

セレクタ― {
    text-align: left; /* 左揃え */
    text-align: right; /* 右揃え */
    text-align: center; /* 中央揃え */
}


・空白や改行をそのまま表示する

これはWEBサイトにソースコードを表示させる際やアスキーアートを表示する際に役に立つ方法です。
また、JavaScriptで、HTML内のテキストを書き換える際、JavaScriptだけではテキストを改行できないのですが、ここで紹介するプロパティを書き入れることでJavaScriptのテキストを書き換える際、任意の場所で改行を適応させることができます。
使用するプロパティはwhite-spaceです。
値をpreとすることで空白や改行をそのまま表示することができます。

セレクタ― {
            white-space: pre; /* 空白や改行をそのまま表示する */
}

実はこの空白や改行をそのまま表示する方法はCSSを使わなくてもHTMLだけで完結することができます。
それはHTMLの<pre> 〜 </pre>です。
タグからもわかるようにCSSと同じような書き方です。
使い方は、空白や改行をそのまま表示したい場所をこの<pre> 〜 </pre>で囲うだけです。
HTML篇では紹介しませんでしたが、どちらも同じ意味、同じ実行結果になるので、わかりやす方で覚えていただけると幸いです。
ただし、先程話した「JavaScriptのテキスト書き換えで、任意の場所で改行できるようになる。」はCSSの上記のようなコードを書かない限りできません。
JavaScript スタンダードレベル 12. 空白や改行をそのまま表示する>>



・要素の背景を装飾する

CSSでHTML要素の背景を指定するプロパティは２種類あります。
色を指定する場合 と画像を指定する場合 です。

セレクタ― {
    background-color: 色; /* 色を背景にする場合 */
    background-image: url(URL　or　ディレクトリパス); /* 画像を背景にする場合 */
}

ここで注意！

background-imageではただ、これを指定するだけでは画像が画面サイズより小さすぎるとループしますし、大きすぎては画面の表示領域からはみ出てしまいます。
そこで使うのがbackground-sizeです。
これの値をcoverとしてやると、画面いっぱいに画像が表示されます。

セレクタ― {
    background-image: url(URL　or　ディレクトリパス); /* 画像を背景にする場合 */
    background-size: cover; /* cover */
}




・背景画像を固定する

背景画像を固定するときはbackground-attachment: fixed;を使います

セレクタ― {
    background-image: url(URL　or　ディレクトリパス); /* 画像を背景にする場合 */
    background-attachment: fixed; /* fixedの意味は固定 */
}


・要素を横並びにする

要素を横並びにするときは、HTMLに親要素と子要素が必要になります。
以下の要素を横並びにしたいと思います。まずclass="kids0" class="kids1" class="kids2"は子要素。 そしてそれらを囲うclass="oya"のdivタグが親要素です。

<!-- HTMLの例 -->
<div class="oya">  <!-- このdivタグは親要素 -->
    <div class="kids0">  <!-- このdivタグは子要素 -->
        やべぇ粉末<br>
        <a href="https://****.onion/"> dark site link </a>
    </div>
    <div class="kids1">  <!-- このdivタグは子要素 -->
        やべぇリキッド<br>
        <a href="https://****.onion/"> dark site link </a>
    </div>
    <div class="kids2">  <!-- このdivタグは子要素 -->
        やべぇ？？？<br>
        <a href="https://****.onion/"> dark site link </a>
    </div>
</div>
今回はプレビューの際、視認しやすくするために borderと padding、marginのCSSを当てます。 
.oya {
    border: solid 1px #ff0000;
    padding: 10px;
}
.kids0 {
    border: solid 1px #ff0000;
    padding: 10px;
    margin: 5px;
}
.kids1 {
    border: solid 1px #ff0000;
    padding: 10px;
    margin: 5px;
}
.kids2 {
    border: solid 1px #ff0000;
    padding: 10px;
    margin: 5px;
}
以上の２つを組み合わせると以下のようなプレビューになります。

横並びにできるのはこの子要素です。今は特に何も書き加えてないので、縦並びです。
そこで、flexという値を入れます。
flexを使用すると、複数の要素（フレックスアイテム）を、親要素（フレックスコンテナ）の中で自由に配置し、伸縮させることができるというものです。これを親要素に入れて、子要素のレイアウトを横並びにします。

使う際はdisplayというプロパティの中に入れます。displayプロパティではHTMLの配置や表示方法など、ページのレイアウトを決める重要なプロパティです。

.oya {
    display: flex; /* flex */
    border: solid 1px #ff0000;
    padding: 10px;
}
.kids0 {
    border: solid 1px #ff0000;
    padding: 10px;
    margin: 5px;
}
.kids1 {
    border: solid 1px #ff0000;
    padding: 10px;
    margin: 5px;
}
.kids2 {
    border: solid 1px #ff0000;
    padding: 10px;
    margin: 5px;
}
先程書き込んだ内容を保存して実行するとちゃんと横並びになりました。



・左右への配置と要素の回り込み

ここではコンテンツを右、もしくは左に配置して、その他の要素（テキストなど）が、そのコンテンツを回り込むようにレイアウトするプロパティfloatをご紹介に上がります。
例えば、以下のようなコードを書いたとします。

<!-- HTMLの例 -->
<img src="URL or ディレクトリパス" width="50%" class="logo">  <!-- 画像読み込み -->
text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text, text,
そうして実行してみるとプレビューが以下のようになります。
この時、画像の隣にはテキストが回り込んでいません。
回り込みというのはページの長さを削減するとともに、読みやすく、理解しやすくする効果があります。 そこでCSSにこのようなプログラムを書きます。 
.loog {
    float: left;   /* 要素を左に配置してテキストを右側に回り込ませる */
     /* 逆の場合はrightとする */
}
こうすることでテキストに回り込みを効かせることができます。
以下プレビュー


大同大学大同高等学校プログラミング部は、HTML、CSS、JavaScript、Ruby、Pythonなどのプログラミング言語を学び、実践することを目的とした部活動です。初心者から上級者まで、すべてのレベルの学生が参加できる環境を提供しています。部員たちは、ウェブサイトの作成やアプリケーションの開発、アルゴリズムの設計など、さまざまなプロジェクトに取り組んでいます。また、外部のコンテストやイベントにも積極的に参加し、実践的な経験を積む機会を提供しています。プログラミング部は、技術の習得だけでなく、仲間との交流や協力を通じて、成長できる場です。プログラミングに興味がある方は、ぜひ一度見学に来てください。そしてパソコンやシステム、プログラミングに興味がある中学生は是非！ここまでプログラム系を扱う高校はかなりレアです。私たちと一緒に、新しい技術を学び、未来を創造しましょう！


・要素を固定する

セレクタ― {
    position: fixed;   /* fixed */

     /* 以下は固定する位置を指定するプロパティ */
    top: 距離（値）;   /* 上からの距離 */
    bottom: 距離（値）;   /* 下からの距離 */
    left: 距離（値）;   /* 左からの距離 */
    right: 距離（値）;   /* 右からの距離 */
}
要素を固定する際は、positionのプロパティにfixedを付けます。
このfixedは スタンダードレベル 14章 背景画像を固定する>> にも出てきましたね。
ここではHTMLの要素を固定します。要素を固定することで、スクロールしてもその要素は常に画面に表示され続けます。メニューバーなどの絶対に常に画面に表示しておきたいものに使うことが多いです。

このfixedは、このサイトの最下部に常時表示されている「トップ」と書かれたボタンの固定に使用されています。



・要素を重ねる順番を指定

z-indexを使えば要素を重ねる際に重ねる順番を指定することができます。例えば


先ほど紹介したfixedなどのように要素を固定すると、例えばページをスクロールした際、一部の要素がその固定した要素に重なる場合があります。ここで重なる順番を指定していないと、fixedさせた要素の上に別の要素が重なってしまい、プログラムの誤動作を引き起こしかねません。
なので、このz-indexは是非覚えてもらいたいと思います。

セレクタ― {
    z-index: 値（整数）;   /* 値が大きければ大きいほど、最前に配置される。 */
}
これにてCSSで頻繁に使うプロパティの紹介は以上になります。お疲れ様でした！


プロパティ まとめ
0. color: テキストの色を設定します。
1. background-color: 要素の背景色を設定します。
2. font-size: テキストのサイズを設定します。
3. margin: 要素の外側の余白を設定します。
4. padding: 要素の内側の余白を設定します。
5. border: 要素の枠線を設定します。
6. width: 要素の幅を設定します。
7. height: 要素の高さを設定します。
8. display: 要素の表示方法を設定します（例：block、inline、flexなど）。
9. position: 要素の位置を設定します（例：relative、absolute、fixedなど）。
10. top, right, bottom, left: 要素の位置を具体的に設定します。
11. background-image: 要素の背景画像を設定します。
12. background-size: 背景画像のサイズを設定します。
13. border-radius: 要素の角を丸めるための半径を設定します。
14. opacity: 要素の透明度を設定します。
15. overflow: 要素の内容が溢れた場合の表示方法を設定します（例：hidden、scrollなど）。
16. text-align: テキストの配置を設定します（例：left、center、rightなど）。
17. z-index: 要素の重なり順序を設定します。
18. cursor: マウスポインタの形状を設定します。
19. transform: 要素の変形を設定します（例：rotate、scaleなど）。



・ユーザーエクスペリエンス

まずはじめに、ユーザーエクスペリエンスについて。
ユーザーエクスペリエンス（UX）とは、ユーザーが製品やサービスを利用する際に得る全体的な体験や満足度のことです。
これはWEBページを作成する上で最も重要になってくるポイントです。
例えばWEBサイトでURLが埋め込まれたテキストがある時、ただ色がついているだけでは、場合によって判断しにくくなってしまう。
そこで、マウスカーソルの形を変形、もしくはそのリンクテキストに下線を引く、色を変更するなどの視覚的な効果を与えることで認識をしやすくすることができます。
現にこのサイトもそうです。リンクテキストにマウスカーソルが当たると下線が引かれます。この様にユーザーのニーズや期待を理解し、それに応えるために多岐にわたる要素を統合して設計していくことをこの章では学んでいきましょう。
今回は、大まかな例として、マウスカーソルが指定の要素に重なった時、装飾を変更して、視覚的な効果を与える方法をお教えします。

今回使うのは:hoverです。
この:hoverはこれまでのCSSの書き方とちょっと違い、CSSのセレクタ―の横に付けてあげるものです。

 /* 今回はマウスカーソルが重なった際、要素の背景色を変更する */
セレクタ― {
    background-color: 値（色）;   /* マウスカーソルが重なる前の装飾 */
}

セレクタ―:hover {
    background-color: 値（別の色）;   /* マウスカーソルが重なった時の装飾 */
}
この:hoverはこのサイトの「トップ」と書かれたボタンにも使われており、 hoverした際、背景と文字の色が反転するようにしています。


・レスポンス

ここではレスポンスについて学んでいきます。
時代は流れ2010年頃からスマートフォンやタブレットなどの端末が増え、これまでのPCで表示するWEBページとは打って変わりそれらの画面領域に合ったデザインが必要になってきます。

PCとモバイルでは画面のサイズが異なり、PCでは基本横長で画面サイズも大きいですが、スマートフォンでは縦型でかつ画面も小さいため、PCと同じデザインだと、ボタンやテキストが小さすぎたり、画像のサイズがずれたりと ユーザーにとって使いづらいサイトとなってしまいます。
そこで、今回はPCとモバイル用のレイアウトをデザインしていきます。CSSのプログラムが自動的に画面のサイズを判定し、PC用のデザインとモバイル用のデザインに切り替えるコードです。

/* 以下の｛｝以外はPC表示のCSS */
@media screen and (max-width: 数値（px）) {
    /* 画面の横幅が max-widthに書き込んだ数値以下になったらここに書き込まれたCSSに切り替える */
}

max-width: 数値（px）の数値に書き込む値はデバイスによって異なり、例えば Samsung Galaxy S20では縦型の状態で、横幅が 360px であるのに対し、 Galaxy S20 Ultraでは横幅が 412px、このように若干ではあるものの、場合によっては大きな変化を生むきっかけになります。
また、表示方法は機種だけでなくOSやブラウザによって異なるため、事前に対策し、崩れないサイトを作る必要があります。





・レスポンシブデザインを学ぶ

今回はニュースサイトやブログサイトなど汎用性の高いデザインを元に説明していきます。
先程も言いましたが、スマートフォンはPCのディスプレイと異なり、画面の表示領域が狭く、複雑な操作もできません。
より操作性が良く、ユーザーにとって扱いやすいWEBページ作成のをするには以下の画像を参考にしてみてください。

PC版サイトとモバイル版サイトのデザインを比較しながら見てみましょう。
まずPC版のサイトの場合。
PC版のサイトは画面が広いため、メインコンテンツではメディアにテキストが回り込むようにデザインします。理由としては画面が広いため、大きな余白ができてしまうと無駄にページが長くなりユーザーにとって見にくくなってしまいます。PC版サイトの特徴は横には広いものの、縦には狭い です。
なのでできるだけ横に余白を作らないようにしてあげる必要があります。また、サイドにはメニューバーのようなものを設置してあげるのも大切です。
PC版サイトは縦の領域が狭いので、その分 横の余白を作らないように要素を詰めていくとより見やすいデザインのサイトを作ることができます。

それではモバイル版です。モバイル版サイトの特徴としては 横に狭く縦に長い です。
みなさんがスマートフォンを操作する際、上下にスワイプしますよね。つまり、モバイル版サイトを作る上ではコンテンツ内にあるメディアにテキストなどのほか要素を回り込ませないようにしてあげます。
ここでのポイントはどんなに文章をメインにしたくてもメディアをスマホの画面の横幅にピッタリ合わさるように配置することです。
回り込ませるテキストはそのメディアの下に表示されるようにしましょう。
また、メニューバーなどは 表示、非表示の切り替えが可能なサイドメニューバーで収納しましょう。
特にPCと違って画面領域が狭いため、サブ機能的なものはとにかくユーザーからのアクションがあった際にのみ実行するようプログラムを描くとより見栄えが良くなります。




CSSの過程が終了いたしました！ここまでで学んだことを活かし、デザイン性高くユーザーエクスペリエンス向上につながるような柔軟なWEBサイトを開発していきましょう。