2021-02-02

タイル型に並べよう

CSSグリッドを使って同じ大きさのボックスを等しい間隔で並べるタイル型レイアウトを実現できる。 (P158)

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座では、3列2行に並べる。

親要素であるグリッドコンテナーの中に、子要素にあたるグリッドアイテムを配置する。

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
    </div>

@charset "utf-8";

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    /* grid-template-columns: repeat(3, 200px); */
    /* grid-template-columns: repeat(3, 1fr); */
    gap: 10px;
    /* grid-template-rows: 20vh 50vh; */
}
.item {
    background-color: aqua;
    padding: 10px;
}

単位 fr

親要素から見た子要素の大きさを fr 単位で指定できる。 (P160)

fr = fraction(比率)。

grid-template-rows プロパティで行の高さを指定できる。

リセットCSS

ブラウザー毎のデフォルトCSSをリセットし表示を統一する。 (P167)

HTMLファイルの head 部で他のCSSよりも前(一番最初)に読み込ませる。

    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="style.css">

2021-01-31

レイアウトを組む

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座でWebデザインを勉強中。

レイアウトとはコンテンツをどこに、どう配置するか設計すること。 (P152)

Flexbox

複雑なレイアウトも簡単に組める。Flexコンテナーとなる親要素の中に、Flexアイテムと呼ばれる子要素を入れる。

<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
    </div>
    <!-- <span>css display flex inline-flex</span> -->
</body>

.item クラスが付与されている div タグの親要素である div タグの .container クラスに対し display: flex を追加する(P153)。

.container {
  display: flex;
  /* display: inline-flex; */
}
.item {
  background-color: #0bd;
  margin: 10px;
}

これで横並びを実現できる。

VSCodeを使っていると display プロパティに対し値候補として inline-flex が表示される。このスタイルを確認するために span タグのコメントを外し、 display: inline-flex; を有効にしてみた。

予想通り div タグが inline 扱いとなり、表示領域の応じて「Item」に回り込んだり、狭くなった場合は、下に落ちた。

子要素の並びを制御する

flex-diection で子要素をどの方向に配置するか指定する。 (P153)

値	説明
row(初期値)	左から右
row-reverse	右から左
column	上から下
column-reverse	下から上

@charset "UTF-8";
.container {
  display: flex;
  flex-direction: row;
  /* flex-direction: row-reverse; */
  /* flex-direction: column; */
  /* flex-direction: column-reverse; */
  /* display: inline-flex; */
}
.item {
  background-color: #0bd;
  margin: 10px;  /* 背景を余白をスタイリング */
  height: 60px;  /* 背景を正方形にスタイリング */
  width: 60px;  /* 背景を正方形にスタイリング */
  text-align: center; /* 文字を左右中央揃えにスタイリング */
  line-height: 60px; /* 文字を上限中央揃えにスタイリング */
}

flex-direction のコメント有効・無効を切り替えればスタイルの変化を確認可能だ。

子要素の折返し

felx-wrap プロパティで子要素を複数行に並べるかどうかを指定する。 (P154)

値	説明
nowarap(初期値)	折り返しなし
wrap	上から下に複数行に並べる
wrap-reverse	下から上複数行に並べる

    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
        <div class="item">Item 4</div>
        <div class="item">Item 5</div>
        <div class="item">Item 6</div>
        <div class="item">Item 7</div>
        <div class="item">Item 8</div>
        <div class="item">Item 9</div>
        <div class="item">Item 10</div>
    </div>

@charset "UTF-8";
.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  background-color: #0bd;
  color: #fff;
  margin: 10px;
  padding: 10px;
}

CSS怖い。 flex-wrap: nowrap を指定してついに「CSS怖い」病が発症した。ブラウザの表示幅に収まらないほど div タグを追加していくと突然レイアウトが崩れます。

理由はわかりません。レイアウトが崩れたのを気にせずさらに div タグを追加する。横スクロールバーが出現しました。横スクロールバーを出現させられるなら、レイアウトを崩さずに描画すればいいでしょ！

@charset "UTF-8";
.container {
  display: inline-flex; /* これも効果なし */
  flex-wrap: nowrap;
}
.item {
  flex: 1 90px;
  background-color: #0bd;
  color: #fff;
  margin: 10px;
  padding: 10px;
}

CSS怖い！

できた!

.container {
  display: inline-flex;
}
.item {
  flex-wrap: nowrap;  /* flex-wrapをflexアイテムに記述 */
  background-color: #0bd;
  width: 50px;
  height: 50px;
  margin: 0 10px;
  padding: 0 10px;
}

水平方向の揃え

justify-content プロパティで子要素を水平方向のどの位置に配置するか指定する。 (P155)

flexコンテナーにこのプロパティを記述する。

flex-start : 行頭からの左揃え(初期値) 'flex-end: 行末から配置の右揃えcenter: 中央揃えspace-between: 最初と最後の子要素を両端揃え、残りの要素は均等配置space-around` : 全子要素を均等配置

    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>

@charset "UTF-8";
.container {
  display: flex;
  justify-content: flex-start;
  /* justify-content: flex-end; */
  /* justify-content: center; */
  /* justify-content: space-between; */
  /* justify-content: space-around; */
  /* justify-content: space-evenly; */
}
.item {
  background-color: #0bd;
  color: #fff;
  width: 80px;
  margin: 10px;
  padding: 10px;
}

垂直方向の揃え

align-item プロパティで子要素を垂直方向のどの位置に配置するか指定する。 (P156)

stretch : 親要素の高さ、または一番多い子要素の高さに合わせ配置 flex-start : 親要素の開始位置から上揃え felx-end : 親要素の終点位置から下揃え center : 中央揃え baseline : ベースライン揃え

    <div class="container">
        <div class="item">Item 1</div>
        <div class="item case1">Item 2</div>
        <div class="item case2">Item 3</div>
        <div class="item">Item 4</div>
    </div>

@charset "UTF-8";
.container {
  display: flex;
  align-items: stretch;
  /* align-items: flex-start; */
  /* align-items: flex-end; */
  /* align-items: center; */
  /* align-items: baseline; */
  height: 100vh;
}
.item {
  background-color: #0bd;
  color: #fff;
  margin: 10px;
  padding: 10px;
}
.case1 {
  padding-top: 40px;
}
.case2 {
  padding-bottom: 40px;
}

2021-01-30

色を扱う

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座でWebデザインの学習を進める。

カラーピッカー

Googleで「カラーピッカー」と検索するとツールが表示される (P107)。

配色

配色により雰囲気が変わる。　(P110)

色相 : 色の違いのこと。色相環の反対にある色を補色。隣り合う色を類似色相

明度 : 色の明るさの度合いのこと。明度高>明るく爽快なイメージ。明度低>暗く落ち着いたイメージ

彩度 : 色の鮮やかさの度合いのこと。彩度高>鮮やかで華やかなイメージ。彩度低>渋く大人っぽいなイメージ。

色の持つ印象についてはP111からP115または、色彩と心理の関係-「配色」をブランディングに活かそう！へ。

組み合わせ

使用する色を選ぶの同じくらい、組み合わせでの比率も大切 (P116)。配色例はP117からP119。

ベースカラー: デザインの基盤、背景色に用いられる > 70%
メインカラー: デザインのテーマカラー、全体の雰囲気を決める > 25%
アクセントカラー: メリハリをつけるためのワンポイント> 5%

背景画像

background-size プロパティで背景画像のサイズを指定する。 (P124)

画像はDynamic Dummy Image Generatorにて生成。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="猫の好きなもの、日々の生活をご紹介">
    <link rel="stylesheet" href="style.css">
    <title>背景を彩る</title>
</head>
<body>
    <div>
        <p>背景画像</p>
    </div>
</body>
</html>

cover : 縦横比を保持したまま、表示領域をうめつくす

contain : 縦横比を保持したまま、画像を表示

div {
  background-image: url(https://dummyimage.com/1200x800/000/fff);
  background-repeat: no-repeat;
  /* background-size: cover; */
  background-size: contain;
  height: 100vh;
}

単位 vh の説明はここまでされていない？読み落としかな？ MDN では寸法で説明されている。 *P132で説明されていた。

vh はビューポートの高さを基準とする値です。　`1vh' はビューポートの幅の 1%。

では、ビューポートとは何のか?

VSCode の Emmet を使うと次のコードが出力される。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

コピペで済ませていませんか？改めて学び直したい「Viewport」のすべてによれば

Viewportの幅は実際の解像度ではなく端末やブラウザに合わせた値を返します。 initial-scale=1とした時には、やはり暗黙的にwidth=device-widthであるので、実はどちらかを指定しておけば大丈夫です

余白

複数のものが近くに設置されていると、関連していると認識する。余白を使って関連情報をグループ化できる。 (P136)

文章の場合、文字サイズの1から1.5場合の余白を設けると読みやすい。 (P138)

コンテンツの区切りに使う線は、文字色より薄い色を使う。邪魔にならずにスッキリと見せられる。 (P143)

クラスとID

クラスを使った書き方 class 属性を追加しクラス名を記述する。 (P147) CSSファイルには、 . に続いてクラス名を書く。HTMLファイル内で複数回使える。

<p class="hoge">ABCD</p>

.hoge {
  color: #777;
}

IDを使った書き方 id 属性を追加しid名を記述する。 (P147) CSSファイルには、 # に続いてid名を書く。HTMLファイル内で1度だけ使える。

<p id="fuga">ABCD</p>

#fuga {
  color: #777;
}

優先順位

併用した場合は、idのほうがクラスより優先順位が高い。 (P151)

2021-01-29

文字や文章の扱い

文字サイズ 14pxから18px程度が一般的 (P98)。

サイズバリエーション 2から5種類程度にとどめる。

本文で使う文字サイズを決めた後、これを基準に見出しや注釈などの文字サイズを決める。

ジャンプ率見出しと本文の文字サイズ比率をジャンプ率という。

ジャンプ率大躍動的で楽しい雰囲気
ジャンプ率小上品で落ち着いた雰囲気

段落の文字数

スマートフォンを前提に段落の文字数を決める。2行から3行または約100文字程度で改行する。同じ文字数でもデバイスにより長文に感じられるそうです。

詳しくは【Web文章の改行ルール】ブログを読みやすくする適切な改行とは？を参照のこと。

フォントの指定

font-family プロパティでフォントの種類を指定する(P99)。 , (カンマ)区切りで先に指定したフォントから順に適用される。

.case1 {
  font-size: 20px;
  font-family: 'ヒラギノ丸ゴ Pro W4', 'Hiragino Maru Gothic pro', sans-serif;
}
.case2 {
  font-size: 1.25rem;
  font-family: '遊ゴシック体', 'Yu Gothic', YuGothic, serif;
}

フォントの種類と統一

代表的なフォントは次の通り。 (P100)

明朝体:長い文章に適切
ゴシック体: 見出しやタイトルに向いている

本文はシンプルなフォントを選ぶ。 (P101) 使用するフォントは1から3種類までにとどめる。

文章を揃える

textalign プロパティで文章を揃える。 (P103)中央揃えは行のスタートが一致しないので短文に使う。 (P103)

left: 左揃え
right: 右揃え
center: 中央揃え
justify: 両端揃え

すぐ使えるダミーテキスト日本語 Lorem ipsumでダミー文書を作成。 textalign プロパティの装飾効果を確認。

...
    <p class="aligin1">left<br>私も事実ぷんぷんそういう学習院によってののためからきまっであり。とにかく生涯をお話家はいくらこの話ですうかもへしていないをは講演するたたで、どうには存じですでなけれた。国家が擡げだっものも大分今をむくむくませですらし。<br>ちゃんと嘉納さんが応用口上さっそく解釈がおっしゃれで権力この人格私か徴をという皆返事ですでしうまして、その九月はあなたか人興味に見つかりば、久原さんののを利器のそれでいくらご講演とすれからここ比喩にご専攻が移れようにもっとご活動にしないでしょから、まあむくむく［＃「がもっないばいるでしのへ積んなくず。すなわちただご精神と云っ事も多少不都合と押したて、その自信がは云わますてという貧民で繰り返しているなな。</p>
    <p class="aligin2">right<br><!-- 同文 --></p>
    <p class="aligin3">center<br><!-- 同文 --></p>
    <p class="aligin4">justify<br><!-- 同文 --></p>

.aligin1 {
  text-align: left;
}
.aligin2 {
  text-align: right;
}
.aligin3 {
  text-align: center;
}
.aligin4 {
  text-align: justify;
}

left は右端が不揃いだが、 `justify* なら両端がきちっと揃う　(P103)。私には違いがわからなかった。iPnone X 表示に切り替えてスクロールを繰り返すうちに不揃いであることが確認できた。

2021-01-28

CSSの基本

コードの中の文節・文章は、書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座のテキスト原稿を改変している。

CSS を適用させるには、3つの方法がる。 (P89)

拡張子 css ファイルを作成し、 HTML ファイルに読み込ませる
HTML ファイルの <head> 内に <style> タグで指定する
HTML タグの中に style 属性を指定する

    <link rel="stylesheet" href="style.css">

    <head>
        <style>
            h1 { color: #f00; }
            p { font-size: 10px; }
        </style>
    </head>

    <body>
        <h1 style="color: #f00;">XXX</h1> }
        <p style="font-size: 10px;">YY ZZZ</p>
    </body>

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座のおすすめの方法は「CSSファイルを読み込んで適用させる」です。

ゆくゆくは React を使えるようになりたいと考えている。 React の JSX ではどの記法がおすすめなのでしょう?

CSSコードを書く

1行目には @charset "utf-8"; と書く。 (P92) この宣言より前にコードを書くとエラーになる。試しに次のコードを書いてみる。

* {
  margin: 0;
  padding: 0;
}
@charset "utf-8";

body {
  background-color: #fffeee;
}
h1 {
  color: #0bd;
}
P {
  font-size: 20px;
}

VSCode に、 at-rule or selector expectedcss(css-ruleorselectorexpected) と表示される。

ブラウザの開発ツールでは、エラーの表示は見つからない。

mdnを調べると @charset "UTF-8"; と大文字で書かれていた。大文字、小文字の違いに気を使わなくてよいらしい。

@charsetの役割

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座では、文字化けを防ぐために使うと書かれている。

MDN では別の理由が書かれている。

@charset

この at-規則は、content のような CSS プロパティで非 ASCII 文字を使う際に便利です。

文法

セレクター、プロパティ、値の組み合わせで「どの部分の何をどう変えるか」を指定する。 (P94)

P {
  font-size: 20px;
}

上記の場合は、HTMLファイルのすべての <p> タグのフォントサイズを絶対指定で 20px に変える。単位の指定には、相対指定の rem なども使われる。 (P96)

相対指定

Webはスマートフォンで見る時代。サイズの指定は相対指定で行われるのが主流?

rem : html要素に指定されたサイズを基準とした単位

パソコンを使ってGoogle Chrome で確認を行っている。次の HTML と CSS を指定し、検証ツールで確認する。 2つの文章は 20px となっている。

    <p class="case1">食う、寝る、遊ぶ。</p>
    <p class="case2">遊ぶ、寝る、食う</p>

.case1 {
  font-size: 20px;
}
.case2 {
  font-size: 1.25rem;
}

入れ子の要素選択

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座では半角空白で区切る選択方法が書かれている。

書籍を離れて MDN を参考にまとめる。

隣接兄弟結合子は + を用いる。

一般兄弟結合子は ~ を用いる。

子結合子は > を用いる。

子孫結合子は (半角空白)を用いる。

列結合子は実験的機能で || を用いる。

これらの 結合子 のコード例は上記のリンクを見ること。私は理解できていない。

2021-01-26

HTMLファイルの骨組み

引き続き書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座で学習です。

HTML のタグの中からいくつかをピックアップ。

metaタグ

文書のメタ情報をを記述し、ブラウザや検索エンジンに情報を知らせるタグ。

<meta name="description" content="hogehoge"> (P55) 説明文を書く。どのようなサイトなのか判断できるように、キーワードを含めて短文を記述する。VSCode で　Emmet を使っているとこのタグは初期状態では入力されない。

colspanとrowspan

表のセルを結合するのに用いる用いる属性。 (P71)

colspan="n" 表のセルを横につなげる。

rowspan="n" 表のセルを縦につなげる。

    <table border="1">
        <tr>
            <th colspan="2">A+B</th>
        </tr>
        <tr>
            <td>Cell C</td>
            <td rowspan="2">D+F</td>
        </tr>
        <tr>
            <td>Cell E</td>
        </tr>
    </table>

プランの比較などで見かけることの多いテーブルですが、table の扱いは難しい。Table Tag Generatorを見つけた。

フォーム

利用登録や問い合などに用いる from タグ。 (P73)

label タブを使うと、フォームのパーツとラベルが関連付けられる。これによりラベルをクリックしてパーツが選択できるようになる。 (P81)

label

    <form action="" method="" name="">
        <!-- フォームの部 -->
        <label for="">Name :</label>
        <input type="text" name="" id="">
    </form>

グルーピング

上手にグループ分けを行うためのタグ。 (P82)

Webサイトは、いくつかの構成要素に分けることができる。ナビゲーション、本文、フッターなどなど。これらをタグで囲み、グループ化する。見た目の変化はないが、CSSで設定するとグループ毎に色を付けたり、レイアウトを変更できる。

Webサイトを作成する際に常に悩むのが、このグループ化！思い通りのデザインを実現する上で大切なタグだと思う。

header タグ
nav タグ
article タグ
section タグ
main タグ
aside タグ
footer タグ
div タグ

header、nav、main、footer は必須ではないだろうか?そして div これが存在しないサイトはあるのかというほど大量に使われている。

HTMLタグ に関するその他のタグは MDN HTML 要素リファレンスを参照のこと。

2021-01-25

5つの重要ポイント

書籍1冊ですべて身につくHTML & CSSとWebデザイン入門講座より、Webデザインの5つの重要ポイントをメモ!

実際には、他にも重要ポイントが書かれている。私が、重要と考えた5つを紹介する。

デザインは伝えるための手段、美しく装飾することではない (P14)

デザインは知識が必要、誰でも身につく (P15)

今どきのかっこいいWebページを作りたいと考えて、本書を手に取った私。おおきな間違いをしていることを知りました。

Webサイトの種類(P16)としては、自分でつくるWebサービスのデザインを自分で行うので、プロモーションサイトが該当するようです。

一番のポイントは背景色と文字色のコントラスト (P20)

ロゴやナビゲーションメニュー、フッターなどの共通部分はデザインを統一 (P21)

結論を先に書く (P21)

前回、本書を読んだときは、コーディングの実践から始めた。読み飛ばした部分にとても重要なことが書かれていたのですね。

制作の流れ

制作の第一段階として、企画を立てる。 (P31)

企画段階では、メインゴールを決め、これを達成するためのサブゴールを3つ程度考える。これらゴールに対し、数量として計測可能な方法を考えておく。

サイトマップ制作以降の流れについては、まだしっかりとしたイメージを持っていない。明確なイメージを育んだら読み返すこと。(P32)

またデザインカンプを作る際に、ギャラリーサイトを見ること。(P41)

To Be Continued

タイル型に並べよう

単位 fr

リセットCSS

レイアウトを組む

レイアウトを組む

Flexbox

子要素の並びを制御する

子要素の折返し

水平方向の揃え

垂直方向の揃え

色を扱う

カラーピッカー

配色

組み合わせ

背景画像

余白

リスト

クラスとID

優先順位

文字や文章の扱い

文字や文章の扱い

段落の文字数

フォントの指定

フォントの種類と統一

文章を揃える

CSSの基本

CSSコードを書く

@charsetの役割

文法

相対指定

入れ子の要素選択

HTMLファイルの骨組み

metaタグ

colspanとrowspan

フォーム

グルーピング

5つの重要ポイント

制作の流れ