やったつもり屋

5人家族(専業主婦、子供3人、僕)の視点から伝えるお金のこと。本業:組込系エンジニア、副業:ネットショップ店主。

プログラミング

ドットインストールの「実践!ウェブサイトを作ろう」の成果物と不明cssの調査

投稿日:2019年6月17日 更新日:

ドットインストールの「実践!ウェブサイトを作ろう」の成果物と不明cssの調査

この商品は、ドットインストールの「実践!ウェブサイトを作ろう」の課題を実際にやってみて、
出来上がった僕の成果物と、自分が知らなかったCSSについて調査した資料です。

HTML、CSSは終わらせたんだけど、初めて出てきたCSSが良く分からなかったので詳しく調べたい。
と考えて作成しています。

なお、この記事は、HTML、CSSを学び始めて1ヶ月目の超新米が書いています。
Twitterでも学習内容を発信しているので、興味がある方はフォローしてくれると嬉しいです。

Twitter:https://twitter.com/bokukimura

自分が作成した成果物は以下です。参考にしたい方はどうぞ。
実践!ウェブサイトを作ろう成果物

調査したCSS一覧

ドットインストールの課題をやってみて、理解していなかったプロパティは以下です。

これらのCSSについて、調査をしてます。

・display:flex、justify-content

・opacity

・position/top/bottom/right/left

・box-sizing

・content: attr()、::after

それぞれについて、調べたことをまとめます。ただし、全部書いていると時間と紙面がいくらあっても足りないので要点だけをまとめます。

そもそも、必要なタイミングでマニュアルを参照すれば良いので、

やり方を全部覚える必要はありませんし。。。。

  • どんなものなのか?
  • どんな使い方が出来るものなのか?
  • より深く知るためにはどのサイトを読めばいいか?

がわかっていれば十分と考えています。

では、調べたことを記載していきます。

display:flex、justify-content

  • displayプロパティは、要素の表示形式を指定するプロパティ
    • 主に要素を横に並べる時に使用される
  • 設定できる値は多数ある。詳細は以下のサイトを参照。

https://developer.mozilla.org/ja/docs/Web/CSS/display

  • 使用頻度が高いのは、inherit、inline、block、inline-block、flexだと思われる。

使用頻度が高い値の調査

  • inherit:
    • 親要素の値を継承する
  • inline:
    • 要素が横に並ぶ(改行が入らない)
    • 幅と高さは指定できない
    • 左右のmarginは指定できる。上下のmarginは指定できない。
  • block:
    • 要素が縦に並ぶ(改行が入る)
    • 幅と高さが指定できる
    • 上下左右のmargin、paddingを自由に指定できる
  • inline-block:
    • 要素が横に並ぶ(改行が入らない)
    • 幅と高さが指定できる
    • 上下左右のmargin、paddingを自由に指定できる
  • flex:
    • 柔軟に配置を設定できる
    • フレックスボックス用のプロパティで制御する
    • inline、blockのプロパティは使用できないものがある

ざっと調べた感じだと、要素を横に並べるためのプロパティのようですね。

今回使用している、justify-content は、flexコンテナーだけで使用出来るプロパティで、

スペースがあった場合、水平方向のどの位置から配置するか決めるプロパティです。

「space-between」は最初と最後の要素を両端に配置して、残りの要素を均等に間隔を空ける表示になります。

その他にも、右に寄せたり左に寄せたりということができるようです。

参考サイト

  • http://www.htmq.com/style/display.shtml
  • https://saruwakakun.com/html-css/basic/display
  • https://www.plusdesign.co.jp/blog/?p=8747

opacity

  • 要素の透明度を設定するプロパティ
  • 0.0〜1.0で設定可能。
    • 0.0が透明。
    • 範囲を超えている場合は、近い限界値に丸められる(例:-0.1→0.0、1.2→1.0)

ボタンのhover時に透過させて、淡く光っているような見た目を(そう思ってるのは僕だけ?)実装可能にするプロパティです。

参考サイト

  • http://www.htmq.com/css3/opacity.shtml

position/top/bottom/right/left

  • positionプロパティは、ボックスの配置位置を指定する。相対位置や絶対位置がある
  • positionプロパティで配置の基準位置を設定した後は、top/bottom/left/rightで基準位置からの距離を指定可能

配置方法の指定

  • static
    • 通常の配置
  • relative
    • staticで表示される位置を基準とした相対位置への配置
  • absolute
    • 絶対位置への配置。ウインドウの左上からの配置ですが、親要素にstatic以外が設定されている場合は親要素の左上からの絶対位置になる。
  • fixed
    • 絶対値への配置ですが、スクロールしても位置が固定になります。
    • スマホで上や下にメニューが表示されているのは、このプロパティの設定と思われる。

position設定をしている場合の位置の指定方法

  • top/bottom/left/rightでその方向からの位置を指定する。
  • left/rightを0とすることで中央寄せになる
  • マイナス値の設定も可能

参考サイト

  • http://www.htmq.com/style/position.shtml

box-sizing

  • 要素の大きさを算出方法を指定するためのプロパティ
  • 通常はpadding、borderを含まないのだが、border-boxに設定すると、padding、borderを含んだサイズになる

課題で作成したデータを見てもらうと分かりやすいと思いますが、

paddingを含めて幅が250pxになっています。

参考サイト

  • http://www.htmq.com/css3/box-sizing.shtml

content::attr()

  • ()内に属性名を指定して、htmlからデータを取得し、プロパティの値として指定可能
  • ::before または ::after という擬似要素を使ってコンテンツを挿入できる
  • contentプロパティーで表示したテキストは洗濯やコピペが出来ない
    • つまり、コピペ防止になるってこと
  • after、beforeのコロンの数はCSSのバージョンによって異なる。
    • コロン2つがCSS3、コロン1つがCSS2以前
    • コロン1つでも問題なく動作することは確認できたので、古いブラウザに対応する場合はコロン1つ

確かにattr()で表示しているVoicesは、選択できない。

参考サイト

  • http://www.htmq.com/style/content.shtml
  • https://www.webcreatorbox.com/tech/content-property

おわりに

ドットインストールの「実践!ウェブサイトを作ろうで不明だったCSSについて調べました。

この資料だとかなりざっくりですが、完璧に覚えておく必要はないので、

この粒度で詰め込んであれば問題ないかと。

詳しく覚えていなくても、リンク先の情報には軽く目を通しておいて、どんなことが出来るかイメージを膨らませておくと、

実際に使う段階になって、どのプロパティ使ったら良いかわからない。

といったことは避けられるのではないかと考えます。

ショップ:https://bokukimura.stores.jp/

Twitter:https://twitter.com/bokukimura

-プログラミング
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

カードタイプのデザイン4種類のHTML&CSS

カードタイプのデザインのHTML&CSSを作成しました。 作成したデザインは4つです。 ブログタイプ、 ブログタイル、 値段表、 画像を配置したリスト 基本的なデザインはこのタイプのどこかに含まれると …

no image

【CSS】CSSで画像を中央でトリミングする方法

画像を中央位置でトリミングする

レスポンシブデザイン対応で 縦の高さのみを固定して、横幅は親要素いっぱいに表示させたい [crayon …

no image

【CSS】inline-blockで横並びにした要素の上を合わせる方法

display:inline-block;で、 横並びにした要素のサイズがそれぞれ違う場合に、下揃いになるので、上揃いにする方法です。

no image

【CSS】inline-blockの横並びの隙間を埋める方法

boxの間の改行コードが隙間を作る原因になるので、 親のスタイルでfont-sizeを0にして、子のスタイルで戻してやればできる

【環境構築】VSCodeをHTMLコーディング向けにカスタマイズ内容と手順

こんにちは、きむら @bokukimura です。 僕は本業がAndroidアプリ開発なのですが、最近はJavaScriptで出来ることが増えてきているのでJavaScriptを身に付けたい。 せっか …