[B! css3][CSS3] sippo_desのブックマーク

sippo_des id:sippo_des

css3とCSS3に関するsippo_desのブックマーク (115)

CSSの単位px、em、remはどれをどこで使用するのがよいか、ピクセルとアクセシビリティにおける意外な真相
CSSの単位px、em、remは、どれをどこで使用するのがよいか。 font-sizeの値にはどの単位を使用していますか？ほかにもメディアクエリを定義する時、マージンを定義する時、widthやheightを定義する時、使用する単位はアクセシビリティに配慮する必要があります。 The Surprising Truth About Pixels and Accessibility by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSでpxとemとemの各単位がどのように機能するかアクセシビリティに関する考慮事項どの単位をどこで使用すればよいのかどの単位がベストなのかが明らかでない場合簡単にできる小技とメンタルモデルボーナス: remを使用すると便利なテクニックはじめにC
sippo_des 2022/06/08
css

単位

定義

*web制作

デザイン

CSS3
リンク
これからはこの実装がオススメ！ iOSの100vhでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
高さいっぱいに表示したい時、古くはheight: 100%;、そしてmin-height: 100%;で実装していたと思います。現在ではビューポートの単位min-height: 100vh;が使用できるようになりました。しかし、iOSでは100vhを使用してもアドレスバーが表示されていると下がその分隠れて表示されてしまい、高さいっぱいになりません。JavaScriptを使用するというやり方もありますが、CSSのみで対応できるので、そのCSSを紹介します。 Chromeにも対応しています。
sippo_des 2021/08/19
css

iOS

chrome

*web制作

CSS3
リンク
これが完全版！レスポンシブ対応のwebp画像を実装するHTMLのコード
画像を実装するには、以前はimg要素にsrcで画像を指定するだけで簡単でしたが、レスポンシブ対応、Retina対応、遅延読み込み、そしてさまざまな画像フォーマットの登場により、HTMLのコードが複雑になっています。レスポンシブ対応のwebp画像を実装するHTMLのコードの完全版を紹介します。非サポート用のフォールバックにも対応しており、コピペで簡単に使用できます。 A picture element to load correctly resized webp images in HTML by Stefan Judis 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2021年現在、画像の主要フォーマット新しい画像フォーマットを読み込むための取り組み最初のステップ: picture要素でwebp画像を読み込むには完全版
sippo_des 2021/05/26
レスポンシブ

html

ブラウザ

*web制作

webデザイン

CSS3
リンク
Web制作の現場で使えるWebサービス13選！無料で使えるサービスを集めてみた | BUILD Journal
CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Radius Generator CSSのborder-radius を使ってボックスや画像をユニークな形状に変化できるWebサービス。 Fancy Border Radius Generator シンプルなコードで実装可能です。正方形の写真をCSSで変形させました上のように正方形の写真をユニークな画像に見せることができます。 Fancy Border Radius Generator Clippy – CSS clip-path maker CSSのclip-pa
sippo_des 2021/05/15
アニメーション

サービス

制作

css

*web制作

UI

design

webデザイン

CSS3

ツール
リンク
たった1行のCSS！よく見かけるWebレイアウトを実現する凄技テクニック10個
モダンなCSSレイアウトでは、ほんのわずかなコードを書くだけで、実用的なスタイリングを実現できます。この記事では、たった1行でよく見かけるWebレイアウトを表現できるテクニック10個をご紹介します。上下中央揃え: place-it ems: center まずCSSでもっとも頭を悩ませる、上下中央揃えを詳しくみてみましょう。ここでは、plae-it ems: centerを使えば、思ったよりに簡単に実現できます。まず、display: gridを記述したら、一緒にplace-it ems: centerを同じ要素に追加します。place-it emsは、align-it emsとjustify-itemsを同時にスタイリングできる簡略化表記、ショートハンドです。centerに設定することで、align-it emsとjustify-it emsの両方がcenterとして設定されます。 .paren
sippo_des 2020/08/19
*web制作

CSS3
リンク
よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout
最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。ブックマークや、スニペットに登録しておくと便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSS Layoutの使い方 CSS LayoutのレイアウトやUI要素91種類 CSS Layoutの特徴 CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。依存は一切なしフレームワークも必要なし CSSハックもなしすべて実際の使用例MITライセンスで、商用プロジェクトでも無料で利用できま
sippo_des 2020/05/28
レイアウト

css

ui

シンプル

デザイン参考

UI

webデザイン

CSS3
リンク
フロントエンドのコーディング課題６選-このフロントエンドの課題、実装できますか？ - Qiita
こちらの記事は、Indrek Lasn 氏により2019年10月に公開された﹃ Here Are 6 Front-End Challenges to Code ﹄の和訳です。本記事は原著者から許可を得た上で記事を公開しています。著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。優れたフロントエンド開発者になるために効果的な方法の1つは、単純にできるだけ多くの課題に取り組み、解決することです。フロントエンド開発の達人になるために、今日から解き始めることができる6つの課題を紹介します。ではさっそく、実装すべき6つの課題はこちら。 1. ク
sippo_des 2020/01/09
あーこれやりたいなー

CSS3

フロントエンド

*web制作
リンク
A (more) Modern CSS Reset
I wrote “A Modern CSS Reset” almost 4 years ago and, yeh, it’s not aged overly well. I spotted it being linked up again a few days ago and thought it’s probably a good idea to publish an updated version. I know I also have a terrible record with open source maintenance, so I thought I’d archive the original and just post this instead. Do with it what you want! To be super clear, this is a reset th
sippo_des 2019/10/04
css

reset

design

CSS3

*web制作
リンク
CSS3でフェードインとフェードアウト
sippo_des 2019/08/16
js

CSS3
リンク
CSS GRIDを勉強してみる(11) - さまざまなshorthand - Tambourine作業メモ
ここからは developer.mozilla.org を読む。エゲレス語の文書を読んでいて、かつ、私の英語能力がプアなので、英語そのままの用語が出てきたり、英文をそのまま引用したり、内容を勘違いしていたりするかもしれない。知ったこっちゃないけど。あと、少しペースアップしないと読み終わらない気がする・・・。今回のスタートは、この状態だ。まずはHTML <div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> <div class="box4">Four</div> <div class="box5">Five</div> </div> 次にCSS。ちょっと長い。 3×3のグリッドを指定していて、box1〜4はその中に配置。b
sippo_des 2019/08/01
CSS3

テンプレート
リンク
CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう | Webクリエイターボックス
2021年12月6日 CSS フラットデザインが流行ってからは、背景を一色で塗りつぶしたデザインのサイトが多くなりました。しかしそれだけではなんだか味気ない！という事で、CSS3のアニメーションを使って、徐々に色を変化させてみましょう！色の組み合わせや順番を調整して、パッと目を引くデザインに！ ↑私が10年以上利用している会計ソフト！ Themifyではホームのファーストビューでビビッドな色を少しずつ変えながら表示しています。今回目指すのはこんな感じの背景です。このサイトではJavaScriptにより色の移り変わりを実装しているようですが、CSS3のキーフレームアニメーションだけでも表現できます！ CSS3 キーフレームアニメーションの基本まずは要素を徐々に変化させるアニメーションについて覚えていきましょう！CSS3の animation プロパティでは、キーフレームを設定して細かい動き
sippo_des 2019/05/31
アニメーション

css

animation

color

design

CSS3
リンク
Magic Animations CSS3
Magic CSS are a set of simple animations to include in your web or app project's
sippo_des 2019/05/31
css3

* Animation

css

animation
リンク
Creative CSS3 Animation Menus
Creative CSS3 Animation Menus Experimenting with CSS3 Transitions & Animations
sippo_des 2019/05/31
CSS3

animation
リンク
CSSセレクタのチートシート｜37パターンを一覧で解説
CSSセレクタのチートシートでは、要素セレクタ / classセレクタ / idセレクタ / 属性セレクタ / 複数セレクタ / 子孫セレクタ / 兄弟セレクタ / 隣接セレクタ / 擬似クラス / 擬似要素 / 全称セレクターから37パターンのセレクタの説明と実際のコードで使い方サンプルを紹介しています。
sippo_des 2019/02/08
css

CSS3
リンク
CSSの参考になるアイデアがいっぱい！2018年スタイルシートを使ったテクニックのまとめ
2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。動作を見るには、﹁Run Pen﹂をクリックするか、クリック後に右上﹁Edit on Codepen﹂をクリックしてください。まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。
sippo_des 2018/12/13
CSS3
リンク
画像のレスポンシブ対応でsizes属性を使う際に注意すること
ごく稀になんですが、画像を常にビューポートの幅80％で表示するには sizes 属性を使って次のように記述すればよいという説明を見かけることがあります。 <img src="test_160.jpg" alt="ローストビーフ" sizes="80vw" srcset="test_160.jpg 160w, test_320.jpg 320w, test_640.jpg 640w, test_1280.jpg 1280w">
sippo_des 2018/09/19
CSS3

css
リンク
https://handywebdesign.net/2017/10/beautiful-svg-animation/
sippo_des 2018/03/16
CSS3

*web制作

svg

animation
リンク
CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ
最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。
sippo_des 2018/01/17
CSS3

*web制作
リンク
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！白石俊平︵HTML5 Experts.jp編集長︶こんにちは、編集長の白石です。この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。矢倉さんのセッション﹁まあまあ最近のCSSとつらくならないための書き方﹂に関するスライド資料は、こちらで公開されています。インパクト大！CSSグリッドレイアウト概要白石: では、まずは簡単に自己紹介をお願いできますか？矢倉: 昨年︵2
sippo_des 2017/10/27
厄介だなあとしか。そんなSketchがよいならもうキレイに吐き出してくれりゃええのにね。

CSS3

*web制作
リンク
実は簡単！3分で分かるSVGアイコンの作り方 | WebNAUT by Beeworks
※この記事は2017年3月30日に執筆された記事です。現在は仕様が異なる可能性があります。スマートフォン、Retinaディスプレイ、など高解像度ディスプレイへの対応にSVGが注目されるなか、WebNAUTでもリニューアルに伴いアイコン類を全てSVGにしました。この記事では、サイトのリニューアルや立ち上げなど、沢山のアイコンをSVG形式で作るときに役立つ方法を紹介します。 SVGとは？ “Scala ble Vector Graphics”の略称であり、簡単に言うとweb上で使える拡縮可能なベクター画像です。主に下記のようなメリットがあります。スマホ対応・Retina対応も1つのファイルでOK同じデザインなら、スマホ用、hover用、色違い…、などいくつもpng画像を用意する必要はありません。また、結果的に画像が減るのでHTTPリクエスト数の削減にも繋がります。後からサイズや色の調整が
sippo_des 2017/09/13
SVG

svg

Design-UI

Illustrator

Tutorial

Web

UI

デザイン参考

CSS3
リンク
1 2 3 4 5 6 次のページ