[B! css] ayakohiroeのブックマーク

ayakohiroe id:ayakohiroe

cssに関するayakohiroeのブックマーク (28)

CSSで実装できる、最新HTMLテクニック・スニペットまとめ 2023年9月版
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変です。﹁Webデザインの最新テクニックを知りたいけど、時間が足りない﹂という方へ。この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。しかも、CSSのみで表現できるスニペット多数で、コピペで利用できます。今後のプロジェクトに魅力的なWebテクニックを活用してみましょう。 CSSで実装できる、最新HTMLテクニック・スニペットまとめ iPhone 15 Pro紹介ページのCTAボタンコンテナスタイルクエリとスクロール駆動型アニメーションを使えば、JavaScriptゼロでAppleスタイルのダイナミックなCTAを作成できます。 See the Pen Apple Style CTA Reveal withCSS
ayakohiroe 2023/09/21
アニメーション

css

グラデーション
リンク
覚えておこう！ CSSのconic-gradient()関数を使用した美しいグラデーションの実装方法
CSSグラデーションといえば、linear-gradient()とradial-gradient()の線形グラデーションと放射グラデーションで実装することが多いと思いますが、もう1つ扇形グラデーションのconic-gradient()もあります。 conic-gradient()を使用した美しいグラデーションを実装するテクニックを紹介します。IEを除く、すべてのブラウザにサポートされています。 Use conic gradients to create a cool border まずは、実際のデモをご覧ください。 conic-gradient()のグラデーションは線形・放射とは異なり、色の変化は円の中心点から回転しながら色を変化させる扇型の円錐曲線グラデーションです。 See the Pen Conic Gradient Border by Adam Argyle (@argyleink
ayakohiroe 2022/06/08
グラデーション

css
リンク
CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック
スクロールの連鎖︵スクロールチェーン︶とは、ページ上にスクロールするコンテンツがあり、そのコンテンツをスクロールして終点に到達するとメインのコンテンツもスクロールしてしまう現象です。モーダルにスクロールがある場合、スマホのナビゲーションにスクロールがある場合、固定サイドバーにスクロールがある場合など、スクロールチェーンしないように実装するCSSのテクニックを紹介します。 Prevent Scroll Chaining With Overscroll Behavior by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめにスクロールチェーンとは古い解決方法今の解決方法: overscroll-behavior overscroll-behaviorの使用方法終わりにはじめに posi
ayakohiroe 2021/11/11
css
リンク
【初心者向け】CSSセレクタとは？セレクタの種類や指定方法を解説！（基礎編） | ビジネスとIT活用に役立つ情報（株式会社アーティス）
CSSとは正式にはCascading Style Sheets︵カスケーディング・スタイル・シート︶といい、webサイトにデザインを施すための言語です。HTMLとセットで扱われ、HTMLで記述した文章構造を装飾し見栄えを良くする役割を担っています。今回はCSSを記述する際に必要となる﹁セレクタ﹂について解説していきます。 CSSセレクタとは︵HTML・CSSの基礎知識︶ CSSはHTMLに記述された指定の範囲または要素に対して装飾を施します。そして、CSSによるデザイン指定をどのHTML要素に適用させるかを指定するのに用いられるのが﹁CSSセレクタ﹂です。 HTMLの構造 CSSを理解する前にまずHTMLがどのような仕組みで記述されているかを理解しておく必要があります。 HTMLはタグと呼ばれる記号で構成されています。タグには一般的に開始タグと終了タグがあり、記述をタグで囲むことにより
ayakohiroe 2021/09/30
css
リンク
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。この記事では、私︵さかっちょ︶がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransf ormで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
ayakohiroe 2021/02/25
また多いな！解説がありがたいしわかりやすい

webデザイン

css
リンク
CSSの中央揃えで、最も万能で信頼できる実装テクニック
CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価します。 Centering in CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに 1. Content Center 2. Gentle Flex 3. Autobot 4. Fluffy Center 5. Pop & Plop 中央揃えに最適なテクニックはじめに CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し、素直にこれらのジョー
ayakohiroe 2021/01/14
css

テクニック

コンテンツ

あとで読む
リンク
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケートなんでいまさら？なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
ayakohiroe 2020/07/03
書かずともちゃんと、表示されるしと思って書いてなかった。一記事の画像が多いと面倒になって、、、。なので画像DDしたら自動でタグ作ってくれるJS書いた。

●レスポンシブ

●ブラウザ

●css
リンク
CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！
複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()、CSSの新しい疑似クラスが、SafariとFirefoxで利用できるようになりました。そんな:is()と:where()の便利な使い方を紹介します。 CSS :is() and :where() are coming to browsers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 :is()を使用すると、繰り返しを減らせる :where()を使用すると、詳細度を低くキープできる CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 CSSの新しい疑似クラス「:is()」「:where()」が、Safari（Tech Preview 1
ayakohiroe 2020/06/17
css
リンク
CSSで実装されたこのサラブレッド、気持ちよく走るぞ -Clip Clop Clippity Clop
デモを紹介する前に、その動きをGIFアニメーションにしてみました。脚をはじめ、頭や首、胴体、尻尾、土煙まで、すべてがCSSで動きます。実際の動作は、下記でお楽しみください。アニメーション中にクリックすると、スローモーションに変わります。
ayakohiroe 2019/08/07
css

アニメーション

html
リンク
ソースコード変換 < & " > br改行　WEB用に自動エスケープ
オプション2　textarea オプション2　　　※ 重複設定に注意　多量のスペースや改行は自動削除空行を削除カンマ前後に空白削除 \n改行⇒カンマ連続カンマ⇒１個最後のカンマを削除カンマ⇒\n改行全空スペース⇒半角全空スペース⇒削除簡易制作した個人用ツール︵作者環境用の仕様︶ですが、 SyntaxHighlighterとカンマ区切り用に少々改良して公開。︵改行コードは、あえて\r,\nで分けずに\nで書き出し︶チェックボタンも優先順まで考慮していないので、オプションを上手く利用し自己責任で動作や変換結果の確認を！ SyntaxHighlighter  <script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascr
ayakohiroe 2019/01/21
javascript

js

ソースコード

ノウハウ

web

css

エスケープ

便利ツール

ブログ
リンク
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し︵h1〜h6タグ︶のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
ayakohiroe 2018/11/14
わくわく

css

デザイン

オシャレ

カスタマイズ

webデザイン

見出し
リンク
CSSで画像などをホバーした時に回転させる方法
2017/06/22 画像などにホバーした時、回転させるにはtransf ormプロパティを利用します。その他諸々、回転を綺麗に見せるために調整しなければいけません。サンプルコードホバー時に90度回転させる例です。 div:hover .target { transf orm: rotateZ( 90deg ) ; }デモZ軸Z軸を基軸とした回転をする例です。コンテナとなる要素(.container)で囲まないと上手く回転しません。2箇所あるrotateZの部分を、rotateX(水平方向)、またはrotateY(垂直方向)にすることで回転方法を変更できます。  <!DOCTYPE html> <html> <head> <style> .container { width: 100px ; height: 100px ; line-height:
ayakohiroe 2018/04/16
“transform: rotateZ( 90deg ) ;”

css

画像

html
リンク
Apple風のかっこよくて美しいデザインの背景49種類を簡単に実装できるスタイルシート -HUE.css | コリス
文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方使い方は、簡単です。﹁hue.css﹂をダウンロードし、外部
ayakohiroe 2017/01/19
webデザイン

css

Apple

グラデーション

スタイルシート

CSS3

コーディング
リンク
CSS Niteベストセッション2015
「全部はチェックしきれないので、これは！と思うものをチョイスして欲しい」という声をよくいただくため、2010年からベストセッションを選定して発表しています。2015年のベストセッション＋αを選んでみました（なお、プロフィールは発表時のものです）。 2010年から2019年のベスト・セッション CSS Niteベスト・セッション2019 CSS Niteベスト・セッション2018 CSS Niteベスト・セッション2017 CSS Niteベスト・セッション2016 CSS Niteベスト・セッション2015 CSS Niteベスト・セッション2013 CSS Niteベスト・セッション2012 CSS Niteベスト・セッション2011 2010年のベスト20セッション CSS Niteでは、ほとんどのセッションのスライドや音声を公開しています（無料版はすぐに、有料版は少し時間をおいてから
ayakohiroe 2016/02/16
css

スライド

CSS Nite

セッション

ベスト
リンク
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-it emなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-it em; border: none; } ..... } Chrome、Safari、Firefox対応。IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
ayakohiroe 2015/08/25
テーブル

table

webデザイン

css

jQuery

レスポンシブ
リンク
CSSで図形を描く仕組み - Qiita
borderを使って三角形を描く方法まとめ釣りのためにタイトルはああなっているけど、原理を知る上で重要なのは台形の描き方。まずは、よくサンプルで見かけるものから。 <div style="width: 0px; height: 0px; border-top: 20px solid #000; border-right: 20px solid #F00; border-bottom: 20px solid #0F0; border-left: 20px solid #00F;"> </div>
ayakohiroe 2015/06/19
css

まとめ

重要

html
リンク
DOMAIN ERROR
ドメインウェブの設定が見つかりません考えられる原因ドメインウェブの設定がまだ行われていない。ドメインウェブの設定がまだ反映されていない。(反映には数時間～24時間かかることがあります) ドメインウェブ・DNSの設定が誤っている。アカウントが存在しない、契約が終了している、削除されている。
ayakohiroe 2015/05/15
デザイン

Webデザイン

見出し

LINE

css
リンク
素晴らしい！HTML+CSS+jQueryで絵本のようにページをめくっていけるぜひ参考にしたいコード | 9ineBB
絵本をクリックしていくと、ページが次々にめくっていけるようになっています。また、逆方向にもめくることが可能です。さらに画面幅に合わせて大きさも変わるリキッドデザインです。とにかく、ページのめくれ具合ページのめくれた後のちょっとした動きがとても良く出来ていてクオリティーが高いですこうった形のギミックをWEBサイトに導入するときにはぜひ参考にしたいコードです – CODE – HTML <div class="book bound"> <div class="pages"> <div class="page"> <h1>Boyhood</h1> <h2>by Jason Hibbs</h2> </div> <div class="page"></div> <div class="page"></div> <div class="
ayakohiroe 2015/05/15
html

jquery

css

Webデザイン

絵本

ページめくり
リンク
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす﹁動く﹂といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
ayakohiroe 2015/03/04
CSS3

エフェクト

webデザイン

まとめ

Web

css
リンク
Change Text Link Hover Effect Using CSS3
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！目次ちょっと予備知識文字色をふんわり変える背景色をふんわり変える文字をぼかす光を放つグロー効果背景を角丸にレインボーカラーに拡大・縮小角度を変えるくるっと回転 1. ちょっと予備知識今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
ayakohiroe 2015/03/03
css

まとめ
リンク
1 2 次のページ