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

Bootstrap4+jQueryでカレンダーを使ってみよう!

SN

9/14 14:23

ども!デザインエンジニアのMasaです。




なんのために共有するのか?

初心者が自走できるようになるまでのあしあとを残すことによって、後から学習する人がどういう道のりをたどればいいのかわかるように...

cssのプロパティに*を書き方

SN

9/13 16:54

* {
padding: 0;
margin: 0;
}


これはわかる

改修中にこんなコードを見た

.block{
float: left;
*display: inline;
}


書き間違えのゴミかと思って調べたらしっかりと意味があった


IE7...

Webスクレイピングマスターが教える「スクレイピング対策」

SN

9/13 09:38



はじめに

こんな記事書いてる人です。

Python Webスクレイピング テクニック集「取得できない値は無い」JavaScript対応@追記あり2/28

Python Webスクレイピング 実践入門

【毎秒1万リクエスト!?】Go言語...

BetterTweetDeckでアイコンを非表示&カラム間余白を小さくするCSS

SN

9/13 00:21



BetterTweetDeckでアイコンを非表示&カラム間余白を小さくするCSS

GoogleChrmeの拡張機能「Better TweetDeck」はとても便利ですね。

デフォルトでも十分に表示項目を調整できますが、カラム内のアイコン...

cssスプライトを使って表示してきたような背景を、ふわっと変化させる工夫

SN

9/12 16:57



CSSスプライトを使ってきたような箇所

自分の場合、CSSスプライトを用いるのはマウスオーバーして、

パチっと一瞬読み込みが入ってはまずい箇所だけである。


(まずい例)



ただ、CSSスプライトを使うと...

iOSで中スクロールが上手くいかない理由

SN

9/12 15:01



iOS上のスクロールの挙動

中の要素でスクロールする場合にoverflow-y: scroll; -webkit-overflow-scrolling: touch;をセットすると思いますが、その時に動画のようにwindow自体がスクロールしてしまうことがあ...

::aftarなどの擬似要素にhover:を付ける

SN

9/12 11:22

HTML


test.php
<div class="test_box">
<a href="#">test</a>
</div>




SCSS


_test.scss
.test_box {
border-top: 1px solid #616161;

a {
di...

SQL整形ツール

SN

9/12 00:13

ログファイルなどに出力されるSQLを整形する。

主な機能は以下。

・INSERT文、UPDATE文を整形する

・SQL文のカラム名を和名に変更

・キャメル式⇔スネーク式の変換

・大文字⇔小文字の変換


例:...

マークアップの大まかな仕組み

SN

9/11 22:04



HTML


Hyper Text Markup Langurageの略称。
ハイパーテキストとは、文章の中に他の文章へのリンクを埋め込み、複数の文章を相互に関連づける仕組みのこと。HTMLはこのハイパーテキストを実装するための言語で...

カラーユニバーサルデザイン推奨配色セット ver.4の配色を使用したスタイルシート

SN

9/11 18:55

カラーユニバーサルデザイン推奨配色セット ver.4 に基づいたスタイルシートを公開します。

自治体のホームページなど、アクセシビリティ(accessibility, a11y)が重視される場合にご利用ください。


全20色
...

Bootstrap4で.img-responsiveにハマった話

SN

9/11 18:13



.img-responsiveが効いてくれない!

ある時Bootstrapで、

いつものように.img-responsiveを使ってみても、

画像が可変になってくれない。

いろいろ調べて、Bootstrap4のドキュメントを見ると、

...

tableをスマホで確認するとフォントサイズが効かなくてハマった件

SN

9/11 18:12

結論:以下をCSSに追記して解決した。

-webkit-text-size-adjust:100%;


モバイル端末で使用されるテキスト自動拡大アルゴリズムを制御できるらしい。

https://developer.mozilla.org/ja/docs/Web/CSS/text...

堅牢で保守的な最低限度の CSS

SN

9/10 18:56



CSS 設計


設計思想は FLOCSS + ECSS

命名規則は MindBEMding (以降、BEM)

開発言語は Sass + PostCSS




複合語はキャメルケース

単語間の区切りは キャメルケース を推奨する。


略語は原則禁止

原...

Vuejsの新しいフレームワークを実装する

SN

9/10 18:38



Vuesax



Vuesax は、vuejsに基づいたコンポーネントのフレームワークであり、段階的に採用できるようにゼロから設計されたフレームワークです。

フレームワークは、アプリケーションの開発を容易にし、必要...

意外と知らないFlexBoxの挙動

SN

9/10 11:20



FlexBoxとは?

今更ではありますが、親要素にdisplay: flexを指定することで、子要素をいい感じに並べてくれる便利なものです。

例えば


sample.html
<div class="parent">
<p class="child...

buttonタグにaタグを入れて動作しないブラウザがある件について!!!!! @UguisuMochizuki の投稿

SN

9/9 14:55



結論

ブラウザのfirefox でこのような書き方をすると リンクを遷移できなくなります


どういうときに

buttonタグの中にaタグを埋め込み firefoxでページを遷移させようとしたとき

<button>
<a h...

Ruby on Railsで外部のcssを読み込む方法

SN

9/9 13:49



Ruby on Rails自分用備忘録

Ruby on Railsの既存プロジェクトを引き継いだ。そもそもRubyもRailsも触ったことがなかったけど、フルスタックフレームワークって何ぞやってことは、概ねDjangoで理解してたし、Ru...

Above the fold(ファーストビュー)に含まれる CSS をインライン化してパフォーマンスの改善を図る

SN

9/8 15:39



概要

HTML 内に外部 CSS が指定されていた場合、その CSS ファイルをダウンロードし記述されているルールセット1のすべてを解釈するまで、ブラウザはレンダリングをブロックします。

本稿では、 Above the...

styleタグをjsから動的に書き換える

SN

9/7 14:45

codepen的なもの

入力されたcssを即時反映する処理をjquery無しで書く

const old = document.getElementById('inserted-style')
old && old.parentNode.removeChild(old)
const obj = document.crea...

Reactで改行込みのデータを表示させたい時

SN

9/6 21:10

コンテナにスタイルを当てればOK。

CSSだけで完結するのでReact以外でも使える。

import React from 'react';
import ReactDOM from 'react-dom';

const data = "hoge\nfuga";
const styles = { whiteSpace...

Angularでxterm.jsを利用する方法

SN

9/6 16:39



Xterm.jsを記述する方法

ブログに解説を含めまとめましたが、ここではxterm.jsの読み込み方法のみ簡潔に記載します。

公式サイトの解説の通りの以下の記述ではAngularでXterm.jsを利用できません。


<!do...

Angularでxterm.jsを利用する方法

SN

9/6 16:39



Xterm.jsを記述する方法

ブログに解説を含めまとめましたが、ここではxterm.jsの読み込み方法のみ簡潔に記載します。

公式サイトの解説の通りの以下の記述ではAngularでXterm.jsを利用できません。


<!do...

JIS安全色で色指定したスタイルシート

SN

9/6 14:28

2018年4月20日に、JIS安全色が改正されました。塗装用、印刷用、画面表示用、のそれぞれについて、好ましい色が改正されました。

色の見え方は人により様々です。色弱の人、ロービジョンの人、白内障になってい...

BulmaのmodalがIE11で中央寄せにならぬ

SN

9/6 12:49

.modal {
flex-direction: column;
}


でOK

https://github.com/jgthms/bulma/issues/460

新卒1年目の私が配属3ヶ月で学んだこと

SN

9/6 12:34

どうもこんにちは。みっつーです!

最近、積み本が減ってきたので新しく積む本を探しています。

おすすめの本があったら教えてください。(ジャンル問わず)



さて、配属3ヶ月目となり、周りの人にも環境...

Google Fontsのunicode-rangeを使ったサブセット方法 - 祝 Noto Sans / Serif JP on Google Fonts

SN

9/6 03:54

Google FontsでNoto Sans JP / Noto Serif JPが提供されるようになったということで(以前から他の日本語フォントも提供してましたが)、試してみたら、けっこう軽かったので、どのようにサブセットをしてるかの...

Androidのブラウザでselectにcssが反映されない場合の対処法

SN

9/6 01:08



はじめに

Androidでselect要素にcssを当てているにもかかわらず、

特定のcssが反映されないことがあったため、対処法を記載します。

(実際に発生した症状では、paddingが反映されませんでした)


確...

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

SN

9/5 20:02



SVGをゴニョゴニョやる?

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


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

CSSのcubic-bezierで使用可能な各イージングをTypeScript・JavaScript向けに定数化した

SN

9/5 17:57

ICS MEDIAの記事「アニメーションをデザインしよう! 知っておきたいCSSイージングのお手本 - ICS MEDIA」では、イージングの使い分けが解説されています。その末尾にある、cubic-bezier()で使用するパラメータの...

【jQuery】モーダルウィンドウの構造を理解しよう!その1(未完)【単一画像】

SN

9/5 16:45

モーダルウィンドウって地味によく使いますよね。

今ちょうど文字がいっぱい詰まってる画像を使うところで見にくいからクリックで拡大表示させたい案件発生中です。

せっかくなのでモーダルウィンドウを...

PR:bitflyer

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