もう誤魔化さない！ CSS Transform完全入門(2D編) - ICS MEDIA
CSS Transformの仕様は意外にも複雑です。思った通りの場所に表示できず、その場凌ぎにmarginやpaddingの目分量で位置合わせをしてしまった……。そんな経験をもつ方もいるのではないでしょうか？ この記事では、CSS Transformの基礎をおさらいした上で、陥りやすいミスの回避方法や最新の機能を紹介します。 CSS Transformとは？ CSS Transformはwebページで高度な表示やアニメーションを高速に描画するための仕様として生まれました。 往年のwebユーザーの方であれば、Google検索のイースターエッグのひとつ『do a barrel roll』をご存知かもしれません。このイースターエッグは当時（2010年代初頭）最先端であったCSS Transformをデモする意味もありました。 2021年現在では、発展系の3D変形も含め、ほぼすべての機能がIE(I
CSSボタンデザイン120個以上！どこよりも詳しく作り方を解説！
なぜCSSでボタンを作るのか？その前に、なぜCSSでボタンを作るのか？について少しだけ考えたいと思います。 簡単に言ってしまえば、 軽い！拡張性がある！解像度の心配がない！簡単！と言った理由ではないでしょうか？ 画像でボタンを作ることも多いと思いますが、「画像じゃないほうがいいなあ」と思うことも多いと思います。 もちろん、デザイナーから上がってきたデザインデータからボタンを切り取って、HTMLに設置して、CSSでホバーはopacity:0.8、とかやれば簡単ではありますが、デザインツールの進化やレスポンシブの一般化に伴い、そういったイケてなくて古臭いやり方はあまり望ましくないです。 特にWebの場合、テストの繰り返しが必要ですが、画像でボタンを作るとなるとテスト用にいくつもの画像を作らなくてはいけません。色やテキストを変えるとなると画像すべてを修正する必要があります。しかし、CSSボタンで
Autoprefixerが進化してCSS GridのIE 11対応がバリ楽になった（2017年〜2018年） - Qiita
CSS Gridは便利なレイアウト手法ですが、IE 11にも対応する場合はベンダープレフィックスの付与や古い記法への対応が必要です。ベンダープレフィックスの付与や古い記法への対応を自動で行うのがAutoprefixerなのですが、2017年から2018年にかけてIE 11向けのGrid対応が大きく向上したことをご存知でしょうか？ 最近のAutoprefixerを使えば、次のようなメリットがあります。 IE 11向けに手動で書いていた-ms-grid-column-span、-ms-grid-row-spanを手動で書かなくてよい IE 11で非対応のgrid-template-areas、grid-areaを変換可能 gap（旧名grid-gap）をIE 11向けに書き出し可能 repeat()をIE 11向けの旧仕様で出力可能 ▲ AutoprefixerによるCSS GridのIE 1
CSS GridをIE11、EDGEに対応させるために注意する点
IEでもCSS Gridを適用させる時に注意するポイントです。 IE11からCSS Gridに対応しています。 そのため、案件の定義が「IE11以上」であればCSS Gridでコーディングすることもできます。 CSS Gridの基本はこちらの記事を参照ください 「Gridでコーディングするのか？」「Flex Boxでコーディングするのか？」迷うところです。 実際にコーディングしてみると、下記のようなレイアウトの場合は「Flex Box」によるコーディングが最適かと思いました。 トップページや、ランディングページなどに多いレイアウトで、縦のグリッド線が多くなる場合です。 CSS Gridの恩恵を受けることができるレイアウトは下記のような場合です。 レスポンシブレイアウトにした場合、ピンク色のコンテンツが2段目になるレイアウトです。 Flexboxでもコーディングできますが、構造が分かりやすい
蛍光ペン風にテキスト上をマーカーするCSSを設定してみた
WordPressのテーマによっては最初から蛍光ペン風のマーカーが付いていることがあります。 その場合は設定する必要はありません。 設定されていない方向けに書いています。 蛍光ペンマーカーを設定（CSS） まずはCSSの設定からスタート。 蛍光ペンマーカーのCSSは「linear-gradient()属性」を使います。 linear-gradient(transparent 線の太さ, 線の色 0%) このlinear-gradient属性、グラデーションを使って設定します。 （）内の線の太さと線の色を好みの色と太さに変更するだけでOK。 線の太さと線の色の意味は下の通りになります。 線の太さ 黄色の蛍光ペン(太) .marker_yellow_futo { background: linear-gradient(transparent 0%, #ffff66 0%); } 黄色の蛍光ペン
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。 | WEMO
CSSでメディアクエリ(Media Queries)の基本的な書き方、記述の意味を理解し、「何となく使う」を卒業する。 2019 8/15 今回は、レスポンシブで絶対にお世話になるCSSの メディアクエリ（Media Queries）について。基本的な書き方や記述の意味についてまとめていきます。 なんとなく @medeia screen and ... とか書いているけど、 screenってどういう意味？とか、そんなレベルの話です。メディアタイプ・メディア特性・区切り方やそのキーワードの意味など...。 先日、 @media only screen...という書き方を目にした時に onlyの意味がわからず、それだけを調べるつもりが、結構知らないことがあってびっくりしました。 今までがいかに「何となく」だったかを痛感し、せめて基本的なことくらい分かっておこうと思った次第です。 はじめに 今回
何番目系の便利なCSSまとめ - Qiita
最初 :first-child 最初の要素（親要素から見て、子要素すべての最初） デモ :first-of-type ある要素の最初（親要素から見て、ある子要素の最初） デモ 最後 :last-child 最後の要素（親要素から見て、子要素すべての最後） デモ :last-of-type ある要素の最後（親要素から見て、ある子要素の最後） デモ 1個だけ :only-child 1個だけ子要素がある（親要素から見て、子要素が1個だけある） デモ :only-of-type 1個だけある子要素がある（親要素から見て、ある子要素が1個だけある） デモ X番目 :nth-child(X) X番目 デモ：５番目 :nth-of-type(X) ある要素のX番目 デモ：５番目 :nth-child(Xn) Xの倍数 デモ：2の倍数 :nth-of-type(Xn) ある要素のXの倍数 デモ：2の倍数
(K)背景色やグラデーションと背景画像を同時に反映させる場合（CSS覚え書き） | web(K)campus
今回CSS 珍百景 Advent Calendar 2014にエントリーさせていただきましたが、バグというよりCSSセレクタの対処法的な記事です。 例えば、ボタンを作成する時、CSSで背景画像を指定する時はたいていボタン全てをデザインする事がザラでしたが、スマホの横幅可変のボタンを作成する時は、できるだけCSSのみで作成したいですが、ワンポイントで画像をのせたい場合もあります。そんな時に背景色やグラデーションに背景画像を重ねる時の方法を備忘録としてまとめます。 ※今回の検証は「firefox」と「chrome」のみです。「ie」は確認してませんm(_ _)m 背景色と背景画像を表示させたい場合 一般的な角丸色付きボタンの右端に矢印を付けたい場合。 【失敗例】まず、何も考えずに組むとこんな感じ background:url(img/arrow.png) no-repeat; backgrou
高さを求めて32767px
CSS昔話 Advent Calendar 2015の3日目の記事です。 32767pxといえば、もうお気づきの方もいるかもしれません。 そう、32767pxといえば、2007年頃に広まった要素の高さをそろえるテクニック（？）の中に登場する数値ですね。 floatした要素の高さを揃えたい！例えば、幅が200pxの要素.boxが3つ横に並んでいるとします。それぞれの要素はfloat:left;と背景色が指定され、中身は要素ごとに異なります。 See the Pen bEbQZV by geckotang (@geckotang) on CodePen. HTMLとCSSを見てみます。まずはHTMLからです。これといって変わったことはしていません。 The quick brown fox jumps The quick brown fox jumps over the lazy dog. Th
[CSS] before/after（擬似要素）の基本から使い方までを徹底紹介!! | ヨッセンス
「:before」で「pタグ」の前に文字を挿入 では、「before」属性を使って、すべての<p>の前に「オレ的には」というウザい文言を入れてみます。 「before」で前に文字を挿入 ではCSSを見てみます。 p:before { content: "オレ的には" ; } こんな感じですね。 たったこれだけの指定です。「p:before」のように「:（コロン）」の後ろに「before」と入れます。 で、その中で「content:"ここに自由に文章を入れる"; 」という指定をするだけです。「ダブルクォーテーションマーク」をお忘れなく! サンプル1 「:after」で「pタグ」の後ろに文字を挿入 では今度は後ろに入れてみます。たぶん予想できそうですけど、「after」って英単語を使うだけです。 「after」で後ろに文字を挿入 p:after { content:"……と言ってみる"; }
![[CSS] before/after（擬似要素）の基本から使い方までを徹底紹介!! | ヨッセンス](https://cdn-ak-scissors.b.st-hatena.com/image/square/ae881a6d73c795de683729e28d02776cf2197309/height=288;version=1;width=512/https%3A%2F%2Fyossense.com%2Fwp-content%2Fuploads%2Fcss-before-after-300.png)
【HTML+CSS】横スクロールバーを消したい！｜あかねいろ手帳
横スクロールバーが邪魔で消したい！ 横スクロールバーがいらない所で出てきたりしますよね。 （特にスマホ） 横にはみ出した時の為にあえて横スクロールバーを出しておく人もいるのですが、操作上不便なので消す方法です。 overflow-xをhiddenにする CSSは簡単。 [css] .body{ overflow-x: hidden; } [/css] overflow-xは、横にオーバーしたものをどうするかの指示をします。 （overflow-yは縦にオーバーしたものをどうするか指示します。） overflow: scroll; /*スクロールバーを出す*/ overflow: hidden; /*隠す（スクロールバーを非表示）*/ overflow: auto; /*自動（スクロールバーが表示される）*/ 設定したのにまだ横スクロールバーが出る？！ 設定もちゃんとしてるのにまだ横スクロー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「position: fixed」でスクロール固定したヘッダーを横にスクロールさせる | WEBの技
CodeCode
月映酒楼
CSSで簡単に作れるおしゃれな見出しデザイン20選
ぼくの辿り着いた濃いめのtext-shadow - Qiita