Qiita - CSS3タグが付けられた新着投稿

Vue.jsでCSS3のアニメーションを再スタートする

SN

9/14 09:55

テンプレートがこんな感じで

<div class="animation" v-bind:class="{ start: this.hoge }"></div>


データをこのように用意しておいてfalseではなくtrueになったら.startというclassを付けること...

background-imageをレスポンシブする際にpadding-topが認識されない現象を対処する(Edge)

SN

9/13 23:56

まず初めてにこちらのエントリをご覧ください。

https://qiita.com/39_isao/items/009f2382f87988039215

こちらに記載されている背景画像をレスポンシブする方法が非常に便利で,

background-imageを使って...

簡単なハンドライティングっぽいアニメーションの実装

SN

9/5 20:02



SVGをゴニョゴニョやる?

一つだけ大きくどーん!って置くだけならそれでもいいですけど、違う単語でいくつもパラパラと置くとなるとそんなことやってられないですよね。


ではそれっぽくCSSだけでやってしま...

JavascriptとCSSで簡単な文字アニメーション

SN

9/1 20:23



作るもの

文字列をバラバラにしてランダムに動かす。

画面をタップするごとに 整列⇔シャッフル が切り替わる。

See the Pen Shuffle Strings by snst.lab (@snst-lab) on CodePen.




テストペ...

久しぶりに大量のCSSを書いて思ったこと

SN

9/1 11:36

すごく久しぶりに大量のCSSを書きましたので、思ったところまとめてみました。


今回しない話


CSS in JS
Scoped CSS


今回するのは、全部がグローバルに突っ込まれる、オールドファッションなCSSの話です。

...

【プラグインなし】横スクロールなHTML要素の上下にスクロールバーを設置する

SN

8/29 13:56

通常、横スクロールなHTML要素であれば、要素の下にスクロールバーが出ますが、以前案件で、HTML要素の上にもスクロールバーを設置するというものありました。

その際に使用した、プラグインは使わずにjQuery...

クラス名に任意の数字を記入し、プロパティの値として扱う[HTML.CSS]

SN

8/26 10:28

cssのクラス名に任意の数字を指定し、その値をプロパティとして扱います。

レイアウトを組む際に、例外の意図的な余白がある。

コンポーネント一覧ページなど、実装するページでは無いが見通しを良くした...

HTMLで部分的にイタリックにする方法

SN

8/25 16:04



なんのための記事か?

知らないことはすげー怖い。

て思ったから備忘録も兼ねてシェア。


HTMLで記述される文字を部分的にイタリック体にするには?


方法1(超簡単)


HTML
<p>前部分<i>イ...

viewportによるサイズの設定と、アドレスバーのふるまいについて

SN

8/24 16:49



やること

画面いっぱいにリキッドな構成でレイアウトしたいんだけど、スマートフォンのアドレスバーの挙動がよくわからん、、

ということで、どう書くとどうなるか検証。


前提

・viewportは幅だけ設定<...

今さら気づいたcssショートハンドの使い方

SN

8/23 15:09



cssショートハンドは適切に使えてるか

cssのショートハンドってあるじゃないですかぁ。

コードの量を 少しでも 少なくするために、


css
li{
background:#fff;
}



とか background-colorを使えばいい...

HTMLのインライン要素とブロック要素について

SN

8/17 17:45



タグごとの区別

インライン要素 ;width,height,margin,paddingを指定できない横並び要素

注意; marginとpaddingは左右のみ指定可能

ブロック要素 ; width,height,margin,paddingを指定できる縦並び...

GoogleフォントがIE11で正常に表示されなくなった

SN

8/17 14:21

備忘録代わりに。


何が起こったか

IE11でGoogleフォントの『Rounded M+ 1c』を使ったサイトを見ると、フォントが正常に表示されない。

(『さわらび明朝』などほかのフォントや、アルファベットだけは正常...

よくつかうかもしれないCSSアニメーション

SN

8/15 17:31



ゆっくり点滅2回

.hoge-blink{
animation: anime1 2s ease -2s 3;
-webkit-animation:anime1 2s ease -2s 3;
}
@keyframes anime1 {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframe...

mix-blend-mode

SN

8/15 08:59



mix-blend-modeについて

DOMエレメントを重ねた時の見え方を指定するCSSプロパティ

PhotoshopやIllustratorで使うオーバーレイがcssできる


対応状況



参考:https://caniuse.com/#search=mix-blend-mo...

メディアクエリとviewportの使い方について

SN

8/14 12:13



メディアクエリとviewportを正しく使おう。

この記事はメディアクエリ?、viewport?と思う方に向けて書きました。

最初に言っておくとメディアクエリとviewportは一緒に使おう!


メディアクエリって何...

jqueryでの1文字ずつのアニメーションについて

SN

8/13 17:35

ジェイクエリーの1文字ずつのテキストアニメーションで複数行対応する方法で困っています

splitで1文字ずつ配列にいれてforeachで配列をspanでくくりアニメーションさせているのですが

brタグなども1文字...

CSS 3 快速入門 By 彭彭

SN

8/11 16:07

➀ CSS3 快速入門

1.1 關於 W3C 技術規格的定制和實踐

w3c:http://w3schools.wang/

caniuse: https://caniuse.com/

1.2 簡單的常用設定介紹

opacity 透明度

border-radius 圓角

b...

紙の帳票からHTML帳票を作る方法

SN

8/9 15:34



この記事について

現物の紙の帳票を、デザインをできるだけ変えずにHTML帳票に変換する際の作業手順について整理しました。

印刷に使うブラウザを指定できるという前提になりますが、今のブラウザなら詳細な...

CSS設計~FLOU~

SN

8/9 11:27



はじめに

今まで命名規則にBEMを取り入れていました。ただ、scssファイルの分割等まではしておらず、、、。

それではいけないと、再度CSS設計を調べたのですが、何がいいのかわからず。 

現状のBEM...

CSSでかわいいチェック柄

SN

8/9 00:13

画像を使わず、CSSだけでかわいいチェック柄を作りました。

オタクだからチェック柄が大好きなんだよな




1. ガンクラブチェック


1.css
.container1 {
padding: 150px 15px;
background-color: white;
...

position : fixed で指定したナビボタンを任意の位置に配置する

SN

8/8 23:53

ハンバーガーボタンをスクロールに追随するように配置するために position:fixed を指定しました。

position:fixed を指定すると、配置する位置は top や left 、 right などで表示領域全体に対しての位置指定し...

HTML/CSS3/JSだけで(名刺|名札カード)を量産するテンプレートを作った

SN

8/6 23:46

勉強会の時に、名札を作ることがあると思います。

参加者増えると、ひとつひとつ入力するのも大変ですよね。

というわけで、名札カードを量産できるテンプレートを作ってみました。

名刺サイズで作っ...

IOS11.4で疑似要素を使って三角を作る時の注意点

SN

8/3 10:41

cssの疑似要素にborderを使ってうまく三角ができなかったのでメモ。

高さを指定していないことが原因かな?


index.html
<div class="arrow-wrap">
<span class="arrow"></span>
</d...

CSSのフォントサイズ単位「rem」はどんなときに有用なのか

SN

8/2 18:30



はじめに

3年ほど前でしょうか、一時期いたるところで持ち上げられていたCSSのフォントサイズ単位「rem」。

ですが、モダンブラウザ全盛の今でも有用に使われているシーンは少ないように思えます。(使っ...

CSSアニメーションをとにかくそれっぽく使えるようになる記述方法

SN

8/2 14:57



CSSアニメーションの指定プロパティが多い件について。

多い。多いよ!(めんどくさがり)

というわけで、指定プロパティを忘れたときにぱっと検索できるようにメモ。

最低限必要な記述方法は前回の記事...

margin collaps

SN

8/2 11:12

目次
マージン・コラプスとは
ブロックの上下マージンが融合……?
兄弟要素のマージン・コラプス
今回のまとめ

マージン・コラプスとは
ブロック間の隙間を空けようとマージンを調整する際に、思ったとおり...

Flexboxで痛い目にあったのでfloat代わりに使う私的メモ

SN

8/1 10:25

戦場から離れて隠居してたら、

Flexboxで痛い目にあったのでfloat代わりに使う私的メモです

こういう状態のHTMLをfloat代わりに良い感じに使いたい




samle.html
<ul class="containaer">
&l...

CSSアニメーションをとりあえず動かすことだけを考えた記述方法

SN

7/31 13:44



CSSアニメーションをぱっと記述できない。

何言ってんの?と言われそうですが、できないもんはできない。

原因はわかってる。何がどうなってんのかよくわかってない。

というわけでめんどくさがりの自...

CSSアニメーションとかいうやつがよくわからない人へ

SN

7/30 16:52



CSSアニメーションとかトラなんとかとか・・・

CSS3が広く使われるようになってずいぶん経ちました。

私も重宝してますCSS3。

でもCSSアニメーションがよくわからない。

特にanimation・transitio...

Checkboxのトグルスイッチをシンプルに書く

SN

7/30 16:09

こんにちわ。

作成中のWebページでトグルスイッチを実装しようと調べていた所...

いずれの解説サイト様も参考にはなったのですが、親要素やセレクタが複雑な構造をしていて、素人には難解でした。

と言う事...

PR:bitflyer

bitFlyer ビットコインを始めるなら安心・安全な取引所で