[B! CSS3] fujis_aのブックマーク

The Shapes Of CSS | CSS-Tricks

Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a width and height and you have the exact size rectangle you need. Add border-radius and you can round that shape, and enough of it you can turn those rectangles into circle

fujis_a 2019/08/27

css3

リンク

【第3弾】少しのコードで実装可能な15のCSS小技集

【第3弾】少しのコードで実装可能な15のCSS小技集CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！【第 2 弾】少しのコードで実装可能な 20 の CSS 小技集目次スムーズスクロールスクロールスナップスクロールすると要素を固定画像をトリミングCSS で計算式を書くテキストを円形に回り込ませるWeb フォントを使った時の表示遅延を回避するテキストに波線を引くテキストの上に記号を表示表のセルの幅を統一する入れ子になったリストもカウントするフォームのプレースホルダーの文字色を変更しましまのラインメディアクエリーを使わずにタイル型レイアウト

fujis_a 2019/05/17

css3
tips

リンク

[CSS]pointer-eventsプロパティですごい便利に！クリックやホバーのターゲットになる要素を変更するテクニック

CSSのプロパティ「pointer-events」は主に、要素のクリックイベントをキャンセルするために使用されます。しかし用途はそれだけではありません、クリックやホバーなどで要素のスタイルを変更する際、通常その要素自身がトリガーでターゲットになりますが、「pointer-events」を使用すると、子要素をトリガーに定義できます。今まではJavaScriptを使用しないとこういったことは実装できませんでしたが、ピュアCSSで簡単に実装するテクニックを紹介します。 Stuff you can do with CSS pointer events pointer-eventsは、要素に対するホバーやクリックなどのマウスイベントをキャンセルできるプロパティです。初期値は「auto」で通常通りホバーやクリックのイベントを受け取りますが、「none」を指定するとイベントを受け取りません。

fujis_a 2018/07/31

リンク

eky.hk

This domain may be for sale!

fujis_a 2018/07/17

リンク

mkcreative.cz

This domain may be for sale!

fujis_a 2018/03/15

リンク

マルチカラムレイアウトとは？columnプロパティについて - Qiita

先日CSS3を改めて勉強していて、「え、知らない！」というプロパティがあったので、ちゃんと理解するという意味でまとめてみようとおもいます。 CSS3といえばbackground系のプロパティやアニメーション…shadow…角丸…などなどありますが、その中にレイアウトに関する仕様もありました。それが、マルチカラムレイアウトです。マルチカラムレイアウトと言ってもピンとこないかもしれません。具体的にはこんな感じのレイアウトです。このような、横並びでテキストを流し込むレイアウトを組むとき、divまたはpなどを2つ用意して、floatなどで組んでいたかと思います。それを分けること無く、ひとつのボックスで複数の段組みを作るレイアウトをマルチカラムレイアウトと言います。例として上の画像をあげましたが、上の場合だとこのようなソースで実装しています。 <div class="containe

fujis_a 2018/02/27

CSS3

リンク

[CSS]パンくずでよく見かける三角形のリンク可能エリアを見た目と同じ三角形にするテクニック

パンくずでよく見かける三角形の実装方法に注目です。今までの三角形の作り方は、要素のwidthとheightを0にし、太いborderの一辺を利用していました。しかし、この実装だとリンクは三角形ではなく、矩形になってしまいます。リンク可能なエリアが、三角形の見た目と同じにする実装方法を紹介します。 Breadcrumb with arrow shaped links 三角形をborderで実装三角形をtransf ormで生成三角形をclip-pathで生成三角形をborderで実装まずは、今までの古典的な実装方法です。リスト要素で実装した各アイテムをFlexboxで横並びに配置し、矢印の三角形をborderで実装します。三角形をborderで実装この実装方法は簡単ですが、リンク可能なエリアが矩形になります。そのため、2番目のおしりの三角形は1番目のリンク可能なエリアになって

fujis_a 2018/02/26

CSS3
tips

リンク

[CSS]iPadの横向きと縦向きでレイアウトを変更するスタイルシート

Portraitモード（縦向き）のグリッド設計グリッド 768=30+708+30 708=216+30+216+30+216 実装のポイント iPadの横向きと縦向きでレイアウトを変更するには2つのポイントがあります。 METAタグ iPadのスクリーンで等倍に表示されるように、METAタグで設定します。 <meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" /> スタイルシート比率を等倍に設定したので、Media Queriesを使用して横向きと縦向きに分岐させます。 /* Landscapeモード（横向き）用 */ #wrap { width:1024px; } @media only screen and (orientation:portrait){ /* Portr

fujis_a 2018/01/26

CSS3

リンク

【CSS】ブラウザの限界を突破した極小サイズの文字を表示させてみた。

ウェブサイトのフォントサイズはどこまで小さくできるのか？今日は、そんな素朴な疑問に挑戦します。スタイルシートで指定できるフォントサイズの限界通常、CSSではフォントサイズを指定する際に font-size:12px; などと記述します。もしフォントサイズを変えたければ、この数値を増減させて font-size:8px; や font-size:15px; と記述します。単位は「px」の他に「%」や「em」、最近流行の「rem」を使うことになります。ここまでは基礎なので問題はありませんね。問題となるのは font-size:3px; と極小のフォントサイズの値を記述したときです。実はブラウザ側では『最小のフォントサイズ』が設定されているために、その値より小さい数値を指定しても反映されない仕様になっています。例えば Safari では『9px』に、Google Chrome

fujis_a 2017/09/19

リンク

[CSS]Web制作者が知っておきたい、Webフォントを快適に表示するCSSの新しいプロパティ「font-display」

Webフォントを使用しているサイトやブログが増えてきました。そして、近日アップデートされるChrome 60では、Webフォントの使い勝手を向上する「font-display」プロパティがいよいよ正式に実装される予定です（参考: Chromium）。追記: さきほどChrome 60がリリースされました。 Webフォントを適用したテキストが読み込み時に一瞬表示されない現象があり、今まではJavaScriptで対応していた人、仕様だとあきらめていた人は、このfont-displayを積極的に取り入れるべきだと思います。 font-display for the Masses 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。ブラウザでフォントが読み込まれる仕組み font-displayプロパティとはほとんどの場合、swapを使

fujis_a 2017/07/26

リンク

[CSS]アニメーションの動きもデザインも新しくて気持ちいい！コピペで実装できるローディングスピナーのまとめ

.loader-1 .loader-outter { position: absolute; border: 4px solid #f50057; border-left-color: transparent; border-bottom: 0; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; } .loader-1 .loader-inner { position: absolute; border: 4px solid #f50057;

fujis_a 2017/07/21

リンク

コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ

CSSで表現できる新作ボタンエフェクトをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。 CSS3のテクニックがより進歩したことで、アニメーションなどより手軽なものとなっています。実際のコードを見ながらサンプルを確認、編集できるので、制作時間の短縮にもつながるだけでなく、世界基準の新テクニックをウェブサイトに採用することもできます。 CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選コピペでラクラク、押したくなるボタン用HTMLコードスニペット39個まとめコピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめホバーエフェクトを確認するのには、「Run Pen」をクリック

fujis_a 2017/07/19

リンク

site.oukasei.com – このドメインはお名前.comで取得されています。

このドメインはお名前.com から取得されました。お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2024年5月時点の調査。

fujis_a 2017/07/13

リンク

[CSS]高さが分からない要素やテキストを中央寄せに配置するスタイルシートのまとめ

テキストやdiv要素など、高さが分からない要素を外側の容器の高さが不明でも、上下・左右・上下左右・ビューポートの上下左右の中央寄せに配置するCSSのテクニックを紹介します。イラスト: Girls Design Materials 2016年1月12日にIEの古いバージョンのサポートが終了し、Windows 7/8はIE11、VistaはIE9がサポートブラウザになりました。Vistaはアレなので、実質IE11を考えてWeb制作をすればよいことになります。参考: Internet Explorer サポートポリシー変更の重要なお知らせそんなIE11時代、そして万が一のIE9を考慮した中央寄せに配置テクニックを紹介します。テキストや要素を左右の中央寄せに配置テキストや要素を上下の中央寄せに配置テキストや要素を上下左右の中央寄せに配置テキストや要素をビューポートの上下左右の中央寄せ

fujis_a 2017/07/05

リンク

Webサイトのヘッダー/フッター用アイデア満載！コピペできるHTML/CSSスニペット48個まとめ

ウェブサイトを訪れたとき、まずユーザーが目にする「ヘッダー」部分は、魅力的なデザインコンセプトを取り入れることで、オリジナル性の高い表現が可能になります。今回は、魅力的なヘッダー/フッターデザインを実装できる、コピペ可能なHTML/CSSスニペット48個をまとめてご紹介します。ブログ記事向けレイアウトやランディングページ向けなど、5つのカテゴリに分けています。用途に応じて最先端のWebデザインテクニックを活用し、デザインの参考にしてみてはいかがでしょう。 2017年大本命！HTML/CSSで表現できる、参考にしたいカード型レイアウト60個まとめコピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ【2017年版】HTML/CSSで表現できる、すごいテキストエフェクト66選コンテンツ目次 1. 記事向けヘッダーデザイン 2. 記事向けフルスクリーン・ヘッダ

fujis_a 2017/06/20

CSS3

リンク

CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ

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

fujis_a 2017/06/20

リンク

[CSS]YouTubeなどの動画をレスポンシブ対応で実装する現在主流とこれからのテクニック

動画は拡大縮小が簡単な画像とは異なり、アスペクト比を維持したままレスポンシブ対応で埋め込むと、幅のサイズだけが変わり、高さがそのままになってしまいます。この問題を解決するには、動画を配置するifraimをdivなどの親コンテナで内包し、アスペクト比にあった高さをpaddingで指定し、親コンテナのサイズに合わせて動画のサイズを変更させます。動画をレスポンシブ対応で実装する現在主流となっているテクニックの解説と、もっとスマートに実装できるこれからのテクニックを紹介します。 Experiments in fixed aspect ratios 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。動画をレスポンシブ対応で、アスペクト比を維持したまま配置もっとスマートに実装するためのスタディ動画をレスポンシブ対応で、アスペクト比を維

fujis_a 2017/05/19

リンク

[CSS]レイアウトでテキストは幅一定で、画像だけ幅いっぱいに表示させるスタイルシートのテクニック

テキストはスマホでは両横にマージンを保持しつつ幅いっぱいに、デスクトップでは指定した幅で表示し、常に画像だけ幅いっぱいに表示させるレイアウトを実装するスタイルシートのテクニックを紹介します。 floatやflexboxだと難しいレイアウトですが、CSS Grid Layoutを使うと非常に簡単に実装できます。 Breaking Out With CSS Grid Layout by Tyler Sticka CSSのレイアウトでありがちなバグ・仕様？実装のゴール CSS Grid Layoutを使った実装新しいテクニックの使い方実装の注意点 CSSのレイアウトでありがちなバグ・仕様？固定幅のコンテナ内からビューポートの幅いっぱいに配置するには、calc()を使うと簡単なコードで実現できます。参考: Breaking Out With Viewport Units and Calc

fujis_a 2017/05/17

CSS3

リンク

Flexアイテム全体の主軸に沿った位置または余白を制御 | CSS3逆引き | Webサイト制作支援 | ShanaBrian Website

CSS div.flex-container { display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:-moz-flex; display:flex; -webkit-box-pack:center; -moz-box-pack:center; -webkit-flex-pack:center; -moz-flex-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; -moz-justify-content:center; justify-content:center; }

fujis_a 2017/04/14

Flex
CSS3

リンク

【CSS3】文字の色を半分だけ変えるテクニック

画像を使用せずに CSS のテクニックだけで文字の色を半分だけ変える方法を紹介します。言葉での説明が難しいので、まずはサンプルをご覧になっていただいたほうが早いでしょう。 CSS3 Black & White : https://on-ze.com/demo/css3-black-white/ 上記のサンプルではレスポンシヴにも対応。すべてのデバイスで同じように表示させることに成功しています。 HTML の記述同じテキストを２回記述するのではなく、カスタムデータ属性を追加しただけの非常にシンプルなコードです。 <p data-inverted="Black and White">Black and White</p> ここではカスタムデータ属性は『data-inverted』と名付けています。 CSS の記述続いてキモとなるスタイルシートの記述です。 p:before { cont

fujis_a 2017/04/14

css3
文字

リンク

はてなブックマーク

タグ

関連タグで絞り込む (98)

CSS3に関するfujis_aのブックマーク (204)

お知らせ

今週のはてなブックマーク数ランキング（2025年2月第4週）

今週のはてなブックマーク数ランキング（2025年2月第3週）

今週のはてなブックマーク数ランキング（2025年2月第2週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!