What's New Qiita

20200917のCSSに関する記事は6件です。

  • 投稿日：2020-09-17T22:33:01+09:00

【初心者でもわかる】字下げ、字上げのインデント。リストを表示した時に、・の下に文字をもぐりこませないようにする方法

どうも7noteです。CSSで字上げ・字下げする方法。

字送りされた時、こんなふうになってしまうのを解消。

・文字おくりがされるとくずれてしま
います。

これをこうしたい↓。

・文字おくりがされてもくずれないよ
　うになりました！

方法

text-indentを使った方法。

p {
  text-indent: -1em;
  padding-left: 1em;
}

reslut.png

tetx-indentは行の冒頭に余白を入れることができます。
text-indent: 1em;を入れることで１文字分隙間を開けることができます。

今回は逆にtext-indent: -1em;とすることで「・」の分を左に寄せ、全体の左にpaddingを入れることで対応しています。

まとめ

list-styleを使う場合は必要ないですが、疑似要素でアイコンを入れたりした場合にも使うので覚えておいて損はないかなと思います！

reslut2.jpg

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-17T21:21:55+09:00

CSSの基本まとめ

CSSの基本まとめ

1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座の本を読んで、備忘録的にまとめていきます。詳しくは本を読まれることをお勧めします。
なお、上記の本に詳しく記載されていないことも、自分の理解のために追加で調べて載せています。

CSSの適用方法

基本的には各HTMLファイルの<head>タグ内に<link>タグを使ってCSSを指定します。

<head>
  <link rel="stylesheet" href="cssファイルの相対パス">
</head>

他にも下記のような方法があります。

  • 一部のHTMLファイルに異なるCSSを適用したい場合・・・<head>タグの中に<style>タグを追加してCSSを直に書く
<head>
  <style>
    h1 { color: #fff;}
    p { font-size: 10px;}
  </style>
</head>
  • 一部のタグ要素のみにCSSを適用(上書き)したい場合・・・各タグの中にstyle属性を使ってCSSを直に書く
<body>
    <h1 style="color: #fff;">CSSの基本まとめ</h1>
</body>

CSSの基本的なルール

ファイルの拡張子

.cssで保存する。

文字コードの指定

1行目で必ず文字コードを指定する。

@charset "UTF-8"

書き方

セレクター　{ プロパティ： 値;}のように記載する。
セレクターはHTMLのタグの名前や、クラス、IDなど、どこの要素かを指定する。
プロパティは色やサイズなど、何の要素かを指定する。
最後のセミコロンを忘れないように。

/* 1つのセレクターに1つのプロパティを設定する */
h1 {color:red;}

/* 複数のセレクターに1つのプロパティを設定する(カンマで複数指定) */
h1,p {color:red;}

/* 1つのセレクターに複数のプロパティを設定する(セミコロンで複数指定) */
h1 {color:red; font-size:20px;}

/* ある要素の中にある要素に1つのプロパティを設定する(半角スペースで指定) */
div p {color:red;}

親要素と子要素

HTMLはタグが入れ子構造になりますが、親要素と子要素という考え方があります。下記の例だと、<div>から見ると<h2>と<p>は子要素です。逆に<p>から見ると、<div>が親要素になります。
CSSでサイズを指定する時などに、この親要素と子要素の関係を意識する必要があります。

<div> <!-- 親要素ここから -->
<h2>CSSの基本まとめ</h2> <!-- 子要素 -->
<p>親要素と子要素</p>　<!-- 子要素 -->
</div> <!-- 親要素ここまで -->

サイズの単位

  • px・・・画面の最小単位(ピクセル)を基準とした単位。端末のディスプレイ解像度により、見た目のサイズが異なる場合がある。
  • %・・・親要素のサイズを基準とする相対的なサイズ指定の単位。親要素が90%で、子要素に90%を指定した場合、子要素は親要素の90%（90%*90%=81%)のサイズとなる。
  • rem・・・htmlタグの文字サイズを基準とする相対的な文字サイズ指定の単位。親要素の影響を受けない。

基本的なプロパティ

文字

  • font-size
  • font-family
  • text-align

色

  • color

背景

  • background-image
  • background-image-position

幅と高さ

  • with
  • height

余白

  • margin
  • padding

線

  • border-width
  • border-style
  • border-color

リスト

  • list-style-type
  • list-style-position
  • list-style

クラスとID

同じタグを複数箇所で使用するが、装飾は個別に指定したいという場合にクラスやIDを利用します。
クラスやIDを指定すると、使用しているタグは関係なくそれらのクラスやIDが指定されている箇所全てにそのデザインが適用されます。
命名規約として、どちらも一文字目は必ず英字から始める必要があります。

クラス

ページ内で何度でも使えるため、ページ内で何度も使う装飾はIDではなくクラスを使います。

HTMLファイルの書き方
<p class="red">CSSの基本まとめ</p>
<p class="blue">CSSの基本まとめ</p>
CSSファイルの書き方
p {
  clolor: #999;
}

.red {
  clolor: #fc030f;
}

.blue {
  clolor: #0356fc;
}

ID

同じIDはページ内で使えないため、ページ内で一度しか登場しないような場合に使います。
また、IDとクラスの両方で同じプロパティについて異なる内容で指定されている場合、IDが優先されます。

HTMLファイルの書き方
<p id="red">CSSの基本まとめ</p>
<p id="blue">CSSの基本まとめ</p>
CSSファイルの書き方
p {
  clolor: #999;
}

#red {
  clolor: #fc030f;
}

#blue {
  clolor: #0356fc;
}

特定のクラス/IDの中の特定のタグを装飾したい場合

タグとクラス/IDをセットで指定すると特定のタグのみを装飾できます。

HTMLファイルの書き方
<h1 class="red">CSSの基本まとめ</p> <!-- 赤くならない -->
<p class="red">CSSの基本まとめ</p> <!-- 赤くなる -->
<p id="red">CSSの基本まとめ</p> <!-- 赤くなる -->
CSSファイルの書き方
p {
  clolor: #999;
}

p.red {
  clolor: #fc030f;
}

p#red {
  clolor: #fc030f;
}

Flexboxレイアウトで要素を横並びに配置する

Flexコンテナーという親要素とFlexアイテムという子要素を作成し、CSSでレイアウトを指定します。

HTMLファイルの書き方
<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
</div>
CSSファイルの書き方
.container {
  display: flex;
}

今の設定による表示は下記のようになります。
image.png

要素の配置方法を指定するために、様々なプロパティが用意されています。
下記をCSSファイルの.container{}の中に追加していくことでレイアウトを整えていきます。

  • 子要素の並ぶ向き：flex-direction
  • 子要素の折り返し方法：flex-wrap
  • 水平方向の揃え（左揃え、中央揃え、右揃え、均等配置など）：justify-content
  • 垂直方向の揃え(広げて配置、上揃え、中央揃え、下揃えなど)：align-items
  • 複数行の場合の揃え(広げて配置、上揃え、中央揃え、下揃えなど)：align-content

CSSグリッドで要素をタイル型に配置する

グリッドコンテナーという親要素とグリッドアイテムという子要素を作成し、CSSでレイアウトを指定します。
グリッドアイテム間のスペースをグリッドギャップと言います。

HTMLファイルの書き方
<div class="container">
  <div class="item">item1</div>
  <div class="item">item2</div>
  <div class="item">item3</div>
</div>
CSSファイルの書き方
.container {
  display: grid;
}

今の設定による表示は下記のようになります。
image.png

要素の配置方法を指定するために、様々なプロパティが用意されています。
下記をCSSファイルの.container{}の中に追加していくことでレイアウトを整えていきます。
各子要素についてそれぞれ半角スペース区切りで指定します。

  • 子要素の横幅：grid-template-columns
  • 子要素同士の余白：gap
  • 子要素の高さ：grid-template-rows

CSSグリッドでは親要素からみた子要素のサイズを割合で指定できるfrという単位が利用できます。絶対値であるpxではなくてfrで指定することにより、画面の幅に合わせて自動で要素を伸縮させることが可能です。
例）1fr 1fr 1fr = 1:1:1

デフォルトCSSの初期化

ブラウザで設定されているデフォルトCSSを初期化することにより、ブラウザ間の表示方法の差分をなくすことができます。

<head>
  <!-- 初期化用CSSの読み込み -->
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <!-- 適用するCSSの読み込み -->
  <link rel="stylesheet" href="style.css">  
</head>

参考

スタイルの継承－CSSの基本

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-17T14:17:36+09:00

フォント ガイドラインを作りmixinしよう

前提

  • web開発
  • ReactなどのComponent指向開発
  • styled-compmonents などのmixin機能を持つCSS in JSを使っている
    • SCSS, CSSの場合も考察

概要

「このプロダクトではこれしか使わない」というフォント関係の属性集合を作り、mixinし、フォント周りに秩序をもたらしていきましょう
今回は次の属性を定めていきます

  • font-size
  • font-weight
  • line-height

これらは相互の関係性が非常に高い（ワンセットとして決めて問題ない）と思います
font-familyはもっと上層のbodyに一括指定している事が多いと思うので除きますが、使い分けたいならそれも対象にすると良いかもしれません
colorは流石に自由度が高すぎて一緒には集合化できないと思います。単に定数化で済ませるのが良さそうです

手順の例

1. フォント ガイドラインを作る

次のような集合を決めて作ります
これはAdobe XDでデザイナーさんに作ってもらった例です

  • W: font-weight
  • S: font-size
  • L: 行送り

weightごとにまとめられています
https://note.com/lby/n/ne71f93c72702 にもある通り、XDの行送りとCSSのline-heightは異なるので変換が必要なことに注意です

2. mixin用styleを作る

styled-componentsを用いて次のようなファイルを作る

import { css } from 'styled-components';

const w7 = 700;

export const fontGuideline = {
  pc: {
    w7s40: css`
      font-size: 40px;
      font-weight: ${w7};
      line-height: calc(55 / 40);
    `,
.
.
.
}

3. mixinする

const HogeComponent = styled.div`
  ${fontGuideline.pc.w7s40}
`

メリット

無限の組み合わせから有限の集合になることで、以下のメリットがあります

  • font周りのスタイルに一貫性が保たれる
  • XDなど、デザイナーの指定どおりになっているか確認しやすい
    • 無限の可能性があると、デザイナーの指定が正しいのか実は間違っているのかわからない。フォントガイドラインがあれば、そこになければ間違いだと分かる
    • 特にfont-heightは地味なので指定漏れ・間違いやすいが、集約しつつcalcを使うことで指定通り作りやすい
  • エンジニアだけでなくデザイナーもどこをどういうフォントにするか意識しやすくなる

他の手法 Composition

Reactなどを使っていれば、以下のようにTypography Componentを作ってCompositionする方法もあります

独自に作って適用すると次のような使用感になりそうです

<TypographyW7S40>hogehoge</TypographyW7S40>

スタイルのMixin vs ComponentのComposition

以下のような考えで、ComponentをCompositionするよりスタイルをMixinする方が良さそうと思っています

  • 上記UI Componentのライブラリがそうなっているのは、単にComponentのライブラリとして画一的に便利な機能を提供するためであって、スタイルのライブラリではないから
  • マークアップの構成は極力Semanticにした方が扱いやすく、デザインの関心は分離されて差し替え可能な状態で当ててあるだけ、というのが理想
  • スタイルのためだけのElementが大量に現れてくるのはマークアップが肥大化して見づらいのでは？
  • フォントの関心はweb開発のスタイルのどこにでも現れるアスペクトという感があるのでスタイル部分に自由に差し込みたい

他の場合どうするかの考察

SCSS

http://www.sass-lang.com/documentation/at-rules/mixin
を使えば同じことができます

CSS

素のCSS+HTMLでmixinする手法はclass指定しかないです

デザイン専用のclassがマークアップのあちこちに挟まることを許容する派閥の場合

マークアップ上で明示的にclassでmixinすることで楽ができます
（もちろんCSS in JSも内部的にclassを使っていたりするが、それは隠蔽されている）

.w7s40 {
  font-size: 40px;
  font-weight: 700;
  line-height: calc(55 / 40);
}

<div class="hoge w7s40">hoge</div>

許容しない場合

css上ではなるべくセット同士が分かりやすいような名前で変数化して、
マークアップ上ではセマンティックなclass指定をして、
その中で1つずつ指定するしかないと思います

変数定義の例 (Special Thanks 同僚)：

:root {
  --w7: 700;
  --w7s40: 40px;
  --w7s40h: calc(55 / 40);
}

/* semanticなクラス名 */
.hoge {
  ...
  font-size: var(--w7s40);
  font-weight: var(--w7);
  line-height: var(--w7s40h);
}

<div class="hoge">hoge</div>

CSS modules

composes が使えます
https://postd.cc/css-modules/
この場合もマークアップに適用するのはセマンティックなクラス名にして、その中で使うのが常套手段だと思います

scss-loaderなども導入してSCSSのmixinを使う方法もあります

まとめ

横断的に現れるスタイルの集合作成 + mixinはいいぞ

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-17T13:33:37+09:00

メディアクエリ　max-width min-widthややこしい

https://www.wakuwakubank.com/posts/443-html-css-media-query/

スクリーンサイズが1000px以下の場合に適用

@media screen and (max-width: 1000px)

スクリーンサイズが768px以上の場合に適用

@media screen and (min-width: 768px)

モバイルファースト

最近はモバイルファーストが主流のため、クリーンサイズが拡大していくごとにスタイルを上書きする書き方、つまりmin-widthで記述していくのが主流

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-17T07:55:15+09:00

CSSでpaddingの異なる要素同士をそろえる

結論

box-sizing: border-box;を使います。

解説

例えば、以下のように指定すると、.class2では中の要素の幅が50%になるように表示されるので、borderで囲われる範囲はpaddingの分だけ大きくなってしまいます。言い換えると、1rem+50%+1remの幅になってしまいます。

style.css
.class1 {
  width: 50%;
  margin: 0;
  padding: 0;
  border: solid;
}
.class2 {
  width: 50%;
  margin: 0;
  padding: 1rem;
  border: solid;
}

そこで、以下のように、box-sizing: border-box;を追加することで、要素の幅とpaddingを足したものがwidth: 50%になるので、paddingの異なる要素同士で、幅をそろえることができます。

style.css
.class1 {
  width: 50%;
  margin: 0;
  padding: 0;
  border: solid;
}
.class2 {
  width: 50%;
  margin: 0;
  padding: 1rem;
  border: solid;
  box-sizing: border-box;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-09-17T06:44:44+09:00

　DOMとは　〜ググわか〜

DOM::「Document Object Model」::(ドキュメント　オブジェクト　モデル)

DOMとはこう言うもの

:point_down_tone1:一つググってもの分からないのでいろんなサイトの一言まとめを集めてみた！

"DOMとはマークアップがなされたリソース（Document）をリソース要素（Object）の木構造（Model）で表現し操作可能にする仕組み、またそのモデル"

"DOMとはJavaScriptでhtmlの要素を操作するための仕組みのこと"

"DOMはブラウザがWebページを解釈したもの"

"DOMは、文書のためのプログラミングAPI"

う〜ん、意味がよくわからない・・・

と言うわけで！　いろいろなまとめから分かりやすくまとめてみた。

つまり・・・

１、Webページの基本的なHTML構造を表現したものでページごとに発行されている

２、ツリー構造（のモデル）で表現されていること

３、jqueryやVue.jsとかは、これを参照して操作する対象を探すことができる！

と言うこと！
※初心者向けにイメージしやすく書いているので、多少の語弊があるかもしれません。

実際に見てみよう！

見るのは簡単！DOMを調べるくらいのあなたなら、すぐに理解できる・・・はず！

このページを右クリック　→　検証　→　Elements(検証クリックしたら最初に出てくる左側の部分)
スクリーンショット 2020-09-17 5.54.07.png

これこれ！

単純なモデルですが、＜html＞のなかに＜head＞と＜body＞が入っていて、
＜head＞...＜/head＞の中にはたくさんの設定が入っていたり、
＜body＞...＜/body＞の中にもdivとかaとかpとかいろいろな要素が階層的（ツリー構造）になって書かれていますね！
スクリーンショット 2020-09-17 6.17.37.png

もはやツリー構造の説明になってる・・・
htmlでidやclassをつけると、それがDOMに反映され、目印になっていて、JSなどの言語によってブラウザ上で操作ができるわけです！

言い換えると、ブラウザ上での何かを変更する際は、JSでDOMにアクセスし、その内容やプロパティを変更しているわけです。

ソースコードを書き換えるわけではありません。

もう一度まとめると

DOMとは、

ページごとに発行されるページの詳細な内容を操作可能にするもの

であることがわかった！

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧