WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

フォントサイズremについて

emを使ったフォントサイズ

emは親要素のフォントサイズをそのまま継承します。一見すると判りやすいですが構造が複雑になってくると、複利計算されてしまい判り難くなってしまいます。


remを使ったフォントサイズ

次にremを使ったフォントサイズの指定です。
「rem」とは、「em」や「%」の場合、親要素(が基準)に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素(最上位の要素)に対して相対的に指定する単位の事です。

remを使う時の注意点

remをそのまま使うと計算式が非常に複雑になるので、注意が必要です。
主要ブラウザーのデフォルトの文字サイズである16pxを基準値として使い回せるように、まずはベースフォントサイズを作ります。htmlに「%」を使って、基準値サイズの「16px」を「10px」になるように記述します。こうすることで、フォントのサイズを「16px」にするためには「1.6rem」、「20px」にするには「2rem」という風にわかりやすい値で指定できるようになります。
また、bodyl要素に「font-size: 1.6rem;」を指定しないとfont-sizeを指定していない箇所のfont-sizeが全て10pxになってしまうので注意が必要です。

html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */


h1 {
font-size:4.0rem; /* 40px */
}

html要素に62.5%を入れずに変数を使って指定する方法

mixin用ファイルに

@mixin font-size($size) {
  font-size: ($size / 16) + rem;
}

各スタイルに

h1{
@include font-size(40);
}

スマホ時にフォントサイズを画面幅に応じて可変にする

フォントサイズを可変にするには上記のremにvwとcalcを合わせて使用します。
ルート(html)のfont-sizeをcalc(100vw / 32)とすることで、iPhoneSEなどの画面幅320pxのときは基準のフォントサイズを10pxとし、ルートより下ではremを使っていくという方法です。


@media (max-width:640px){
html{
font-size: calc(100vw / 32);/*iPhoneの最小サイズ320pxの時に10px*/
}
h1 {
font-size:3.2rem;/*320pxの時32pxに*/
}
p {
font-size: 1.4rem;/*320pxの時14pxに*/
}
}

最新のcssについて

ユーザーのアンケート結果からその年のCSSの流行りや動向がわかるThe State of CSS 2020というサイトの中で、今後さらに利用頻度が増していくであろう、新しいプロパティをいくつか試してみましょう。
ただ、新しいプロパティはブラウザごとに対応状況が違うので、必ずcan I use 等で対応状況を確認しましょう。


backdrop-filter

backdrop-filterは要素の背景をぼかす事が出来ます。filterプロパティと似ていますが、filterは適用した要素自体がボケますが、backdrop-filterは適用した要素の背後の領域の色味やぼけ具合が変化します。なので、基本的にはRBGAとセットで使う事がほとんどです。

使用例

monomode.co.jp


対応ブラウザ状況

Edge:OK
Firefox:要設定変更
Chrome:OK
Safari:要ベンダープレフィックス



scroll-snap

scroll-snapを使うと、画面をスクロールしたときに特定の画面領域で止まるように制御できます。縦スクロールだけでなく横スクロールにも対応しています。

対応ブラウザ

scroll-snapはすべてのモダンブラウザで対応しています。


alvarotrigo.com

aspect-ratio

例えば、要素の幅に対してアスペクト比を使って高さを設定したい場合、今までは1:1ならpadding-top: 100%、16:9ならpadding-top: 56.25%というようにpaddingを使う方法が一般的でした。その計算や記述が不要になり、CSSで基準のwidthを指定し、aspect-ratioに比率を指定するだけでheightが自動的に算出され、アスペクト比を保つことができます。



See the Pen
aspect-ratio
by yachin29 (@yachin29)
on CodePen.


対応ブラウザ状況

Edge:OK
Firefox:要設定変更
Chrome:OK
Safari:NG



2020.stateofcss.com


www.mitsue.co.jp



新しいリセットcss

リセットcssも対象ブラウザが変わる度に変わっていきます。

/* Box sizing rules */
/* Box sizingの定義 */
*,
*::before,
*::after {
  box-sizing: border-box;
}
 
/* Remove default padding */
/* デフォルトのpaddingを削除 */
ul[class],
ol[class] {
  padding: 0;
}
 
/* Remove default margin */
/* デフォルトのmarginを削除 */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}
 
/* Set core body defaults */
/* bodyのデフォルトを定義 */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
 
/* Remove list styles on ul, ol elements with a class attribute */
/* class属性を持つul、ol要素のリストスタイルを削除 */
ul[class],
ol[class] {
  list-style: none;
}
 
/* A elements that don't have a class get default styles */
/* classを持たない要素はデフォルトのスタイルを取得 */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
 
/* Make images easier to work with */
/* img要素の扱いを簡単にする */
img {
  max-width: 100%;
  display: block;
}
 
/* Natural flow and rhythm in articles by default */
/* article要素内の要素に自然な流れとリズムを定義 */
article > * + * {
  margin-top: 1em;
}
 
/* Inherit fonts for inputs and buttons */
/* inputやbuttonなどのフォントは継承を定義 */
input,
button,
textarea,
select {
  font: inherit;
}
 
/* Remove all animations and transitions for people that prefer not to see them */
/* 見たくない人用に、すべてのアニメーションとトランジションを削除 */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


coliss.com



IE11のサポートが切れれば使用出来るHTMLやCSSの便利な機能

Windows OSのサポートには期限があり、各OSの期限は、Windows 7は2020年1月14日で終了済みで、Windows 8.1は2023年1月10日に終了となります。
Windows 7のサポート期限が過ぎた事で、今後IE11のサポートを切るという選択が一層増えてきます。
HTML5やCSS3にはIE11がサポートしていない為、使えない便利な機能が多くあります。そういった便利な機能が今後は使えるようになって来るので、知っておきましょう。


HTML

rel=“noopener"

target="_blank"を使用するとリンク先を別のタブで開く事が出来ますが、セキュリティ上の脆弱性があり、リンク先のページで負荷の高い JavaScript が実行されていると、リンク元のページのパフォーマンスが低下するおそれがあります。それを避ける事が出来るのがこの「rel=“noopener"」属性です。

<a href="http://example.com" rel=“noopener" target="_blank">アンカー</a>

input type="color"

16進数表記のテキストフィールド。カラーピッカーのUIが用意されている。

<input type="color" value="#f6b73c">

meter要素

<p>オーブンの温度: <meter min="200" max="500"
  value="350">350 degrees</meter></p>

details, summary要素

CSSJavaScriptを使用せずにアコーディオンが実装できる。

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

button form Attribute

送信ボタン(button submit)をform要素の外からでも利用できるようになる。

<form action="outout.php" method="post" id="form1">
  <input type="text" id="name" name="name">
</form>

<button type="submit" form="form1" value="Submit">Submit</button>

picture要素

srcset属性

CSS

flow-root

clearfixを利用しなくてもfloatを解除できる。overflow:hiddenも必要ありません。

div {
  display: flow-root;
}

all

すべてのプロパティを一括して指定する。

button {
  all: unset;
}

unset

プロパティをリセットし、親からの継承された場合は継承値、そうでなければ初期値を設定します。

<style>
.box{
color: green;
}
p {
color: red;
font-size: 20px;
}
.bar{
all: unset;
}
</style>
</head>
<body>
<div class="box">
<p>このテキストは赤です。</p>
<p>このテキストも赤です。</p>
<p class="bar">このテキストです。</p>
</div>
</body>

それ以外にも便利なものがたくさんあります


qiita.com

vs codeのdiff機能を使う

diff機能を使ってvs codeで差分をチェック

vs codeのcompare機能を使って、ファイルの差分を簡単にチェック出来ます。




shift+control(command)+pでコマンドパレットを出し「Compare」と入力すると、下の画面のように選択できるので実行する。
f:id:yachin29:20210713132845p:plain



この中の「クリップボードとアクティブファイルを比較」を使って見本となるコードをコピーして、差分チェックをしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
<h1>クリップボードのデータ</h1>
</body>
</html>

githubでissue管理をする

基本的にサイト制作はチームで行うのですが、未経験者であっても「githubのissue」機能を使って、チーム開発を見据えたサイト制作をしてみましょう。


gitの初期化

git init


gitのユーザー登録

git config --global user.name "Sample"
git config --global user.email sample@example.com

issue機能を使う

  1. githubポートフォリオ用のリポジトリーを作る
  2. readmeファイルの作成
  3. githubのissue機能を使って今日の作業目標を決める
  4. issueに対応する作業ブランチを作る
  5. ローカルで作業が終わったらcommitして、リモートリポジトリにpushする。コミットする際にコミットメッセージをissue番号にすることでcommitがgithub上のissueと結びつく
  6. githubでプルリクエストを作る
  7. githubでプルリクをマージする。コンフリクトがないことを確認してボタンを押す。本来なら責任者が再鑑してからマージする。
  8. githubでissueをクローズし、いらないブランチを削除
  9. マスターブランチにチェックアウトしリモートリポジトリからpullして最新状況を取得する
  10. 1に戻って次のissue(作業)を作る


qiita.com



note.nkmk.me

タイムラインをサイトに埋め込む

年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。


Vertical Timeline

codyhouse.co



さらにCodyHouse Framework 本体のデータも必要なのでgithubからダウンロードしておきましょう。

github.com





<div class="cd-timeline js-cd-timeline">
<div class="container max-width-lg cd-timeline__container">


<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 1</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2019/10</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->




<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 2</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2020/03</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->


</div><!-- container -->
</div><!-- cd-timeline -->

githubでreadmeファイルを作成する

READMEというのは、GitHub等で公開されるソフトウェア(リポジトリ)の説明書きのことです。
そのリポジトリーがどういった趣旨の物なのか、しっかりと説明しましょう。

readmeに記載する物

  • プロジェクトのタイトル
  • プロジェクトの概要説明
  • プロジェクトのURL
  • サイトのスクリーンショット画像
  • 使用言語
  • 使用している機能
  • 目次
  • 過去の経歴など

https://github.com/0918nobita/Portfolio




マークダウン記法(md)
githubのreadmeはmd記法なので、md記法を使って書いていきましょう。
qiita.com