What's New Qiita

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

  • 投稿日：2020-12-15T21:44:34+09:00

[HTML] レスポンシブデザインのためのmetaタグ viewport

metaタグ viewport

HTML 自分用の覚え書きです。

レスポンシブデザイン（タブレット、スマホの場合に表示を変えたい場合）には、metaタグ viewport を指定します。

CSSのメディアクエリにて、ウインドウ幅の指定により表示が変わるように記述します。

index.html
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
stylesheet.css
/* PC向けのCSS */
/* menuクラスに適用されるCSS */
.menu{
  background-color: #00FFFF;
}

/* ウインドウ幅が1000px以下のとき */
@media (max-width : 1000px) {
  /* menuクラスに適用されるCSS */
  .menu{
    background-color: #00FF00;
  }
}

/* ウインドウ幅が500px以下のとき */
@media (max-width : 500px) {
  /* menuクラスに適用されるCSS */
  .menu{
    background-color: #FF0000;
  }
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-12-15T21:43:30+09:00

【初心者でもわかる】1文字だけ〇〇する方法

どうも7noteです。1文字だけにいろいろなCSSを当てる方法について書いていきます。

1.「1文字目を大きくする」

sample1.png

文中の一番最初の文字を大きくします。
例では文字サイズを2倍にして、太字と赤文字にしています。

style.css
p:first-letter{
  /*適用したいCSS*/
}

/* 記述例 */
p:first-letter{
  font-size: 200%;
  font-weight: bold;
  color: #f00;
}

※疑似セレクタ:first-letterはインライン要素には効かないので注意！

2.「1文字だけ回転・反転させる」

sample2.png

たまに回転していたり、反転していたりする文字を見かけます。（例えが思いつかない・・・）
CSSで文字の反転や回転を表現する時はtransformを使うのがよいでしょう。

index.html
<p>あいう<span>え</span>お</p>
style.css
/* 180度回転 */
p span {
  transform: rotate(180deg);
  display: inline-block;
}

/* 左右反転 */
p span {
  transform: scale(-1,1);  
  display: inline-block;
}

※trnasformを複数重ねがけする時は半角スペースで繋ぎます。

p span {
  transform: rotate(180deg) scale(-1,1);
}

3.「1文字だけ消す」

sample3.png

2でやった<span>でくくる方法と同じです。
当てるCSSを変えるだけで様々なCSSに対応させることができます。

style.css
/* 消した空間は残す場合 */
p span {
  visibility: hidden;
}

/* 消した空間も消す場合 */
p span {
  display: none;
}

まとめ

1文字だけや部分だけ変更してアクセントをつけたりする方法でした。
インパクトをつけたり、他とは差別化を図れるちょいテクです。

おそまつ！

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

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

cubic-bezier を知る。

前提

CSS でのアニメーション実行スピード調整に cubic-bezier を使用したとき、何をしているのかあまり理解ができていなかったので既出の記事も多くあるかと思いますが自分の中で咀嚼するため書きました。

cubic-bezier

CSS3 でアニメーションを行うときのイージングの値は linear, ease, ease-in, ease-out, ease-in-out が用意されており、用意されいてるイージング以外を設定したい場合に cubic-bezier(x1,y1,x2,y2)を用います。

名前の通りベジェ曲線の X軸, Y軸 を使ってイージングスピードの設定を細かくおこなう。

イージングの値

値 どういう動きなのか
ease 【初期値】開始と完了を滑らかにする
linear 一定の速度
ease-in ゆっくり 始まる
ease-out ゆっくり 終わる
ease-in-out ゆっくり 始まり ゆっくり 終わる
cubic-bezier(x1,y1,x2,y2) 数値で細かく指定

アニメーションさせたいときのプロパティ

animation は animation-timing-function,
transition は transition-timing-function の値に入力する。
※ブラウザは IE11, Edge も対応しているのでべンダープレフィックスは基本的には不要

使い方

SCSS で使用したい数値をまとめて変数化しておくと便利。

hoge.scss
$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);

.hoge {
  transition: all .2s $easeInQuad;
}

数値入力がよくわからん

細かなイージング調整に数値入力が必要なので扱いが難しく感じますが、ジェネレータに頼れば視覚的に操作できます。積極的に使用します。
https://cubic-bezier.com/

イージング参考に素晴らしいページ
http://easings.net/

まとめ

アニメーションさせるときに cubic-bezier 以外の値ばかり使っていたので、これからは積極的に使っていきます。

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

【CSSアニメーション】Webクリスマスカードを作ってみた

N高ネットコース2年の @YukiMihashi です。
この記事は N高等学校 (1) Advent Calendar 2020 の15日目の記事です。

CSSアニメーションで遊びながら制作した Webクリスマスカード 2020 の解説をしていきます。

本当は100%CSSと書きたいところですが、手紙の内容が時間によって変わるという仕組みや、モーダルウィンドウ表示の仕組みの簡略化のため、一部JavaScriptを使用しています…

概要

手紙やツリーのイラストがあり、クリックするといろいろ起こる、というWebのクリスマスカードです。アニメーションなので実際に見てみてください。（PC推奨ですが、スマホサイズでも動きます。IE対応はしておりません）
image.png

GitHub レポジトリ: https://github.com/yuki384/christmas-2020/
作品ページ: https://yuki384.github.io/christmas-2020/

アニメーションの実装

3種類のアニメーションがありますが、すべてCSSで実装しています。

飾りがゆれるアニメーション

image.png

まずはじめに、ベルや丸い形の飾りなどが左右に揺れるアニメーションを解説します。

animationを使えば、ずっと見た目を動かすことができます。アニメーションが何割まで進んだタイミングで動かすか、どのように動かすか、などが指定できるので、表現の幅はかなり幅広いですね。

CSSは以下のようになっています。

#kazari {
  transform-origin: 140px 700px; /* 回転の中心を設定 */
  animation: rotate 2s ease-in-out -1s infinite alternate; /* アニメーションを再生 */
}
@keyframes rotate {
  0% {transform: rotate(6deg);} /* 角度を変える */
  100% {transform: rotate(-6deg);} /* 角度を変える */
}

回転

角度を変えるにはtransform: rotate();を使いました。アニメーションの動きなどを設定するには、@keyframesを使います。ここでは単に初めと終わりを設定しているだけですが、細かくタイミングを設定することもできます。

CSSのコード
@keyframes rotate {
  0% {transform: rotate(6deg);}
  100% {transform: rotate(-6deg);}
}

アニメーション

CSSのanimationを使用し、先程書いたゆらゆらと左右に回転するアニメーションを再生します。すべて時間をバラバラに調整することで、揺れが不自然になりません。ここではinfiniteでずっと揺らしていますが、一回のみの再生とすることもできます。

CSSのコード
#kazari {
  animation: rotate 2s ease-in-out -1s infinite alternate;
}

回転の中心を合わせる

このままだとtransform: rotate();の中心がずれてしまっているので、transform-originを設定します。これは回転させながらxとyの値を微調整していくしかありませんね。

CSSのコード
#kazari {
  transform-origin: 140px 700px;
  animation: rotate 2s ease-in-out -1s infinite alternate;
}

これで、飾りが左右に揺れるようになりました。

プレゼントが震えるアニメーション ₍₍⁽⁽?₎₎⁾⁾

image.png

次に、ツリーの下にあるプレゼントが震えるアニメーションを解説します。
CSSアニメーションは何秒かおきに再生する、ということがJavaScriptのようにはできないので、工夫しました。
0%から85%の間は動かさず（同じ値を設定する）、85%~100%の間に動くようにしています。あとは、animation-delayやanimation-durationを調整して、程よい動きにしましょう。

#present {
  animation: yure 5s ease-in-out infinite alternate;
}

@keyframes yure {
  0% {transform: translate(2px);}
  85% {transform: translate(2px);}
  90% {transform: translate(-2px);}
  95% {transform: translate(2px);}
  100% {transform: translate(-2px);}
}

手紙が開くアニメーション

image.png

最後に、手紙が開くアニメーションの解説をします。

HTMLは以下のようになっています。checkboxがあるのは、checkboxがチェックされているかどうかで手紙の表示・非表示を切り替えているためです。
手紙はこのcheckboxの<label>となっているので、クリックで表示される、という仕組みです。

SVGの<g>要素は、他のSVG要素をグループ化するものです。ここでは、手紙の上部分のパスを<g>でまとめ、そのタグに idを設定しています。

<input type="checkbox" id="text-check">
<div class="text">（手紙の内容）</div>
<div class="letter">
  <label for="text-check">
    <svg 省略> 省略 <g id="letter-top"> 省略 </g> 省略 </svg>
  </label>
</div>

この時点では、こうなります。クリックしても、✅が切り替わるだけです。
image.png

そこで、見た目をつけていきます。

CSSは以下になります。

#text-check {
  display: none; /* チェックボックスは非表示に */
}
#letter-top {
  transition: all .6s; /* 状態変化のスピードを設定 */
  transform-origin: 0 6%; /* 回転の中心を設定 */
}
#text-check:checked ~ .letter #letter-top {
  transform: rotateX(180deg) rotateZ(2deg); /* チェック時の角度を設定 */
}

細かい解説をします。

チェックボックスは非表示にする

チェック状態で要素の状態を切り替える（後述）だけなので、見た目的には不要です。

CSSのコード
#text-check {
  display: none;
}

回転する

チェックボックスがチェックされている時は、そのあとにある.letterという要素の子要素#letter-topを回転する、というCSSを書きます。
「チェックされている時」は疑似セレクター :checkedで、兄弟要素は一般兄弟結合子(~) で、指定しています。

3次元の回転であるrotateX(), rotateZ()を使ってリアルな回転の動きを再現します。

また、先程のゆらゆら揺れる飾りと同じように、回転の中心を設定しました。

CSSのコード
#letter-top {
  transform-origin: 0 6%;
}
#text-check:checked ~ .letter #letter-top {
  transform: rotateX(180deg) rotateZ(2deg);
}

スピードを設定する

今回は動きの実装でanimationを使わないため、状態が変化するときのスピードをtransitionで設定することで、アニメーションしているような見た目をつくります。

CSSのコード
#letter-top {
  transition: all .6s;
}

おまけ: モーダルウィンドウの実装

今回はアニメーションについて主に解説したので、手紙クリック時の文章のモーダルウィンドウの実装についての説明は軽くにしておきます。
最後に解説した手紙と同じように、checkboxを使って、チェック状態であれば表示、でなければ非表示、とします。閉じるための要素とトリガーとなる要素をそれぞれ<label>にすれば、簡単に実装が可能です。

ちなみに、プレゼントなどの飾りをクリック→イラスト表示 の流れはCSSではなく、JavaScriptで実装しました。

おまけ: イラスト→SVG

これは技術とはちょっと異なりますが…イラストを書いた方法です。
気になった方が入れば参考にしてください?

  1. コンビニで買ったSALASAというボールペンで自由に書く
  2. それをiPhoneで撮影しコントラスト等いじって白黒画像にする
  3. Adobe Illustratorで「画像トレース」する
  4. 「ライブペイント」で色を付ける
  5. SVG書き出しをする

まとめ

以上、CSSアニメーションを使った簡単な実装例の紹介でした。このように、CSSでも様々な動きをつけることができます。
今回ご紹介したのはシンプルなものですが、CSSの世界に興味を持っていただけたら幸いです。

GitHub レポジトリ: https://github.com/yuki384/christmas-2020/
作品ページ: https://yuki384.github.io/christmas-2020/

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

Lightning Web コンポーネントでサードパーティ製 CSS を適用する

この記事は Salesforce Platform Advent Calendar 2020 - Qiita 第22日目の投稿です。

サードパーティ製のスタイルシートを使いたい

Lightning プラットフォーム上での開発では通常、Lightning Experience にあわせて Salesforce の Lightning Design System(SLDS)を利用して頂くのをお勧めします。これは Lightning Experience の既存ユーザーがカスタムコンポーネントを利用する際の学習コストを下げるためでもあります。

しかし、企業によってはこだわりのデザインを Lightning Experience でも使いたい場合やサードパーティの CSS を適用したい場合が発生します。この記事では、 Salesforce の Lightning Web Component の開発で既存の CSS を適用する方法をご紹介します。

サードパーティ製 CSS は CSS モジュールを作成して読み込む

コンポーネントから SLDS 以外のカスタム CSS を読み込む方法は 2 つあります。

その中でも、自身で作成したものではなくサードパーティ製のスタイルシートを読み込む際には、後者のCSS モジュールを作成し、スタイルシートから import する方法がおすすめです。

loadStyle() による非同期読み込みは、コンポーネントのスコープが効かない

一旦 Salesforce の静的リソースにスタイルシートをアップロードし、JavaScript の loadStyle() で呼び出す方法は、スタイルシートがページ全体に読み込まれるため、サードパーティ製のスタイルシートではクラス名の競合が発生しスタイルが干渉してしまう事があります。
例として、予め静的リソースにアップロードしておいた Bootstrap のスタイルシートを、JavaScript の loadStyle() で読み込んでみます。

path/to/lwc/bootstrapExample/bootstrapExample.js
import { LightningElement } from 'lwc';
import bootstrap from '@salesforce/resourceUrl/Bootstrap';
import { loadStyle } from 'lightning/platformResourceLoader';

export default class BootstrapEdit extends LightningElement {
    renderedCallback() {
        loadStyle(this, bootstrap + '/css/bootstrap.min.css');
    }
}

そして、HTML テンプレートで Bootstrap のクラスを指定します。

path/to/lwc/bootstrapExample/bootstrapExample.html
<template>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Bootstrap - レコード編集</h5>
            <form>
                <div class="row">
                    <div class="col col-6">
                        <div class="form-group">
                            <label>姓</label>
                            <input type="email" class="form-control"
                                   placeholder="Enter email"/>
                        </div>
                    </div>
                    <div class="col col-6">
                        <div class="form-group">
                            <label>名</label>
                            <input type="email" class="form-control"
                                   placeholder="Enter email"/>
                        </div>
                    </div>
                    <div class="col col-6">
                        <div class="form-group">
                            <label>Eメール</label>
                            <input type="email" class="form-control"
                                   placeholder="Enter email"/>
                        </div>
                    </div>
                </div>
                <div class="mx-auto" style="width: 200px;">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-danger ">キャンセル</button>
                </div>
            </form>
        </div>
    </div>
</template>

以下は、コンポーネントをページに配置した時のスクリーションです。少し分かりづらいですが、右上のアイコンが見切れてたり、ボタンの位置も上下に少しズレているのが分かります。他にもページヘッダやタブのフォントも変わってしまっています。
このように、読み込んだスタイルシートがページ全体に影響しており、本来スタイルが適用されるべきでない場所にまで適用されているのが分かります。

Screen_Shot_2020-12-15_at_11_54_38.png

このような干渉は、スタイルシート側でセレクタにプリフィックスなどを追加する事で解消できますが、巨大なスタイルシートのセレクタを一つ一つ修正していくのは現実的ではありません。そのため、コンポーネントのスコープがきちんと適用される方法でスタイルシート読み込む必要あります。

スタイルシートから import することで、コンポーネントのスコープを適用する

Lightning Web コンポーネントではスタイルシートのみを持つコンポーネントを作成する事ができます。これはファイル構造上、コンポーネントの一種に見えますが、実際には単なる CSS モジュールで、他のコンポーネントのスタイルシートからインポートする事ができます。また import されたスタイルはコンポーネント内の HTML にだけ適用されるので、コンポーネント外のスタイルと干渉する事もありません。先程の例と同様に Bootstrap のスタイルシートを読み込んでみましょう。

まずは、 Bootstrap のスタイルシートを　CSS モジュール化します。 このスタイルシートはそのままだと、ファイルあたりの文字数制限を超えてしまうので、構文上問題の箇所で ２つのモジュールに分割し bootstrapStyleA.css と bootstrapStyleB.css として作成しました。また、サードパーティ製のスタイルシートは Web コンポーネントでの利用を想定してないことが多いので、 不要なセレクターなどは Salesforce が提供する VS Code の拡張のメッセージに従って削除、または変更しておきます。

path/to/lwc/bootstrapStyleA/bootstrapStyleA.css
/* Bootstrap スタイルシートの前半部分を貼り付け */
html{--blue:#007bff;--indigo:#6610f2;--purple:#6f42....
path/to/lwc/bootstrapStyleB/bootstrapStyleB.css
/* Bootstrap スタイルシートの後半部分を貼り付け */
@media (min-width:576px){.navbar-expand-sm{-ms-fl....

次に、コンポーネント側の CSS ファイルから、上で作成した２つの CSS モジュールをインポートします。

path/to/lwc/bootstrapExample/bootstrapExample.css
@import 'c/bootstrapStyleA';
@import 'c/bootstrapStyleB';

上で作成したコンポーネントをそのまま編集している場合は JavaScript による静的リソースの非同期読み込みは動かないようにしておきましょう。

path/to/lwc/bootstrapExample/bootstrapExample.js
import { LightningElement } from 'lwc';
//import bootstrap from '@salesforce/resourceUrl/Bootstrap';
//import { loadStyle } from 'lightning/platformResourceLoader';

export default class BootstrapEdit extends LightningElement {
    renderedCallback() {
        //loadStyle(this, bootstrap + '/css/bootstrap.min.css');
    }
}

これで、デプロイしてみると下のように、コンポーネントには Bootstrap のスタイルが適用されながらも、その他のスタイルに影響がないのが分かります。
Screen Shot 2020-12-15 at 11.48.29.png

まとめ

今回は、Lightning Web コンポーネントでサードパーティの CSS を適用方法について紹介しました。スタイルの干渉でお困りの方は一度試して見てはいかがでしょうか？

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

【初学者向け】positionの絶対値と相対値の考え方。

cssのpositionって要素を自由な位置に配置できるので非常に便利ですよね。
改めて調べてみると絶対値やら相対値やらと非常に分かりずらい・・・なので自分なりに分かりやすく解説していきたいと思います。

準備

以下の画像を使います。
bee.png
seal.png

ベースのコードは以下になります。

html
<div class="parent">
  <img src="./img/seal.png" class="seal">
  <img src="./img/bee.png" class="bee">
</div>
css
.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
}

positionを使ってみる

早速position使っていきますが、その前にpositionの概念を知っておきましょう。
positionとは、要素を自由な位置に配置できるプロパティです。
プロパティの値には、static,fixed,relative,absoluteがあります。
今回はrelative,absoluteについての解説です。

まず簡単なabsoluteから解説していきます。
absoluteは絶対値と言う意味で、top,bottom,left,rightの位置指定のプロパティを組み合わせることで要素の順番や位置を無視して絶対的に配置させることができます。これはなんとなく想像できるかと思います。

そしてrelativeですが、こちらは相対値と言う意味です。
相対値とは必ず比較対象がないと成立しません。ではCSSの場合、比較対象とは何かというと今要素がいる位置です。なのでabsolute同様、位置指定のプロパティを組み合わせることが出来るのですが、今いる位置からどのくらい動くかを直接指定することが出来ます。

ちなみにこの位置のことを基準値などと言います。

実演

理論がわかったところで、実際に動かしてみます。

image1.png

今の状態はこうですね。ちなみにアザラシと蜂を作ったつもりですｗ
コードを追加します。蜂を動かします。

css
.bee{
  position: relative;
  top: 100px;
  left: 200px;
}

image2.png

どうでしょう？蜂が元いた場所の、上から100px、左から200px動きました。このようにrelativeは位置を指定することで元いた場所を基準に好きな場所へ移動させることができます。

ただしこう言った使い方はあまりしません。実はrelativeの基準点を上手くいかしabsoluteと合わせて使うことが殆どです。

relativeとabsoluteと合わせて使う。

これが一番オーソドックスな使い方です。
概要としては、親クラスにrelativeを指定して基準点を作り、absoluteで基準点からの絶対値を指定します。

コードを変えていきましょう。
※先程の.beeのコードは一旦消して置き換えましょう。

css
.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
  /* position:relative;でこのクラスが基準のポジションになる。 */
  position: relative;
}
.seal{
  position: absolute;
  top: 0;
  left: 0;
}
.bee{
  position: absolute;
  top: 0;
  left: 0;
}

image3.png

まず基準点は色のかかった四角いブロック、つまり親要素です。そして子要素であるアザラシと蜂はabsoluteでtop0,left0がかかっています。これは左上に配置することを指定してます。

ちなみに画像が重なって見えるのは、float同様、要素の回り込みが発生しているからです。
floatと違うのは、後から配置した要素は基本的には上に重なります。

ではそれぞれの画像の位置を少し変えてみましょう。

css
.seal{
  position: absolute;
  top: 50px;
  left: 100px;
}
.bee{
  position: absolute;
  bottom: 0;
  right: 0;
}

image4.png

まずアザラシは、基準点の上から50px、左から100pxの位置に配置しました。
次に蜂は、したから0px、右からも0pxの位置つまり、右下に配置しています。

応用編

基礎的な使い方がわかったところで少し応用的な使い方をします。
それはrelativeを使わず、absolute単体で使います。ではコードを変更します。
※relativeを消します。

css
.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
}

どうでしょうか？親クラスの枠外へ外れてしまいました。
親クラスのrelativeがないと自動的に bodyが基準点になります。なので画面の左上、右下を基準にして画像が配置されてしまいます。

image5.png

要素の重なりを調整する。

先程「後から配置した要素は基本的には上に重なります」と解説しましたが、これを調整する方法をお教えします。

css
.parent{
  /* レイアウトのコード */
  width: 500px;
  height: 500px;
  background: beige;
  margin: 100px auto 0;
  position: relative;
}
.seal{
  position: absolute;
  top: 50%;
  left: 50%;
}
.bee{
  position: absolute;
  top: 50%;
  left: 50%;
}

cssはこちらを使います。

画像のabsoluteにはそれぞれtop50%,left50%を指定しています。
基準点、つまり親要素の上から高さの50%、左から幅の50%

image6.png

画面をみると画像が重なってます。アザラシくんの目に蜂の針が刺さってます。(そりゃ困った顔をしている訳だ・・・)
なので蜂を後ろに追いやります。z-indexと言うプロパティを使います。これは重なり順を調整するCSSで初期値を0として、数字が大きければ大きいほど最前面に配置されます。

css
.seal{
  position: absolute;
  top: 50%;
  left: 50%;
  /* 重なり順を１つ前に出す */
  z-index: 1;
}

image7.png

これで重なり順を調整できました。

最後に

今回はpositionについて簡単にまとめてみました。
アニメーションと組み合わせたものをおまけとして載せたかったのですが時間の都合でここまでにします。手が空き次第追記します、ではお疲れ様でした。

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

日付別

タグ一覧