prefers-color-scheme を用いた Dark Mode 対応と User Preference Media Features | blog.jxck.io
Intro macOS Mojave は OS レベルで Dark Mode に対応した。 しかし、Web コンテンツは依然として白背景黒文字ベースのデザインが多く、結果ブラウザの中だけ眩しいという問題がある。 Safari TP69 では、これにメディアクエリで対応するための prefers-color-scheme が実装された。 これを用いた DarkMode 対応と、本ブログの DarkMode 対応、および策定中の User Preference Media Features について解説する。 Update 画像の対応について追記した Code Block の対応について追記した 2019/1 に Chrome の Intents が出された。 Intent to Implement: Media Queries: prefers-color-scheme feature In
[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●● - Qiita
この記事について CSSアニメーションを使って複数要素をばらばらにふわふわさせる方法を覚えたので記事を書こうと思ったけど、特にふわふわさせたいものもなかったのでタピオカを作って浮かせてみたぞい。 タピオカはそんなに好きじゃないけど丸くてかわいいよな・・・(´・ω・`) See the Pen pozEpao by Mayu Mameuda (@mayu-mameuda) on CodePen. カップとかストローとかもCSSで作ってみた。 せっかくなのでカップとかのところも解説するぞ。 (アニメーションのやり方だけ知りたい人は「ついにタピオカ」まで飛んでくれ〜〜〜) 全国のタピオカ好きのみんなに見てほしい・・・・ カップのCSS カップを構成している要素は大きく全部で5つ。 ・カップ ・カップの蓋 ・カップの中身 ・ストロー ・タピオカ こんな感じにパーツを分けて作ったよ。 パーツごとに作
![[CSSアニメーション]●●●CSSでタピオカ作ってふわふわ浮かせる●●● - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/906db1b90be9801bc25f75431bb2d98811c6b740/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCQ1NTJUUzJTgyJUEyJUUzJTgzJThCJUUzJTgzJUExJUUzJTgzJUJDJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJTVEJUUyJTk3JThGJUUyJTk3JThGJUUyJTk3JThGQ1NTJUUzJTgxJUE3JUUzJTgyJUJGJUUzJTgzJTk0JUUzJTgyJUFBJUUzJTgyJUFCJUU0JUJEJTlDJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgxJUI1JUUzJTgyJThGJUUzJTgxJUI1JUUzJTgyJThGJUU2JUI1JUFFJUUzJTgxJThCJUUzJTgxJTlCJUUzJTgyJThCJUUyJTk3JThGJUUyJTk3JThGJUUyJTk3JThGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0zYTBiMjhmMGU0MDUyZDU5NGRkNGM3YzlkZmJjMDhiMA%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWFtZV9oYXNoYmlsbCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDliN2YwMGYxY2U3YjJkMjQ3MWU2MWFhNzAyMDRiNzQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Decfadd57a3dd29570ae6092cea568f09)
CSSでドット柄（水玉）を作る方法 | コトダマウェブ
円形グラデーションというのはこんな感じのグラデーションです。 ここでは円形のグラデーションをスタイルシートで実装する方法について見ていきます。 線形グラデーションについて知りたい方は下記の記事もご参照ください。 radial-gr... radial-gradient関数を理解していないと、この先の話がよく分からないと思いますので、気をつけてくださいね。 それでは、最初にドットをひとつだけ作ってみます。 See the Pen dot01 by kenichi (@ken81) on CodePen. まずは、分かりやすくするために要素のサイズとbackground-sizeの値を同じにしました。radial-gradientを使って中心の色を黄色に、外側の色を青に指定してあります。 余談ですが、正方形の要素にぴったり収まる円を作るには、radial-gradientでグラデーションの終了
★★CSSだけで簡単！ハンバーガーメニューの作り方（スマホ対応）
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita
💀 Webフォントの問題点 Webフォントに限らず、ブラウザでテキストを表示する過程には、フォントの読み込み作業が存在します。また、フォントを読み終えるまではテキストを表示させない機能1がブラウザには組み込まれています。 ローカル環境下のフォントであれば読み込みに時間はあまりかからないので問題ありませんが、webフォントの場合はローカルフォントと比べると読み込みに多くの時間を要してしまいます。 この機能の影響で、ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない為、不満や苛立ちを覚え、体験価値の低下やページの離脱を引き起こすと考えられます。 ⚔️ 'font-display'プロパティでこの問題に立ち向かう font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの
コピペで簡単！見出しの装飾に使えるCSSを16個作っといた
ブログのデザインをいじっていると、地味に悩むのが見出しの装飾。派手すぎるのはダサいですが、何も装飾しないのも味気ないですよね。 今回は、画像を使わずにCSSのみですぐに実装できる見出しの装飾パターンを16個紹介します。作るの大変だった。 一応コピペでもすぐに使えるとは思いますが、色やサイズ、余白などは自分のブログに合わせて変更してほうがいいです。あとベンダープレフィックスは付けていないので、古いブラウザにも対応させたいなら各自で対応してください。 あと、それぞれ表示サンプルも作ったんですが、h要素を使いまくるとアレなのでp要素を使っています。色は#333でフォントサイズは22px、ウェイトはノーマルです。ここらへんもお好みで変えちゃってください。
【CSS】テキストの左右にボーダーを入れる方法
表示結果 Dummy Text 解説 display: flex;(CSS:4行目) p要素をflexコンテナ化することで、内包するテキストがflexアイテムになります。 align-items: center;(CSS:5行目) flexアイテム（p要素内のテキストと、before,afterで生成された疑似要素）を上下中央に配置。 flex-grow: 1;(CSS:9行目) 左右の疑似要素（ボーダー）の幅を、空いているスペースいっぱいまで広げています。 height,background(CSS:10,11行目) heightでボーダーの太さを、backgroundで色を指定しています。 display: block;(CSS:12行目) 疑似要素は、displayプロパティにblockやinlineを指定しないとIEで表示されません。 margin-○○: .4em;(CSS:15
pixivの新しい作品画面でキャプション等を作品の上に表示する - 地雷持ちが快適にpixivを楽しむための備忘録。
pixivが対象ユーザーを順次拡大していくとアナウンスしていた新しい作品画面ですが、先日管理人のアカウントにも適用されました。新しい作品画面は、ページを開くとまず作品がドーンと表示されて、タイトル・キャプション・タグなどの作品情報はその下に配置されています。 pixiv公式からのお知らせはこちらになります→[pixiv] お知らせ - 作品画面のデザインが新しくなります 作品を見るより先に情報を確認できないのは不便なので、ユーザースタイルシートでキャプションなどを作品の上に表示されるようにしてみました。 ユーザースタイルシートの設定方法に関しては、【Chrome拡張およびFirefoxアドオン「Stylus」の使い方】をご覧ください。 ※このページで紹介しているcssを作品画面以外で使うと、レイアウトが崩れることがあります。 Stylusをお使いの際は、適用先を「次で始まるURL」にして「
CSSフィルタことはじめ - Qiita
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; body { font-family: "メイリオ",meiryo; } .floatcontainer:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } .floatcontainer { display: inline-block; } /* Hides from IE Mac */ * html .floatcontainer {height: 1%;} .floatcontainer { display:block; } /* End Hack */ .social_b
WebPとLazyLoadを使って表示速度を向上させる 東京新宿のホームページ制作会社イッティ
売り上げ・アクセス数を伸ばしたい 月々の管理費を抑えたい リニューアルで失敗したくない 提案やサポートしてほしい ホームページに関することは お気軽にご相談ください
CSS grid layout - Learn web development | MDN
Previous Overview: CSS layout Next CSS grid layout is a two-dimensional layout system for the web. It lets you organize content into rows and columns and offers many features to simplify the creation of complex layouts. This article will explain all you need to know to get started with grid layout. Understand the purpose of CSS Grid — flexibly lay out a set of block or inline elements in two dimen
CSS Grid Layout を極める！（基礎編） - Qiita
CSSをちょっと書けば、こんなレイアウトが出来てしまいます！ 当記事では、こんなレイアウトを可能にする CSS Grid Layout の解説をしていきます。 尚、CSS Grid Layout は現時点（2017年4月）ではまだ新しいモジュールのため、対応ブラウザが少ないです。 （Fx52～、GC57～、Safari10.1～、Opera44～ など） Can I use... CSS Grid Layout しかし、2017年3月にはFirefox, Google Chrome, Opera, Safari などが CSS Grid Layout 対応のバージョンをリリースしており、今後に対応ブラウザが急増するのは確実なので、ぜひともマスターしておきたいです。 この記事は4部構成の中の 基礎編 です。 CSS Grid Layout を極める！（基礎編） ←これ CSS Grid La
【CSS】Webアプリ化するときに有効！テキストや画像を選択不可するCSS Tips | unitopi - ユニトピ -
こんにちは。 本日はテキストや画像を選択不可にするCSSプロパティのご紹介です。 最近ではネイティブアプリ（それぞれの言語でストアでダウンロードするアプリです）ではなく、Webベースでアプリ化するサービスも増えてきていますので、WebっぽくならないTipsです。 さっそくコード -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer */ -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */ -webkit-user-select: none; /* Chrome, Safari, and Opera */ -webkit-touch-callout: none; /* Disable Android and
-webkit-touch-callout - CSS: カスケーディングスタイルシート | MDN
CSS初心者向けチュートリアル初めてのウェブサイト: コンテンツのスタイル設定CSS スタイル設定の基本CSS とは何かCSS 入門課題: 経歴ページのスタイル設定基本的な CSS セレクター属性セレクター擬似クラスと擬似要素結合子ボックスモデル競合の処理CSS の値と単位CSS におけるアイテムのサイズ設定背景と境界線コンテンツのオーバーフロー画像、メディア、フォーム要素表のスタイル設定CSS のデバッグ課題: 基本的な CSS の理解課題: 美しいレターヘッド付きの便箋の作成課題: かっこいいボックスCSS テキストの装飾基本的なテキストとフォントのスタイル設定リストのスタイル設定リンクのスタイル設定ウェブフォント課題: コミュニティスクールのホームページの組版CSS レイアウトCSS レイアウト入門浮動ボックス位置指定フレックスボックスCSS グリッドレイアウトレスポンシブデザインメ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSグラデーションで作った背景パターンのサンプル - NxWorld
CSSで複数の属性セレクタを指定する - Qiita
ttmp1519.jpg
table に position: sticky を使ってみた | WEBMAN
【CSS】input type=”text” に width 100% を指定するとはみ出る原因と対処方法 – 熊本のWEB制作SEO | poroaブログ
ぼくの考えたさいきょうのCSSだけで2pxの縁取り文字【2017/7/28追記】 - Qiita
