[CSS]知っておくと便利！レスポンシブ用に画像を配置するスタイルシートの5つのテクニック
何らかの理由で画像をレスポンシブ対応にうまく配置できない時があるかもしれません。何時間もかけて、いろいろな実装方法を試すこともあるでしょう。 CSSハックは無しで、レスポンシブ用に画像のサイズ変更を処理して配置するスタイルシートの5つのテクニックを紹介します。 Time-saving CSS techniques to create responsive images by Adrien Zaganelli 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 画像に適した方法で実装しよう 画像を配置するこれからのテクニック IEでも機能する、Netflixで使用されているテクニック 簡単な方法 パフォーマンスを考慮した方法（上級） レスポンシブ対応の画像を実装する時の流れ 画像に適した方法で実装しよう 今、金曜日の17時だとします。
![[CSS]知っておくと便利！レスポンシブ用に画像を配置するスタイルシートの5つのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/3839bf374dbbe5e616dc812c2957f4b32e36c5f5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018082405.png)
CSSでビックリマンシール風の背景を作る - Qiita
Chrome 69 から CSS conic-gradient が使えるようになります ※2018年8月3日時点ではバージョンが 68 なので、以下のソースは Chrome Canary でご確認ください。 今までグラデーションといえば、線形グラデーションの linear-gradient と 放射状グラデーション の radial-gradient の２つだけでしたが、conic-gradient で円錐状グラデーションを表現することができます これを利用しビックリマンシール風の背景を作成してみました。*1 実際に描画されたものを見たい場合はこちら。 名前のところは太字にして枠をつけただけなので、もう少し何とかしたいところですが、 主旨のキラキラはいい感じにできました。 キラキラソース HTML .kirakira { position: relative; width: 240px;
ウェブ組版は行間が基準なのではという話 - note
以前見かけたこの記事がきっかけで、実務でもずっと引っかかっていたことがあるので書こうと思う。 ＞ remの基準となる値を行の高さにする | yoshihiko com-blog 行間 ≠ line-height という罠よくある疑問に、日本語で言う「いわゆる行間」と、CSSの「line-height」は違うというのがある。日本語の文章は、仮想ボディが基準の原稿用紙のようなグリッドがあって、それが「いわゆる行間」のピッチで繰り返されて本文ができている。文字の頭（仮想ボディの上）から次の文字の頭までがいわゆる行間とされている。もっと正確に書くと、これは行送りであって、正確な意味での行間は line-gap というものになる。 行送り= line-height、行間= line-gapで、一方ラテン語圏が基本のウェブ（CSS）では、この line-gap のくっつき方が純粋な日本語組版とは異なっ
The CSS Paint API | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The CSS Paint API is extremely exciting, not only for what it is, but what it represents, which is the beginning of a very exciting time for CSS. Let’s go over what it is, why we have it and how to start using it. What is the CSS Paint API? The API is just one part of a whol
アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ
ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい！コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves ３つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま
死んだCSSを見つける方法 - Qiita
使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく
CSS Gridの実用的なテクニックが基礎からていねいに解説されたフロントエンドの制作者にオススメの本
CSS Gridをそろそろ始めてみよう、と考えている人にぴったりの解説書を紹介します。 本書は実践的な解説書で、CSS Gridを使用してデスクトップ・スマホ向けのさまざまなレイアウトをはじめ、ヘッダやセクションやフッタやナビゲーションなどのコンポーネントの実装方法が詳しく解説されています。 初心者の人にも中級者の人にもCSS Gridの実装を一からしっかり学べる一冊です。 本日、6/15発売です！ HTMLやCSSの基本的な解説はありません。CSS Gridについての基礎知識から実装方法までが解説されており、日常的にHTMLとCSSに触れられている人にお勧めします。 また、本書でのレイアウトは「ノンデザイナーズ・デザインブック」の基本原則に従ったもので、デザインについても学べると思います。 パラパラ見るだけでもCSS Gridのアイデアが膨らみます。 書籍版でもKindle版でも解説され
CSS Text Module Level 4
CSS Text Module Level 4 W3C Working Draft, 20 October 2023 More details about this document This version: https://www.w3.org/TR/2023/WD-css-text-4-20231020/ Latest published version: https://www.w3.org/TR/css-text-4/ Editor's Draft: https://drafts.csswg.org/css-text-4/ Previous Versions: https://www.w3.org/TR/2023/WD-css-text-4-20230329/ History: https://www.w3.org/standards/history/css-text-4/ Fe
Modern CSS Explained For Dinosaurs
Images from Dinosaur Comics by Ryan North CSS is strangely considered both one of the easiest and one of the hardest languages to learn as a web developer. It’s certainly easy enough to get started with it — you define style properties and values to apply to specific elements, and…that’s pretty much all you need to get going! However, it gets tangled and complicated to organize CSS in a meaningful
あまり知られていない、フォームをCSSでスタイルするために役立つ便利なセレクタとその使い方
フォームをCSSでスタイルするのは難しいと思われていました。しかし、input要素とそれに関連する要素をスタイルするためのあまり知られていないセレクタがあります。いくつかは比較的新しいセレクタですが、昔から存在するセレクタもあります。 フォームの見た目だけでなく、機能も強化するCSSの便利なセレクタとその使い方を紹介します。 Advanced CSS-Only Form Styling by Jonathan Harrell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 フォームにスタイルを適用したデモ :placeholder-shown :required :optional :disabled :read-only :valid :invalid :in-range/:out-of-range :checked フォーム
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら... - Qiita
HTMLのテキストはPhotoshopのように融通が効かないから、デザイナーからの細かいお願いはだいたい断っている...なんてことありませんか？ モダンブラウザは色んなプロパティが対応してきているので、できることも増えています。 今回は、知っているといざというとき便利なテキスト周りのCSSを集めてみました。 「日本語、文字詰めできないかな？ほら、このカタカナとかキモい。。」 「Webで文字詰めだと？無理なんだよあきらめな！」なんていう時代はもうとうに過ぎ去っています。OpenTypeのフォントであれば、日本語でもちゃんと文字詰めできるんです。 .class { -moz-font-feature-settings: "palt"; -webkit-font-feature-settings: "palt"; font-feature-settings: "palt"; } ↓こんなかんじで
コーディング初心者こそ知っておきたい便利な「CSS関数」5選
HTMLやCSSでホームページのデザインを行うことを、一般的には「プログラミング」とは言わずに「コーディング」と言います。 論理的なバックエンドでの実行処理を考えるプログラミングとは違い、HTMLやCSSは「見え方」や「見た目」の部分に責任を持つことが多く、コードによって「組み立てる」イメージからそのように呼ぶのでしょう。 しかしながら、CSSは通常プロパティと値をセットで指定していきますが、*「CSS関数」*と呼ばれる便利な関数も用意されています。 これらの関数を使うことで、計算を実行したり、条件を指定したり、特定の値を別のフォーマットに変形したりすることができます。 そこで本稿では、*コーディング初心者こそ知っておきたい便利な「CSS関数」*を5つ紹介していきます。 普段業務などであまりCSS関数を活用していない方にこそ、CSS関数のよさを知って、使えそうな場面でぜひ活用していただきた
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つ
2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ ↑私が10年以上利用している会計ソフト！ 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく
Home · Marx
The classless CSS reset (perfect for Communists). No JavaScript. No Classes. Just raw CSS. 10.5 kB / 3.0 kB (Gzip) minified. Is Marx for you? Marx is a CSS stylesheet to be used in any projects (namely small ones). If you don't need the weight of heavy frameworks or you would just like to make an edible website quickly, Marx is perfect for you. It can be used out of the minified box but it can als
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Yusuke Nakaya on CodePen
Spectre.css CSS Framework
Art Directing for the Web. Five minutes with CSS Template Areas - Speaker Deck
CSSの素晴らしいアイデアが満載！2017年スタイルシートを使ったテクニックのまとめ
CSS Grid Layout Module
