2022年のモダンCSS改
7/27（水）開催の「TechFeed Experts Night#1 〜 Web標準 / CSS / Webアクセシビリティを語ろう」で発表した内容です https://techfeed.io/events/techfeed-experts-night-20220727 スライド内のリンクがクリックできるPDF版はこちら https://drive.google.com/file/d/1fc98v082exdGcCuxS73wEN_Qe2COvdTW/view?usp=sharing 各デモURL ■ 上下左右中央揃え https://codepen.io/tonkotsuboy/pen/qBbpYzj ■ スムーススクロール https://codepen.io/tonkotsuboy/pen/NWyNMOo ■ すりガラス https://codepen.io/tonkotsuboy
CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ
Posted by NAGAYA on Mar 9th, 2017 こんにちは。めぐたんです。 みなさんは「CSSで中央寄せする方法」といえば何が思いつくでしょうか？ 馴染みがあるのは、横方向に対して中央寄せを行うtext-align: center;やmargin: 0 auto;。では縦方向のときは？となると…途端に「なんだっけ」と止まってしまう方もいるかと思います（私です）。 そこでCSSの「中央寄せ」について、レスポンシブWebデザインにも対応しやすい7つの方法をまとめてみました！ 当記事で紹介していく方法はすべて、下記のHTMLを共通して使用していきます。 <div class="outer"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod t
2020年、知っておくと便利なCSSのプロパティのまとめ
ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。 Uncommon CSS Properties by Ahmad Shadeed はじめに CSS Gridでの中央揃え place-itemsプロパティ Flexboxと古き良きmargin: auto; あまり知られていない::marker疑似要素 text-alignプロパティ display: inline-flex;プロパティ column-ruleプロパティ background-repeat: roun
【iPhoneX対応】webサイトのSafe Area対応（iOS11.1とiOS11.2） - Qiita
iPhoneXが発売されしばらくたち、iOS11のリリースやバグで世間は賑わっているようです。 iPhoneXで新しく導入されたSafe Areaにコンテンツがどのように表示されるのか、ざっと検証してみました。 今回検証したポイント * 固定フッター（スマホサイトでよく見られるページ下部にメニューなどがfixedで固定されているデザイン）がどのような見え方になるのか * iOS11.1とiOS11.2の記述方法の違い 関連ワード Safe Area, viewport, css, constant(), env() 検証に利用した基本コード・修正前（一部を抜粋） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i
とほほのLess入門 - とほほのWWW入門
Less は、CSS をより使いやすく、よりメンテナンスしやすくするための CSS プリプロセッサです。 Less は Leaner CSS の略です。lean は「無駄のない」、「効率的な」という意味を持ちます。 2009年に Alexis Sellier(@cloudhead)氏によって開発されました。 最初は Ruby で記述され、後に JavaScript に移植されました。 現在(2015年9月13日)時点の最新版は v2.5.1 です。 大半のブラウザは Less を直接解釈できないため、サーバサイドまたはクライアントサイドで CSS に変換する必要があります。 変数を使用できるので、色や幅などの値を一括で変更することができます。 ミックスイン(クラス継承)を利用することにより、定義済みの CSS 定義を簡単に継承することができます。 関数を利用することにより、数学演算や色演算
MediaQuery まとめ - IT戦記
Media Query とは CSS3 から導入される Media Type を大幅に拡張する仕様です。 そもそも Media Type とは Media Type とは CSS 2 系に元々ある仕様で CSS を適用するメディア（パソコンの画面、テレビ、プリンタ用紙など）を指定するときに使います。 以下の例だと、 media 属性の中に記述されている all や screen や print が Media Type です。 <link rel="stylesheet" type="text/css" href="共通の.css" media="all" /> <link rel="stylesheet" type="text/css" href="パソコンの画面の.css" media="screen" /> <link rel="stylesheet" type="text/css"
リアルガチにヤバいAMP Start - Qiita
AMP(Accelerated Mobile Pages)がGoogle検索の仕様に加わってからひさしくなりますが、さらなる広がりの予感をAMP Projectがみせております。 ウェブデザインが収束の方向に向かっている BootstrapやMaterial design、Reactなどコンポーネント単位でウェブモジュールをつくっていこうという動きがあります。これは当たり前です。たとえ、オリジナルデザインでウェブサイトを作ろうとしても、パーツの再利用性などを考えることは効率やブランディングの観点からも正しく、みんなそうしてウェブサイトを作ってきたと思います。 2017年現在の現状を俯瞰的にみてみると、仕組みが出来てきたというフェーズに入ってきたのだと思います。 それによって、起こる現象はおそらく２つ。 1. ウェブデザインの２極化が起こる これは安易に想像がつきますね。一つの流れとしては、
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
borderやpaddingを指定するとはみ出す時の対処法 - Qiita
要素のwidthは要素内のコンテンツまでを指定する。 コンテンツの外のpadding、border、marginはwidthには含まれないため、 width=100%に全て収めようとして次のようにコーディングするとはみ出すことになる。
Documentation - Materialize
flash_on Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers. group User Experience Focused By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and an
SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。
初めての Twitter Bootstrap その２ 〜table編〜 - たなかたろーのにっき
こんにちは！ @taro_tnk です！ 今日は昨日に引き続き、Twitter Bootstrap の table について勉強します。 ※その１はこちら → 初めての Twitter Bootstrap その１ 基本形 まずは基本の形として、 以下のような html を準備します。 <table class="table"> <thead> <tr> <th>#</th> <th>名前</th> <th>職業</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>田中太郎</td> <td>プログラマ</td> </tr> <tr> <td>2</td> <td>田中次郎</td> <td>デザイナー</td> </tr> <tr> <td>3</td> <td>田中小次郎</td> <td>大学生</td> </tr> </tbody> </t
iOS・Androidのハイライト表示の指定について。
今回は iOS・Androidのハイライト表示の設定について 紹介します。 （以下 iOS→iOSのMobile Safari、Android→Androidの標準ブラウザ） リンクをタッチした時に出る(iOSでは)影だったり、(Androidでは)枠。 その色が設定出来るんです。 今回はCSS３を使った方法とjsを使った方法を紹介したいと思います。 iOS・Androidのハイライト表示の設定について まず初めに。 今回CSS３とjsを使う方法を紹介しますが、iOSとAndroid同じ記述で同じ動きをするものはｊｓを使用するもの、のみになります。 CSS３を使用する方法では、iOSとAndroid別々の方法を紹介しています。 それでは。 CSS３を使ったハイライト表示の指定 まず、CSS３でハイライト表示の設定をするにはこの記述をします。 -webkit-tap-highlight-co
WEBデザイナー/コーダーでも15分で導入出来るSCSS+Compass
下記、画面のように表示されれば、Rubyがインストールされています。 続けて、Rubyのパッケージ管理システムが最新かどうかのチェックを行います。 最新の状態であれば、下記のように表示されます。 最新でなくても、上記コマンドで最新になりますので、Rubyのインストールはひとまず完了です。 SassとCompassのインストールに移りますが、そのままコマンドプロンプトを使用するので、 ウィンドウは閉じずにいてください。 ● SassとCompassインストール そういえば、ここまで何の説明もなく来てしまいましたが、 SassとかSCSSとかComapssって何？という方もいるかと思いますので、 ちょっとだけ説明をします。 Sassはコンパイル(変換)を行うと、普通のCSSになる言語で、 ミックスイン(機能テンプレートのようなもの？)や変数を扱えたりしますが、 CSSとは似て非なるものなので、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
lit-css-loader
html-webpack-pluginで出力したHTMLにおいて、個別の外部JS・外部CSSを読み込む方法
Line Clamping (Cross-Browser, Pure CSS)
2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ
[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ![[CSS]レスポンシブ対応の最新版！サイズが不明な要素を天地左右の中央に配置するスタイルシートのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/b46fb0222c516388a0be1ca6e64e87199e362865/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017073001.png)
Bootstrap 5 & Vanilla JavaScript - Free Material Design UI KIT
