はじめに

CSSを使って、装飾をしているといっつもクラス名に対してスタイルを適用させていて、
別にできていないわけではないけど、これって全ての要素に対してクラス名を付けなきゃいけない形になってしまっていました。なんか効率が悪いというか、クラス名をつけるまでも無いような要素もあるし…とモヤモヤしていたので、クラス名を付けずに、スタイルを思うままに適用させる方法は無いかと、調べました。

本日から何日かに分けて紹介します。

基本

要素にスタイルを適用させる場合は、要素名のみを記述します。

h1 {}
p {}
div{}

クラス名にスタイルを適用させる場合は、.クラス名の記述をします。
「.」←が大事！

.section {}
.content {}

同じクラス名をもつ全てにスタイルを適用させます。

ID名にスタイルを適用させる場合は、#ID名の記述をします。
「#」←が大事！

#section {}
#content {}

ちなみに、同じID名は付けられません。

どうも7noteです。transformを複数設定する時など、複数指定する時の方法まとめ

初心者の頃にすぐに書き方を忘れてしまったので、忘れてもいいようにまとめます。
アルファベット順で並べています。

background➡半角スペース[ ]とスラッシュ[ / ]を使う

style.css

div {
  background: #333 url('background.png') no-repeat border-box left top / contain fixed content-box;
  /* 色　画像　繰り返し　基点　位置左右 位置上下　/ サイズ　スクロール位置　背景領域*/
}

サイズを入れるときにはスラッシュ[ / ]を入れる。

background-xxx➡カンマ[ , ]でつなぐ

style.css

div {
  background-image: url("./images/hoge.png"), url("./images/fuga.png");
  /* 背景1, 背景2, 背景3・・・ */
}

[hoge.png]が前面、 [fuga.png]が背面になります。
background-xxx系は基本的にカンマ[ , ]でつなぐことができます。

・background-color
・background-image
・background-repeat
・background-origin
・background-position
・background-size
・background-attachment
・background-clip

border➡半角スペース[ ]でつなぐ

style.css

div {
  border: 1px #ff0000 solid;
  /*太さ 色 種類 */
}

※順不同

box-shadow➡半角スペース[ ]でつなぐ

style.css

div {
  box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
  /* 左右位置 上下位置 ぼかし 広がり 色 内側 */
}

「左右位置 上下位置」の2つがあれば動かせます。

font➡半角スペース[ ]とスラッシュ[ / ]を使う

style.css

div {
  font: italic bold 80%/150% "ＭＳ Ｐゴシック";
  /* スタイル 太さ サイズ / 行の高さ フォントの種類 */
}

※スモールキャピタル（font-variant）は省略しています。

行の高さ（line-height）を入れる前にはスラッシュ[ / ]を入れる。

font-family➡カンマ[,]でつなぐ

style.css

div {
  font-family: Georgia, serif;
  /* フォント１, フォント2, フォント3 ・・・ */
}

左側のフォントが優先的に効きます。フォント１がなければフォント2。フォント２がなければフォント3・・・と続きます。

margin・padding➡半角スペース[ ]でつなぐ

style.css

div {
  /* 上下 左右 */
  margin: 10px 20px;
  padding: 10px 20px;

  /* 上 左右 下 */
  margin: 10px 20px 50px;
  padding: 10px 20px 50px;

  /* 上 右 下 左 */
  margin: 10px 20px 30px 40px;
  padding: 10px 20px 30px 40px;
}

transform➡半角スペース[ ]でつなぐ

style.css

/* 例） **位置変更**と**回転**を同時に書く */
.trans {
  transform: translate(-50%, -50%) rotate(45deg);
}

translateとrotateの間に半角スペースを空けることで複数指定することができます。

まとめ

margin paddingとかはよくつかうので、覚えられますが忘れやすいものも多いので書き方をまとめました。
参考になれば幸いです。

おそまつ！

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

概要

Web開発に興味が出てきたのでとりあえず一通り必要そうなものを触ってみることにしました。
ただ触るだけだと忘れてしまいそうなのでメモとして学んだことを書いてみます。
ここにあるコードはほぼ全てProgateで出てきたものです。

HTMLの仕組み

HTMLはタグと呼ばれる印をつけることでテキストに意味付けをする言語。

見出し

以下のように囲むと見出しという意味になる。

<h1>Hello World</h1>

見出しは全部で6段階ある。

<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<h4>Hello World</h4>
<h5>Hello World</h5>
<h6>Hello World</h6>

試しに上のコードをqiitaのエディタに貼り付けてみると文字の大きさが変わることを確認できた。

Hello World

Hello World

Hello World

Hello World

Hello World

Hello World

見出し以外の文字

見出し以外の文字には<p>をつける（pはparagraphの意味）。

コメント

コメントは<!--と-->で囲む。

リンクの作成

以下のように<a>で囲むとリンクを貼り付けることができる。

<a href="https://prog-8.com">Progateへ</a>

qiitaのエディタにそのまま貼り付けてみると以下のようになった。
Progateへ

画像の表示

画像の表示は<img>タグでできる。テキストを囲むことはないため、終了タグは必要ない。

<img src="https://prog-8.com/images/html/beginner/wanko.jpg">

qiitaのエディタにそのまま貼り付けてみると以下のようになった。

リスト

リストを作成するには以下のように書く。
<ul>で囲むと黒丸<ol>で囲むと数字がつく。

<ul>
    <li>hoge</li>
    <li>fuga</li>
</ul>

• hoge
• fuga

<ol>
    <li>hoge</li>
    <li>fuga</li>
</ol>

1. hoge
2. fuga

CSSの仕組み

CSSはwebページをデザインするための言語。
HTMLの要素に文字の色や配置を与えることができる。
HTMLとは別ファイルに記述する。
以下のように書くと、h1の要素の色を赤に変えることができる。
#ff0000はカラーコードと呼ばれる。
googleで検索するとたくさんの色が見れる。
例：https://www.colordic.org/
　：https://html-color-codes.info/japanese/

h1 {
  color:#ff0000;
}

フォント、背景色、サイズを指定

h1 {
  font-size: 20px;
  font-family:"Lucida Grande";
  background-color:#f3f372;
  height:80px;
  width:200px;
}

概要

フロントエンドを作成する上で役に立つサイトまとめてみました！！

メインレイアウト

bootstrap

みんな大好きBootstrap。説明不要。

Bootstrap

tailwindcss

cssのフレームワークでBootstrapを抜いて1位になったcssフレームワーク。
様々なレイアウトを提供している。

tailwindcss

Google Fonts

googleが提供するfontで、google fontsをfont familyに設定するとどのコンピュータからでもfontが崩れずに表示できるという利点がある。

Google Fonts

使いかた

アニメーション生成

Animista

rotateやscaleアップなどのアニメーションを自動生成してくれるサイト。

Animista

Animate On Scroll Library

スクロールアニメーションを提供。

Animate On Scroll Library

slick

簡単にスライダーを実現。

slick

css生成

ストライプ生成

css背景のストライプを生成。

Pure CSS Stripe Generator

グラデーション生成

cssのグラデーションを生成。

CSS Gradient

背景の境界線を生成

背景をモダンなサイトのような形状にしてくれるcssを生成してくれるサイト。

Shape Divider App

動くグラデーションの生成

背景が動くグラデーションを生成できる。

FUZE

各パーツ

ボタンレイアウト

120種類以上のボタンのサンプルとcssを提供。
コピペで使える。

CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！

ハンバーガーメニュー①

ハンバーガーメニューを好みに合わせて生成。

Burger Generator

ハンバーガーメニュー②

17種類のハンバーガーメニューを提供。

Tasty CSS-animated hamburgers

スライドサイドメニュー

サイドメニューを実現できるプラグイン。

Drawer

素材サイト

モダンなサイドバー

今風なサイドバーを紹介。

今風に作られたスライド式サイドバーのコードスニペット9選

スライダー

jqueryで作成されたスライダーの紹介。

jQueryスライダープラグイン9選！スライドショーを手軽に作成

デザイン参考

モダンなデザインを参考にできる。

【初心者必見】Webデザインを楽にするコツ&便利なサイト集！

Adobe XDデザインカンプ

Adobe XDのデザインカンプの紹介がされており、ダウンロードしてコーディングの練習ができる。

Adobe XDの無料テンプレート配布サイト

学習サイト

keyframeアニメーション

keyframeを利用したアニメーションについてよくまとまっていて非常に学びになる。

CSSでアニメーション！「animation」と「keyframes」の使い方のおさらい

ボタンの中の要素の上下左右中央揃え

FontAwesomeのアイコンを真ん中に表示したい

はじめに

HTMLのブロック要素と width とかとの関係について、注意すべき点をまとめた説明が少ないようなので、浅くとも広くここに書いてみます。

このドキュメントでは記述を簡単にするため、横方向のみについて書きます。

また、この記事中でのサイズの指定は、全て px を使います。
実際には auto 指定やパーセント指定も多く使いますが、これらのテクニックはそれだけで大きな話になってしまうので、他の記事に譲ります。

同じく簡素化のため、margin, border, padding は(上下左右の)単一指定のみ使います。下記文章中で時々「×2」が出てくるのは、左右で同じ値を使っているためです。

margin, border, padding, width・height の関係

基本的な事ですが、margin, border, padding, width の関係は、以下のようになっています(box-sizing が未指定の場合)。

CSSで記述する「width」は、一番内側の要素(content)のサイズのことです。

上図を見ても分かるとおり、ブロック要素全体のサイズは、左右 margin と左右 border、左右 padding、width のサイズの合計になります。
そして、このブロック要素全体の位置指定を、left や top でおこなうことになります。

margin、border や padding の初期値は 0 なので、何も指定していなければ、要素全体のサイズと width が一致します。
しかし実際のレイアウトでは margin や padding を多用するので、要素を入れ子にした場合、スペースが広がりがちになります。
margin と padding のどちらを使うかというのは、border や background があるときは明確ですが、それ以外に auto 指定をどこでやるべきかという話も絡んできます。このドキュメントでは追求しないので、別途調べてください。

余談になりますが、多くのブラウザには開発者ツールが備わっていて、要素の大きさを調べることが出来ます(例えば Chrome だと、「表示」メニュー → 「開発 / 管理」 → 「デベロッパーツール」を使います)。
開発者ツールで要素(Elements)を選ぶと要素のサイズが表示されますが、この時のサイズは margin を除外したサイズが表示されます。
これは、上で説明した「要素全体のサイズ」とは意図が違うので注意してください。
お手軽なのでつい見てしまうのですが、このドキュメントで説明する使い方には向きません。

横並びや縦並び

要素を親子関係にしようとする時には、親のサイズをきちんと計算してあげないと、意図通りの表示にならないことがあります。

例えば、border や padding 指定を含む span ブロックを横に2つ並べ、その2つをくっつけた状態で全体的にセンタリングしたい時は、以下のように span の要素サイズを2倍した値を、親(ここでは div.parent)の width に指定することになります。
親の width に大きめな値を書いて誤魔化すと、中央より若干左側に寄った表示になってしまいます。

span {
    display: inline-block;
    margin: 4px;
    border: 2px solid gray;
    padding: 10px;
    background-color: Aqua;
    width: 200px;
    height: 60px;
    /* この span ブロック全体の横幅は、(4+2+10)*2 + 200 = 232px */
}

div.parent {
    background-color: violet;
    margin: auto;   /* 左右の margin が最大まで広がるので、センタリングになる */
    width: 464px;   /* span を2つ並べるので、span全体横幅の2倍を指定 */
}

<div class="parent">
 <span>左側のコンテンツ
 </span><span>右側のコンテンツ
 </span>
</div>

なんだか html が見にくいですが、span を1行ごとに分けて書いてしまうと、2つの span の間に意図しない隙間が入ってしまう(改行コードがスペースに変換されてしまう)ので、こういう風に書いて対処しています。

また、この div.parent では「margin:auto」としているので、padding は指定していません(もし padding を指定しても横方向はセンタリングのままで変化せず、縦方向だけが広がったように見えます)。
勿論、div.parent 内部に別の要素(例えば文字など)を加えたい場合は、padding 指定を書いた方が良いでしょう。

background-size との関係

background で塗られる範囲は、border の内側です(最初の図を確認してみてください)。

このため例えば background-color を使って四角形を描く時、四角形の大きさを width・height に設定して padding も設定してしまうと、思ったより大きな範囲が塗られてしまうことになります。
塗られる大きさを正確に指定したくて padding も使いたい時は、width・height には padding×2 を引いた値を設定すれば良いことになります。

background-color の四角形を正確なサイズにしたいという人は少ないかも知れませんが、background-image を使う時は正確なサイズにしたいと思うでしょう。

背景画像として設定すると言う事は要素の内側に何かしら表示したい訳で、すると padding 指定が必要になります。
padding が 0 で無いという事は、width・height を変更するしかありません。
そして、background-image でも、background-color の時と同様な計算をすれば良いのです。

下記の例では、大きさが 200x60 の画像を background-image に使っています。

div.test {
    margin: 4px;
    border: 2px solid gray;
    padding: 10px;
    background-image: url(img_200.jpg); /* 画像サイズは 200x60 */
    background-repeat: no-repeat;
    background-size: 200px 60px;
    width: calc(200px - 10px * 2);  /* 画像width - padding×2 */
    height: calc(60px - 10px * 2);  /* 画像height - padding×2 */
}

background-size にはオリジナルの画像サイズを書いて、width・height は padding×2 を引いた値を設定しています。
こういう時、calc は役立ちますね。ブラウザの対応状況はコチラです。
背景画像を拡大縮小したくない場合は、この計算方法を使えば良いです。

背景画像を拡大縮小した方が良い場合は、background-size に cover や contain の値を指定します。
この時、border の内側と画像の縦横比率が違う時は、画像をトリミングするか、隙間が出来るかの選択をしなければいけません。
大ざっぱに説明すると、

• cover は、内側に画像を隙間無く表示しようとしますが、内側に収まらない部分がトリミングされます。
• contain は、画像全体をトリミングせずに表示しようとしますが、内側の余った部分は background-color で塗られます(隙間が出来ます)。

背景画像を拡大縮小するにしても、画像はトリミングされたくないし、要素ブロックに余白も作りたくない場合は、以下のような計算をすれば良いことになります(横幅を基準にした場合)。

画像比率 = (width + padding×2) ÷ 画像width
height = 画像height × 画像比率 - padding×2

(background-size は、cover か contain のどちらでも良い)

box-sizing: border-box を使う時

ここまでの説明は、box-sizing が content-box (デフォルト値) での話でした。

box-sizing が content-box の時は、一番内側の content で確保したい大きさを width・height に書けば良いので、内部に画像を置いてどちらかの幅をピッタリ合わせたい時などは分かりやすかったです。

しかし一方、border や padding の値を変えただけでブロック要素全体のサイズが変化してしまい、その変更が外側にどんどん伝搬してしまう(画面全体に影響が出ることもある)という使いにくさもありました。
レイアウトを試行錯誤している最中は内側にあるブロックほど変更をしたくなるのに、内側にあるブロックほど変更の影響が大きく出てしまうのです。

そういう時は、box-sizing:border-box を指定すると、変更が楽になります(IE8以上で使えます)。

上図の通り、box-sizing:border-box では、width と height が、border の外側サイズ指定になります。

box-sizing:border-box は、padding の変更が外側に及ばなくなるだけでなく、全体をパーセンテージ指定にするときにも使いやすいです。
しかし、box-sizing の無指定(content-box)と border-box を入り交じりで使うと、メンテナンス性が悪くなるように思います。使うなら全ての div に適応とかした方が良いかもしれません(邪道？)。

border-box 指定を使えば padding サイズが気にならなくなるので background-image が楽になりそうですが、border も併用する時は注意が必要です。
border-box は「border の外側までのサイズ」ですが、background は「border の内側のサイズ」だという微妙な違いがあるためです。
border 付きで背景画像を表示したい時は、width に 「background-size + border」を設定してやらないと、トリミングされてしまいます。

ハマり所

以上いろいろ書きましたが、結局、ハマり所はどこなのかというのをまとめてみます。

個人的に「ブロック全体のサイズ」で一番ハマったのは、ブラウザの開発者ツールです。
ツールでブロックを選択すると、margin 部分まで色を変えて教えてくれて、しかもサイズ表示が margin の外に付くのです。
こんな表示されたら、margin の外側のサイズを表示しているのだと勘違いしてしまいますよね。ご注意ください(私も昔、数時間を無駄にしました)。

もう1つのハマり点は、改行コードのスペース化けです。
改行を除去するツールもありますが、人間が読める HTML では無くなってしまいますね。
かと言って、改行を除去する以外の対処方法は無いようです(?)。
content 内の改行をスペース化しない CSS 指定とかあれば良いのですけどね。

background-image も、サイズの考え方が独特になるので注意が必要ですね。
background-image を使うよりも、普通に div の中で position:relative などを使って要素を重ね合わせた方が、構造は複雑になりますが結果的にはメンテしやすくなるように思います。
メディアクエリでの画像の切り替えなども、img の方がやりやすいですしね。

おわりに

「包含ブロック」という言葉があるのですが、「ブロック要素全体」とは微妙に定義が違うみたいなので、ここでは使いませんでした。ブロックとボックスの違いなどもちょっと曖昧です。すみません。

文章中の間違いや補足などがありましたら、コメントにて指摘して頂ければ幸いです。

対象者

・バックエンドエンジニアを志す人
・web開発初学者
・ECサイトを作成しようと思っている人
・初学者の勉強仮定を見たい方

はじめに

こんにちは！
この投稿はその④の続きです。

前回は年末年始を挟んであんまり実装が進まない状態でした。
実装する機能の洗い出し、スケジュール、実装を進めていきました。
並行で行っている開発との兼ね合いもあり今回の更新内容は少なめです。

目次

1.今回の作業報告
2.反省点
3.次回までの目標
4.最後に

1.今回の作業報告

まずは改めて実装する機能を洗いだしてスケジュールを立て直しました。

ざっくり機能を洗い出してスケジュールを立てています。
スケジュール崩れは間違いなく起こると思うので毎日スケジュールを引きなおすように設定しました。

ECサイトの作成としてメールでのログイン機能の実装に取り掛かりました。
現在は実装途中です。さっそくスケジュールが崩れましたので調整しなおします。

2.振り返り
作業項目を改めて書き出した事により作業内容が明確になったのは良かったかと思います。
項目の抜け漏れはあるかと思いますが、それは実装進めていくなかで分かってくるのかなと思います。

スケジュールを立てたことにより多少やることが明確になりました。
ただ、作業ボリュームが不明確の中で立てているのであんまり当てにならないのかな
と思っています。今回はペースメーカー的な役割で利用するようになると思います。

締め切りよりかなり前に作業が終わるように設定していますが、結局、ギリギリまでかかるのかなと思っています。

3.次のステップ：引き続き実装！
機能ごとに予定を立てたのであとは実装を進めるだけかなと思います。
次回は実装結果の報告と振り返りがメインになりそうです。

4.次のステップ：最後に
今回のECサイトの制作にあたりqiitaの記事をはじめて書くことを習慣にしました。

・作業途中の自分の思考の振り返りことにより反省点の明確化になっている
・思い出すことによる記憶の定着が起こっている
・反省点を踏まえてのアクションプランへの転換のしやすい

などを感じており書いてよかったなと思っています。

文章の見直しなどほとんど行っておらず個人の雑記のようになっているので
読まれる投稿にして技術コミュニティに貢献していければと思っています。
(文章の書き方もちゃんと振り返らないと良くならないだろうな・・)