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

IE11対応必要事項

SN

7/18 16:56

LPの受託開発をしていて、IE対応について調べたことをまとめた。

自分のメモ用。随時更新。


IE11が対応していないこと


CSS


flex box(特定の条件下で壊れる)


参考





JS


ES6の表記


arrow functi...

HTMLのidとclass

SN

7/18 08:09



初心者がHTMLとCSSを勉強してややこしかったこと

 HTMLとCSSを勉強して1週間が経ちました。Progateの「HTML & CSS 初級編」とドットインストールの「【旧版】HTML基礎文法入門」で勉強してきました。最初...

ReactのアニメーションにReact Poseが便利

SN

7/17 17:22

Poseというライブラリがシンプルに書けて便利だったので、いくつか実装例を紹介します。また最後の方にstyled-componentsと組み合わせた時の体験もよかったので、その方法についても書きます。

ちなみにReact v1...

CSSカスタムプロパティ(変数)などをstylusで使う

SN

7/17 14:47

hsl()とかもそうですが、

literal CSS 頼るしかなさそう。


css
@css {
.test {
--hue: 50;
background: hsl(var(--hue), 100%, 50%);
}
}

.test
width 100px
height 10...

【備忘録】cssでSPの横・縦によってスタイルを変更する

SN

7/17 10:21

知ってたはずなのに忘れたので。

@media screen and (orientation: landscape) {
/* 横向きの場合のスタイル */
}

@media screen and (orientation: portrait) {
/* 縦向きの場合のスタイル */
}

よく使用するURLのメモ(HTML,CSSがメイン)

SN

7/17 03:35



.gitignore系の設定一覧

http://co.bsnws.net/article/300


HTMLの効果系


特殊文字の一覧

http://www.shurey.com/js/labo/character.html


普通のHTMLをJade(pug)に変換するwebサービス

http://www.html...

CSSフレームワーク「Bootstarp」と「Bluma」でログイン画面を作ってみた

SN

7/16 23:27



作成したログイン画面

・Bootstrap



・Bluma




経緯

ずっとBootstrapばかりで実装していたので、他のフレームワークを使って比較してみようと思いました。


読み込み


Bootstrap


<link rel=...

bootstrap(4.1.1)で色を変更・指定する方法は?

SN

7/16 21:16



bootstrapとは?

cssフレームワーク。

フレームワークとは、使いやすいように先人がまとめてくれたもの。

(ライブラリとAPIとの違いは勉強中)

もともとTwitter bootstrapと言われていたが、今ではb...

flexboxで段組をするときは、大量のテキストが入った場合を想定しよう

SN

7/16 18:32

気付いている方は、けっこういるかも知れませんが…

Bootstrap4の可変グリッド(col-{breakpoint}-auto)には、本来の幅を超える改行が含まれないテキストが入ったときに崩れる不具合があります。

https:/...

vh, vwを使って上下左右中央揃えを実現する方法

SN

7/16 16:13

個人的に結構クリビツテンギョウのK点超えだったので記録しておきたいと思います。

以前こちらのICS MEDIAさんの記事を拝見して「おーめちゃ便利や!」と思ったのですが、親要素のheightもついでに画面いっぱい...

fieldsetタグ内のButtonタグにdisplay:flexを適用する

SN

7/16 13:55

fieldsetタグ内のButtonタグにflexboxスタイルを使用しても期待通りに動かない。

そんな時はdivタグでwrapperを作成する

Flexboxが適用されない例

<fieldset>
<legend>データタイプを選択<...

CSSのtransform:rotateZ,rotateX,rotateZそれぞれの動き

SN

7/16 11:45



背景

transform:rotateのX,Y,Zの動きが分かりにくかったのでまとめました。

完全の個人的なメモ…


transform:rotate各種動き

下記のような縦軸、横軸にして交差したところは足しこんでいます。

縦軸...

CSSでhoverでafter要素で文字を表示するとプルプルする件

SN

7/16 01:34



背景

悩んでしまったのでここの記しておきます。

それは今さっき…transformの動きを確認しようとしたときでした。

変化済みの見ても分かりづらいのでhoverしたら設定内容と設定更新をアニメーションでや...

cssアニメーションについて

SN

7/15 18:22

CSS TransitionとCSS Animationの2つの機能がある。


CSS Transition,Transform

単純な動きのアニメーションを実装する時に利用する。

トグルボタン、ドロワーメニュー、など


Transitionについて

transl...

aタグの使い方、アンケートフォームの作り方

SN

7/15 14:21









HTML&CSS(初級編)での学び#2



URLを文章に付随する方法

アンケートフォームの作り方









URLを文章に付随する方法



 例えば、お店の情...

Riot.jsで数字のランダム選択

SN

7/15 03:04



背景

会社内でコンペみたいな発表会があったのですが、ランダムにチーム番号を選ぶ要件がありました。

フリーソフトを利用していたのですが、広告が頻繁に表示されうざそうだったので作ってみた。


完成...

VSCodeでhtmlを書いてるときにLiveプレビュー

SN

7/13 19:26



VSCodeでhtmlをLivePreviewしたい!!!


LivePreviewとは?

Webpackなどで普段フロントの開発をしている人はお馴染みだと思うのですが、エディターでSaveした瞬間にブラウザのプレビューが更新される事です...

要素のfadein,fadeoutをjavascriptとcssで実装してみた

SN

7/13 12:17



要素のfadein,fadeoutの実装したのでメモ


今回作ったもの

ページをリロードした瞬間に要素をフワ〜とfadeInで表示させ、

5秒後にフワ〜と消すものを実装した。


コード

HTML

<div class="wrapper"...

連続したCSSアニメーションの実装

SN

7/13 01:06



はじめに

keyframesを使ったcssでのアニメーションは、gif画像の埋め込みと比べると読み込み速度も早く、パフォーマンスも良く、動きも滑らかです。

gif のようにどのようなアニメーションでも表現できるわけ...

innerWidthとouterWidthのちがい

SN

7/12 18:20

普通にheightで取得しているとよく指摘されるので、そろそろ覚えないと、、。

下記ページの説明画像を写しました。


参考ページ

https://www.buildinsider.net/web/jqueryref/009



エレメントの高さをと...

Sublime Text3でEmmetのベンダープレフィックスが自動挿入されるのを無効にする

SN

7/12 14:48

「Sublime text」 → 「Preferences」 → 「Package Settings」 → 「Emmet」 → 「Setteings-User」で以下を貼り付ければOK


Emmet.sublime-settings
{
"preferences": {
"scss.autoInsertVendorPr...

CSS で要素をスクロールに追従させる

SN

7/11 17:15



はじめに

こちらのサイトのイベントページのように、

ある要素をスクロールしても特定の位置に固定したい時がありました。

今までは javascript を使って実装していましたが、CSS でもできるので今回...

アイコンフォント(Font Awesome 等) を使ったリストマーカーをリスト要素のみで実装する

SN

7/10 13:15

i タグを使いたくないときの書き方。

サンプルは Font Awesome 5 を使用。


描画




コード

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<tit...

iframeで埋め込むEmbedな動画を画面いっぱいにCSSだけでレスポンシブ対応で表示させる方法

SN

7/9 17:55

画像の場合、background-image: url()にbackground-size: coverを指定することで、領域いっぱいに拡縮して画像が表示されるようにすることができます。


はじめに


目的

YouTubeやVimeoやDailymotionなどの動...

ヘッダーを固定した時のページ内リンクのズレを解消する方法

SN

7/9 14:13

ヘッダーを固定する時

position:fixed;を使用して固定をすると思いますが、

ページ内リンクを行う時にヘッダー文の高さが被ってしまいます。

例えばheaderの高さがheight:100px;だったとすると100px分被...

CSS Flexbox が覚えられない人のための確認ツール

SN

7/9 11:31

Flexbox がまったく覚えられないので自分用の確認ツールを作ってみました。

ボックスをクリックすると子要素の設定もできます(ただし1つだけ)

See the Pen CSS FlexBox playground by Akira Ikeda (@akicho8...

[WIP] Good CSS, Bad CSS

SN

7/9 07:41



!important


Good CSS



使われている箇所が少ない

インラインスタイルを打ち消していない

なぜ!importantを使っているのか、すべての箇所について説明できる


Bad CSS



使われている箇所が多い

CSSフ...

Promise - 見た目もスッキリ!順番通りに処理する方法

SN

7/9 01:28



                               ※脚色を含みます。


はじめに

この記事では、Promiseを使って、狙い通りに処理を順番に実行する方法を紹介します。

JavascriptでFirebas...

めっちゃランダムな css animation

SN

7/8 22:21

雑にランダムなアニメーションを作りました。





サイト: https://lain.elzup.org/

コード: https://github.com/elzup/lain-time/blob/master/src/components/Fact/index.js

抜粋

const kaos = p => k...

Nuxtの開発でBootstrap4を使ったはいいもののcssが変更できない時は→

SN

7/8 10:51

bootstrap/scss/配下の_custom.scssで独自に設定すれば良い・・・・。

❯ ll node_modules/bootstrap/scss/
-- file --
_alert.scss _carousel.scss _forms.scss _list-group.scs...

PR:bitflyer

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