20190302のCSSに関する記事は3件です。

投稿日：2019-03-02T22:12:01+09:00

プログラミング学習記録14〜だいぶ進みました〜

今日やったこと

今日はだいぶ進みました。

Udemyの「Web開発入門完全攻略コース - プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！」のセクション3の22~29

セクション4の30~43

セクション5の44~55

パートごとにとったメモです。

22.リスト

Progateをやってたら特に問題のないパート。
ulタグで順序なし（非数字）のリストが作れて、olタグで順序あり（数字）のリストが作れます。

入れ子構造のことをネスト構造とも呼びます。

23.演習：リスト

これまでのレッスンの内容を理解できてるかどうかの確認。

山場は強いて言えば、リストを入れ子構造で書くところぐらいかなと思います。
それ以外は楽勝です。

24.演習回答：リスト

23でやった演習の答え合せ。
全問正解で突破。

25.div,span

div→ブロック要素
span→インライン要素

ブロック要素の中にインライン要素を入れることはできますが、インライン要素の中にブロック要素を入れることはできません。

具体例を挙げると、divの中にspanを入れることはできるが、spanの中にdivを入れることができない、ということです。

26.属性（Attiribute)

属性とは例えば、

<a href=“https……”></a> <img src=“ooo.jpg”>

などのイコールで指定されている部分です。

属性の種類はたくさんあるのですが、ほとんどは覚える必要はなく、必要に応じてMDNで参照すればいいとのことです。

27.リンク

リンクはaタグのhref属性を用いて表します。
ページ内の別の場所に飛ぶ時にもaタグを使います。

<a href=“https:….” target=“_blank”>sss</a>
のようにtaget属性を指定すると、リンクをクリックした時に、新しいタブで開くようになります。

28.演習：HTML基礎

ここまでやってきたことを理解できてるかどうかを確かめる演習を行います。

imgタグとaタグを使います。

29.演習回答：HTML基礎

28の解答です。
全問正解で突破できました。
Progateをやった人は余裕で全問正解できると思います。

セクション3HTML入門　全体の感想

HTMLの歴史を知るとともに、HTMLの基礎について復習できました。
Progateをちゃんとやった人はさらっと見る程度でいいと思います。
まだまだ先は長いので、気を引き締めて次のセクション４に進みます。

セクション４HTMLステップアップ編

30.イントロダクション-HTMLステップアップ編-

セクション４でやる内容の概要を説明した動画です。

31.テーブル

基本的なテーブル（表）の作り方はわかっていたのですが、セルを結合させる方法や表のタイトル（キャプション）をつける方法は知らなかったので、勉強になりました。

セルを横方向に結合する
<td colspan=“結合したいセルの数”>~</td>

セルを縦方向に結合する
<td rowspan=“結合したいセルの数”>~</td>

タイトルをつける→captionタグ

32.補足：HTMlのthタグとtdタグの違いについて

「プログラミング入門ナビ」の以下のページに書いてあることが紹介されました。
https://programmingnavi.com/1586/

そのまま引用します↓

thタグとtdタグの意味
それぞれのタグは、下記の意味を持っています。
* th・・・表のヘッダーのセルを定義
* td・・・表でデータが入るセルを定義

33.行と列の覚え方

行と列の覚え方についてです。
以下のページと同じ図が紹介されていました。
https://lambdalisue.hatenablog.com/entry/2013/07/18/134507

この覚え方だと覚えやすいので、行と列がこんがらがってしまう人は確認しておきましょう。

34.演習：テーブル

テーブルを自分で作れるかどうかの確認です。

35.演習解答：テーブル

34の解答です。
全問正解で突破できました。
特に問題はなさそうです。

36.フォーム

フォームの基本についての動画。
フォームはformタグで作ります。

action→データの送信先。
method→httpリクエストメソッド

httpリクエストメソッドとはブラウザからサーバーに対して依頼する処理の種類のことで、特に重要なのはGETとPOST。

GET→サーバからデータを取得したい時に使う
POST→サーバへデータを送信したい時に使う。

37.シンプルなフォーム

inputタグにplaceholder属性を入れることで、フォームの入力欄に薄い灰色のテキストを表示させることができます。

こんな感じのやつ↓

38.いろいろなフォーム部品①

tableタグを併用をして、フォームを作成します。
Titleタグの>を全角の＞にしてしまったがために、ブラウザに表示されないトラブルが起きつつもなんとかクリア。

W3Cの文法チェックツールがあると、すぐにどこが悪いのかがわかっていいいですね。
https://validator.w3.org/

39.いろいろなフォーム部品②

下にだーって広がっていくやつをプルダウンと言います。ドロップダウンメニューとも言うみたいです。

HTMLではselectタグとoptionタグを使って実装します。

あと、ラジオボタンとチェックボタンについても学習しました。

ラジオボタンとはユーザーに選択してもらうためのチェックボタンです。
チェックボタンはチェックマークでチェックするのですが、ラジオボタンは点でチェックをします。

40.フォームバリデーション

フォームバリデーションの定義については引用させていただきます。

バリデーションとは
・入力された内容が要件を満たしているか、妥当性を確認すること。

フォームでのバリデーションは、具体例を示します。
例えば、必須項目なのに入力されずに送信ボタンが押されてしまった、といった場合、入力されてない項目がありますよーと言って再度入力を促すことです。

HTMLではinputタグにrequieredをつけることで実装することができます。

<input id=“username” name=“username” required>

41.演習：フォーム

フォームを作れるかどうかの確認です。
以下のようなフォームを作りました↓
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>アルバイト応募フォーム</title>
  </head>
  <body>
    <h1>アルバイト応募フォーム</h1>
    <form class="" action="#" method="post">
      <table border="1">
        <tr>
          <th>ふりがな *</th>
          <td><input type="text" name="username" value="" required></td>
        </tr>
        <tr>
          <th>生年月日 *</th>
          <td><input type="date" name="birthday" value="" required></td>
        </tr>
        <tr>
          <th>性別</th>
          <td>
            <input type="radio" name="sex" value="男性" checked>男性
            <input type="radio" name="sex" value="女性">女性
          </td>
        </tr>
        <tr>
          <th>電話番号 *</th>
          <td><input type="tel" name="tellnumber" value="" required></td>
        </tr>
        <tr>
          <th>メールアドレス *</th>
          <td><input type="tel" name="mail" value="" required></td>
        </tr>
        <tr>
          <th>現在の職業 *</th>
          <td>
            <select class="" name="" required>
              <option value="" selected>選択してください</option>
              <option value="">学生</option>
              <option value="">アルバイト・パートタイム</option>
              <option value="">正社員</option>
              <option value="">その他</option>
            </select>
          </td>
        </tr>
        <tr>
          <th>お問合せ内容</th>
          <td><textarea name="contact"></textarea></td>
        </tr>
      </table>
      <input type="submit" name="" value="送信">
      <p>*の項目は入力必須となります。</p>
    </form>
  </body>
</html>
42.演習回答：フォーム①

43.演習回答：フォーム②

41の解答です。
細かい部分は違いましたが、構造的に大きな間違いはなかったので、よかったです。

セクション４HTMLステップアップ編　全体の感想

セクション３よりは難易度が上がりましたが、内容は基礎的なものだったと思います。
一部、知らない内容もありましたが、特に問題なくクリアすることができました。
この調子でセクション５に取り組んでいきたいと思います。

セクション５CSS入門

44.CSS入門

CSSの歴史、役割についての解説動画。
CSSは下位互換性があり、昔の記述方法でも動作するのは便利だなと思いました。

45.はじめてのCSS①

CSSの基本的な記述方法に関する動画。
すでに知っているかつやったことのある内容だったので、流し見で視聴しました。

46.はじめてのCSS②

1つのHTMLファイルで複数のCSSファイルを読み込むことができます。
あと、CSSの優先順位に関する話も出てきました。
基本的には外部参照、外部ファイルにCSSを記載するのが望ましいみたいです。

47.HTMLテンプレート配布

CSSの読み込みも記載された新しいHTMLの雛型テンプレートがもらえます。

48.CSSのコメント

CSSは*/ */で囲うことでコメントアウトすることができます。
HTML同様に、Atomでは「commandキー+/キー」でコメントアウトできます。便利ですね。

49.色の指定

今までRGBをなんとなく使用していたのですが、この動画を見て、より深く理解することができました。

RGBは「#ff0000」のように16進数で表現するのですが、#を除いて最初の2桁はred、真ん中の2桁はgreen、最後の2桁はblueを表しています。

これは知らなかったので勉強になりました。

50.背景とボーダー①

背景とボーダー（枠線）についての動画です。

Borderのスタイルはsolidしか使ったことがなかったのですが、いろいろ種類があるみたいですね。
詳しく知りたい方は、MDNのレファレンスを参考にしてください↓
https://developer.mozilla.org/ja/docs/Web/CSS/border-style

51.背景とボーダー②

画像を背景にする方法の解説動画です。
相対パスの話もありましたが、特に問題ありませんでした。

52.セレクター

CSSのセレクターの解説動画です。
h1{
  color:white;
}
CSSにこのような記述があった場合、h1がセレクターになります。

セレクターには３種類あります。

エレメント（要素）セレクター

IDセレクター

クラスセレクター

エレメントセレクターはh1やdiv、aなどのタグに関するセレクターです。

IDセレクターはid=“”というようタグの中で指定したID名に対して使うセレクターです。

クラスセレクターはclass＝””というようにタグの中で指定したclass名に対して使うセレクターです。

53.Chromeデベロッパーツール

デベロッパーツールは「commandキー+optionキー+Iキー」で開くこともできます。
これは積極的に使っていきたいですね。

デベロッパーツールの使い方はサルワカさんのブログがわかりやすいです。
https://saruwakakun.com/html-css/basic/chrome-dev-tool

54.演習：CSS基礎

これまでやってきたことを理解しているかどうかの確認テスト。
Progateをやった人は余裕で突破できます。

55.演習回答：CSS基礎

54の回答。
全問正解でした。よかったです。

セクション5CSS入門　全体の感想

一部知らないこともあったのですが、ほとんど知っている内容でした。Progateをしっかりやった人にとっては簡単な内容だと思います。
このまま次のセクションに進みたいと思います。

明日からも引き続き、プログラミング学習頑張ります。

おわり

　 Tweet
Qiitaで続きを読む

投稿日：2019-03-02T21:11:22+09:00

CSS　～文字の大きさ～

文字の大きさを変える

文字の大きさの変更はfront-sizeプロパティを使用します。
stylesheet.css
h1{
color:#ff0000;
frontsize:10px;
}
front-sizeプロパティはpx(ピクセル)を使用するので、必ず忘れないようにしてください。

　 Tweet
Qiitaで続きを読む

投稿日：2019-03-02T10:04:32+09:00

CSS animation で遊び倒す - Submit Button 2 -

CSS animation day40 となりました。

前回の続きである、Submit Button を完成させましょう。

1. 完成版

See the Pen Plane Button by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. 参考文献

Flyaway Send Button
ANIMISTA

3. 分解してみる

❶.
マクロインタラクションの4つのstepである 3: フィードバック からやっていきましょう。

ボタンをクリックしたら、飛行機が離陸するアニメーションをつけたいのですが、どうしたら良いでしょうか？

1: 飛行機が飛び立つ
2: テキストが変わる。(人間味が感じられるテキストだとbetter)
3: ボタンが動く

などが考えられます。
まずは、「クリックしたら」を、Javascript　なしで表現しましょう。
以前の記事を参考にして、:checked で実装します。
　　　
index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <input type="checkbox" id="start" />
      <label for="start">
        <div class="button">
          Send
          <i class="fab fa-telegram-plane plane"></i>
        </div>
      </label>
    </div>
  </body>
</html>
styles.scss
body {
  background: #000;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.button {
  position: relative;
  width: 200px;
  height: 100px;
  padding-right: 20px;
  text-align: center;
  line-height: 100px;
  color: #8fc866;
  font-size: 28px;
  border-radius: 30px;
  border: 2px solid #8fc866;
  background-size: 400%;

  &:hover {
    border-width: 4px;
    .plane {
      animation: vibrate 0.3s infinite 0.3s both;
    }
  }
}

#start {
  display: none;
}

#start:checked ~ label .plane {
  animation: fly 0.4s ease both;
}

@keyframes fly {
  100% {
    transform: translate(200px, -100px);
    opacity: 0;
  }
}

.plane {
  font-size: 35px;
  color: #ffc;
  position: absolute;
  top: 37px;
  left: 155px;
}

@keyframes vibrate {
  0% {
    transform: translate(0) rotate(10deg);
  }
  20% {
    transform: translate(-1px, 1px) rotate(10deg);
  }
  40% {
    transform: translate(0px, 0px) rotate(10deg);
  }
  60% {
    transform: translate(-1px, 1px);
  }
  80% {
    transform: translate(0px, 0px) rotate(10deg);
  }
  100% {
    transform: translate(0, 1px) rotate(10deg);
  }
}
いい感じですね！

❷.
改善点として、Send　ボタンが、「今、送ったよ！」ということを、ユーザーに教えるフィードバックが足りてません。

Send を Sent !! に変えましょう！ (!! で、人間味を出します。)　
これは、beforeクラスを用いれば実現できそうです。
styles.scss
.button {
  position: relative;
  width: 200px;
  height: 100px;
  padding-right: 20px;
  text-align: center;
  line-height: 100px;
  color: #8fc866;
  font-size: 28px;
  border-radius: 30px;
  border: 2px solid #8fc866;
  background-size: 400%;

  &:hover {
    border-width: 4px;
    .plane {
      animation: vibrate 0.3s infinite 0.3s both;
    }
  }

  &:before{
    content: 'Sent';
    font-size: 0px;
  }
}


#start:checked ~ label .button {
  font-size: 0;
}

#start:checked ~ label .button:before {
  font-size: 28px;
  padding-left: 28px;
}
元のテキストは、クリックされると fontSizeが 0pxになり、
:beforeクラスの fontSize 0px のテキストが、クリックされると28px になる様に設定しました。

❸.
では、クリックしてボタンが動く様にしましょう。

どう動けば良いでしょうか？

飛行機が飛び立つ時に、爆風がおこると仮定すると、ボタンは後ろに吹き飛ばされます。このイメージをアニメーションで作りましょう。
styles.scss
#start:checked ~ label .button {
  font-size: 0;
  animation: moveButton 0.6s ease;
}

@keyframes moveButton {
  50% {
    margin-right: 60px;
  }
}
いい感じです！　
ただ、まだフィードバックが足りてません。

ボタンの背景カラーと、文字の色をクリックして変わる様にしましょう。
styles.scss
#start:checked ~ label .button {
  font-size: 0;
  animation: moveButton 0.6s ease;
  background: #8fc866;
}

#start:checked ~ label .button:before {
  font-size: 28px;
  color: #fff;
  padding-left: 28px;
}
いい感じです！
これで、ユーザーは送ったぞ！という、フィードバックがよく伝わります。

マイクロインタラクションの4つのstep を意識して作ると、
大変素敵なアニメーションが作れますね。
それでは、また明日〜

　 Tweet
Qiitaで続きを読む

20190302のCSSに関する記事は3件です。

プログラミング学習記録14〜だいぶ進みました〜

今日やったこと

22.リスト

23.演習：リスト

24.演習回答：リスト

25.div,span

26.属性（Attiribute)

27.リンク

28.演習：HTML基礎

29.演習回答：HTML基礎

セクション3HTML入門 全体の感想

セクション４HTMLステップアップ編

30.イントロダクション-HTMLステップアップ編-

31.テーブル

32.補足：HTMlのthタグとtdタグの違いについて

33.行と列の覚え方

34.演習：テーブル

35.演習解答：テーブル

36.フォーム

37.シンプルなフォーム

38.いろいろなフォーム部品①

39.いろいろなフォーム部品②

40.フォームバリデーション

41.演習：フォーム

42.演習回答：フォーム①

43.演習回答：フォーム②

セクション４HTMLステップアップ編 全体の感想

セクション５CSS入門

44.CSS入門

45.はじめてのCSS①

46.はじめてのCSS②

47.HTMLテンプレート配布

48.CSSのコメント

49.色の指定

50.背景とボーダー①

51.背景とボーダー②

52.セレクター

53.Chromeデベロッパーツール

54.演習：CSS基礎

55.演習回答：CSS基礎

セクション5CSS入門 全体の感想

CSS ～文字の大きさ～

文字の大きさを変える

CSS animation で遊び倒す - Submit Button 2 -

1. 完成版

2. 参考文献

3. 分解してみる

日付別

タグ一覧

セクション3HTML入門　全体の感想

セクション４HTMLステップアップ編　全体の感想

セクション5CSS入門　全体の感想

CSS　～文字の大きさ～