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

Vue.jsを使ってそれっぽいTodoリストを作ってみる

SN

7/17 21:26

 プログラミングを学び始めて気が付いたら半年経ったので、今の理解度を確認するために最近触れ始めたVue.jsを使ってシンプルなTodoリストを作ってみました。

 ・デモページ

 ・コードはこちら

 コード...

CSSでマーカーラインを実装しよう

SN

7/16 20:12

蛍光ペンで塗られたようなマーカー線をCSSで実装したのでメモです。

まずは失敗例

擬似要素でマーカー線を実装した例です。


HTML
<div class="box">
<p>今日はとても暑かったです。気温は、...

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

SN

7/16 18:32

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

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

https:/...

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...

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

SN

7/11 17:15



はじめに

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

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

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

cssの擬似要素のメモ

SN

7/10 15:17



cssの擬似要素について


経緯

フォントアイコンと文章を並べた時に、表示位置がずれるのが気になった。

これを解決するために、要素に事前に追加する機能があると知り、利用した。


概要

擬似要素には:...

[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・jqueryページ(自分用)

SN

7/8 02:46



参考になるcss、jqueryページをまとめてみる

・フルスクリーンナビゲーション

https://webdesignday.jp/inspiration/technique/html/4746/

・おしゃれアイコン

https://saruwakakun.com/design/tips/...

[ CSS3 ] 疑似要素で表示した文字を transform する

SN

7/6 09:43

まずリンクの頭に擬似要素を使って >> を付けます。

これで同様のリンク全てにいちいち記述しなくてもOkですね。



HTML

<a href="a001.html" class="linkStyleA">リンクA</a>


CSS

.l...

[ページ遷移しないWebシステム] JavaScriptによるリッチテキストエディタ

SN

7/6 01:20

 CMSを自作しようと思うと、ついて回るのはテキスト編集機能です。HTMLタグをできる限り意識せずに、ある程度の体裁を表現できるものが必要となります。

 そこで必要になるのがリッチテキストエディタですが、...

HTML / CSS / Javascriptの基礎中の基礎(下書きテスト中)

SN

7/4 18:12



HTML / CSS / Javascriptの基礎中の基礎

さて、みなさんは「HTMLって何?」「CSSって何?」「JSって何?」と聞かれた時に、さっ と答えることができますか?

なんとなくは分かっていても、具体的に何をし...

某RPGっぽいUIをCSSとHTMLだけでつくってみたよ

SN

7/3 00:43



背景

CSSだけで色々出来ることが分かってきたので、少し作ってみたよ。

*PC版Chromeでしか確認してないよ!




実装


CheckBoxで状態変化

CheckBoxがチェックされたときだけ状態を変化させる感じ。

HTML5&CSS3デザイン

SN

7/2 23:59



前置き

「HTML5&CSS3デザインブック」を読んだ。

大きくは、近年のWebデザインについて語られていた。

SIerとして、table ベースで作られていた社内向けWebページしかメンテしてこなかったので、<...

GoogleMapsAPIを使ってみる

SN

7/2 14:28

こんにちは.

前回まではwxPythonについての記事を連続5回を書きました.

しかし,今回はちょっとテーマを変えてGoogleMapsAPIについて話したいと思います.

なぜ突然を変えたと考えている人がいるか...

CSSで任意サイズの枠線を%指定のボックスぴったりに収める

SN

7/1 07:09



背景

%指定等で枠線をつけると、枠線は対象の外側に引かれるためサイズがぴったりにならない

これの防止をする。

主として健忘症である未来の自分へのメモ


実装

※Chromeでのみ動作確認済み


css
.cl...

ティラノスクリプトで目パチ・口パクプラグイン(CSS版)

SN

6/29 22:12



CSSアニメーションでティラノスクリプトに目パチを実装する

ティラノスクリプトで目パチなどアニメーションを行うプラグインはいくつかありますが、CSSアニメーションを使ったものはティラノスクリプト本体に...

Media Queries 備忘録

SN

6/27 09:54



横幅380px以下

@media screen and (max-width: 380px) {
#test {
display: none;
}
}



横幅380px以上、かつ高さ750px以下

andでつなぐことで、AND条件設定

@media screen and (min-width: 380px) ...

CSSでのvar + calcでの計算方法

SN

6/25 04:15



背景

css 内で変数定義して計算をしたかったので動作などを確認した。

備忘録的な…

※Chromeでしか動作確認しておりません


はじめに

cssでも変数定義して計算ができる。

下記のような感じ。


...

accepts_nested_attributes_forのupdate_onlyについて学ぶ他_100DaysOfCodeチャレンジ8日目(Day_8:#100DaysOfCode)

SN

6/25 01:06



はじめに

この記事はTwitterで人気のハッシュタグ#100DaysOfCodeをつけて、

100日間プログラミング学習を続けるチャレンジに挑戦した8日目の記録です。


動作環境


ruby 2.4.1
Rails 5.0.1



現在学習...

[Materialize]カレンダーをローカライズする

SN

6/23 12:50



Materialize(1.0.0-rc.1)でカレンダーをローカライズする

最近はWebから離れていたので、htmlやjsやcssの進化の速さには驚くばかりです。

Materialize(cssフレームワーク)を触る機会があって、カレンダー...

nth系疑似クラスの引数は書き順に気をつけよう

SN

6/19 21:27

意外とハマりそうになりました。

/* 誤 */
p:nth-child(5+n) {
...
}

p:nth-child(n5) {
...
}

/* 正 */
p:nth-child(n+5) {
...
}

p:nth-child(5n) {
...
}


掛け算の方は間違えることは無いと思い...

htmlとcss初心者がずっこける備忘録

SN

6/19 19:35



初心を忘れがちな自分に捧ぐ、ここで詰んだな備忘録

技術力が雑なくせに年数だけ稼いでしまった私なので初心はもうだいぶ昔に消えて行きました。

そもそも何につまづいていたかをまとめましょう。


リン...

html隙間問題の確認箇所

SN

6/19 19:12



htmlなぜか隙間が埋まらない時に確認したい備忘録

疲れ過ぎている時、眠い時、そもそも技術がない時期。必ずぶち当たる壁をぶち壊すための備忘録


その1.「cssリセットしてる?」

htmlはタグがものすごく個...

【CSS】Bulmaまとめ(Columns編 その1)

SN

6/19 18:02

Bulmaを使ってて何度も公式ドキュメントを見て翻訳してを繰り返しててなかなか覚えられなかったので、メモがてら適当にまとめていこうと思います( ˘ω˘ )

※基本的にはgoolge先生の翻訳です

公式ドキュメント<...

CSSでfont-sizeの単位はremを積極的に使いたい

SN

6/19 17:11



CSSでのフォントサイズ指定

pxを使うと、ブラウザを拡大したときとかにどうやら反映されないらしい。


じゃあどうする?


emを使う


親要素のフォントサイズを基準に倍率を指定するため親要素によってはフ...

CSSコードライブラリー

SN

6/18 15:35

仮テキスト

Javascriptコードライブラリー

SN

6/18 15:33

___________

※まだ仮の記事です!!

 ̄Ⅴ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄



 

よく使うライブラリの使い方をまとめました。

デモは後で入れます。


lazysizes

画像の遅延読み込み

1.「lazy...

PR:bitflyer

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