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

【CSS】animationプロパティを使ったマウスホバーエフェクトの巻き戻し | UNORTHODOX WORKBOOK | Blog

CSSでマウスホバーエフェクトといえばtransitionプロパティを使ってアニメーションさせることが多いと思いますが、少し複雑なアニメーションをさせたい時はtransitionでは難しいことがあると思います。そんな時は、hover疑似クラスと合わせてanimationプロパティを使い、@keyframesでうまいことやるといい感じにすることができるので、個人的にはよく使っているのですが、animationプロパティでは、マウスアウト時にアニメーションが行われず、瞬時に元の位置へ戻ってしまい、少し不格好になってしまうのが悩みの種でした。これを何とかしたくて色々やってみた結果、すごくシンプルな方法ですが、animationプロパティでもマウスアウト時にアニメーションさせることができたので、簡単にご紹介します。マウスアウト時の挙動とりあえず、それぞれのマウスアウト時の挙動を確認します。

elm_arata 2025/01/30

リンク

position:stickyが効かない原因&追従させる方法【STUDIO】

ある要素をスクロールと同じ動きで追従させて、終点で固定させたい場合ってありますよね。そんなときは「position: sticky」が便利です。動き方の説明は文章だと説明が難しいのですが、動画だと以下...

elm_arata 2024/08/20

CSS

リンク

自力でWebサイトを作れるようになるブロックコーディングとは？　HTML/CSSの脱初心者を目指して

HTML/CSSの知識を習得しても、いざWebサイトを構築しようとすると手が止まってしまう。それは知識の体系化ができていないから、と語るのが『HTML/CSSブロックコーディング』の著者である笠井枝理依さんです。笠井さんは本書で、そうした悩みを解決する手法としてサイトの要素をブロック単位で分解してコーディングしていくブロックコーディングを解説しています。今回は本書からWebサイトをブロックに分解する方法を紹介します。本書は『HTML/CSSブロックコーディングデザインをすらすら再現できる』の「Ch01　モックアップをブロック分解」を抜粋したものです。掲載にあたって編集しています。モックアップとはモックアップとは皆さんが考えるところの「デザイン」であり､日本では「デザインカンプ」と呼ばれることもよくあります。Webページがどのように表示されるのか､実際にブラウザで表示される場合と遜色

elm_arata 2022/12/12

リンク

box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴 - ICS MEDIA

box-shadowだけじゃない！CSSでできる色々な影の表現と意外に知らない落とし穴ウェブページのデザインやコーディングをしている人なら、誰でも一度は影をつけたことがあるでしょう。一方でその影にどれほどの表現や技術のバリエーションがあるか、意識したことのある人は少ないかもしれません。影を付ける方法としてはCSSのbox-shadowが一般ですが、そのほかにもいくつもの技術・手法が存在します。ウェブの世界に限らず、年々変化するデザイントレンドにおいても影の扱いは重要なテーマです。たとえば少し前に流行したロングシャドウや今年のトレンドとも言われるNeumorphism（ニューモーフィズム）など、ユニークな表現には影のテクニックを活用できるものがたくさんあります。 ▼ CSSで作成したロングシャドウ（画像上部）とニューモーフィズム（画像下部）の例：デモを別ウインドウで表示デモのソース

elm_arata 2022/05/16

リンク

経歴や会社の沿革ページに！簡単なCSSで実装するタイムライン

2014年3月28日 CSS, Webサイト制作ちょうど今作っているサイトで、経歴をタイムラインで表現するページがあったのでコードを紹介。コード自体はとってもシンプルなので、カスタマイズ次第でどんなデザインのサイトにもあわせられると思います。文章にするとゴチャゴチャしがちな経歴・沿革をスッキリと表示しましょう！ ↑私が10年以上利用している会計ソフト！サンプル Chrome, Firefox, Safari, IE9・10で動作確認。 See the Pen Timeline by Mana (@manabox) on CodePen. モバイルファーストってことで、640px未満の幅のデバイスには年月・見出し・詳細文章を順に表示します。モバイル版はこんな感じ。サンプルページの画面の幅を調整して比較してください。 HTML timeline というクラスのついたリストの中の li タ

elm_arata 2021/12/21

リンク

CSSすら不要！detailsとsummaryタグで作る簡単アコーディオン

2018年11月14日 CSS, HTML 長い文章や補足説明をアコーディオン（折りたたみ）にしたい時ってありますよね。そんな時に使える details と summary タグを紹介します。CSSなしでも実装できますが、CSSを加えてより素敵な表現をする方法も挑戦しましょう！ ↑私が10年以上利用している会計ソフト！ detailsとsummaryタグの基本的な使い方 details タグで囲んだ部分がアコーディオンとして設定されます。その中に summary タグで最初から表示させておきたい部分を囲めば完成！ summary タグの部分をクリックすると、詳細文が表示されます。 HTML <details> <summary>Adobe Photoshop</summary> 画像編集ソフト。写真やイラスト、3Dアートワークの作成、webサイトやモバイルアプリのデザイン、動画編集や描画な

elm_arata 2021/12/21

CSS

リンク

JavaScriptのIntersection Observerでスクロールに合わせてグラデーションの色を変更する

2023年2月7日 JavaScript 新しいMacbook Proが発売され、特設ページが公開されています。そのページの中で私の目に止まったのは、Macbook Proのスペックではなく、スクロールに合わせて動くグラデーションカラーのテキストでした。今回はこれをJavaScriptの Intersection Observer を使って実装した例を紹介します。 ↑私が10年以上利用している会計ソフト！この記事は動画でも紹介しています。動画派の方はこちらを御覧ください！このテキストを実装したい！ Macbook Proの紹介ページにあるグラデーションカラーのテキストです。スクロールするとグラデーションの位置も変わるのがわかりますね！ Intersection Observerとは？従来、スクロールに合わせて要素を操るには scroll というイベントを利用していました。ただ、それだ

elm_arata 2021/12/21

リンク

CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説

CSSの数学関数と言えば、calc()が便利ですよね。しかし、便利な数学関数はcalc()だけではありません！先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数「min()」「max()」「clamp()」の使い方を紹介します。最大幅や最小幅を計算式で定義できる「min()」「max()」、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる「clamp()」、これからのWebページやスマホアプリの実装にかなり役立つと思います。 Everything I Learned About min(), max(), clamp() In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに CSSの比較関数の

elm_arata 2021/12/21

clamp()

CSS

リンク

Modern fluid typography editor

clamp(1.5rem, 2vw + 1rem, 2.25rem); clamp(1.5rem, 2vw + 1rem, 2.25rem); Copy link https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=24&fluidSize=2&relativeSize=1&maxSize=36

elm_arata 2021/12/21

font-size: clamp()

リンク

CSSのclip-pathプロパティでいろいろ簡単に実装できる、便利な使い方と実装のポイント

CSSのclip-pathプロパティは、非常に便利です。セクションの区切りを斜めにしたり、ボタンに波紋のエフェクトをつけたり、スクロールして要素がビューポートに入った時にアニメーションで表示されたり、最近のWebページやスマホアプリで見かけるエフェクトはclip-pathプロパティを使用すると、簡単に実装できます。 clip-pathプロパティの基礎知識と便利な使い方、実装のポイントなどを詳しく解説します。 Understanding Clip Path in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに clip-pathプロパティにおける座標 clip-pathプロパティに使用できる値 clip-pathプロパティを使用した実装終わりにはじめに clip-pathプ

elm_arata 2021/08/03

リンク

The Rules of Margin Collapse • Josh W. Comeau

Instead of sitting 48px apart, their 24px margins merge together, occupying the same space! This idea might sound simple, but if you've been writing CSS for a while, you've almost certainly been surprised when margins either don't collapse, or they collapse in weird and unexpected ways. In real-world projects, all kinds of circumstances can complicate matters. The good news is that once we underst

elm_arata 2020/12/15

CSS
margin

リンク

Web制作の面倒な作業をラクにするCSS便利ツール87個まとめ

この記事では、Webデザイン制作の面倒な作業をラクにするCSS便利ツール87個をまとめています。なお、新しいツールを随時アップデートしています。 CSS FlexboxやGridをつかったレイアウト生成ツールや、レスポンシブ対応の画像ツール、配色に困ったときに便利なツール、多彩なCSSアニメーション、話題のニューモーフィズムなど、CSSスタイリング時間節約や、さまざまな問題を瞬時に解決することを目的に作成された便利なツールが揃います。 Web制作に活用したい最新ツールと合わせてチェックしてみてはいかがでしょう。これだけあれば困らない！Web制作を快適にする最新オンラインツール48個まとめ Web制作�の面倒�な作業をラクにするCSS便利ツールまとめ CSS box-shadow Examples さまざまなサイトで実際に使われているCSS box-shadowを集めているライブラリ。お好

elm_arata 2020/07/08

リンク

https://spyweb.media/2017/12/04/ie-edge-css-hacks/

elm_arata 2019/10/08

リンク

UI Interactions

copy.ui-arrow-02 { position: relative; width: 30px; height: 30px; border: none; background-color: transparent; transition: transf orm 0.3s ease; } .ui-arrow-02:before, .ui-arrow-02:after { content: ''; background-color: #2980b9; position: absolute; top: 50%; width: 1px; height: calc(70% - 1px); margin-top: -35%; } .ui-arrow-02:before { left: 50%; margin-left: -25%; transf orm: rotate(-45deg); } .ui-

elm_arata 2019/09/13

ハンバーガーメニュー

リンク

[CSS]コンテンツの区切り線、デザインのアクセントに使えるラインやボーダーを実装するテクニックのまとめ

コンテンツの区切りに使用する線、デザインのアクセントに使えるラインやボーダーをCSSで素敵にデザインするスタイルシートのテクニックを紹介します。 borderプロパティを使ったシンプルなものから、グラデーションや疑似要素やアニメーションを使ったアイデアが素晴らしいものまで、コピペで簡単に利用できます。

elm_arata 2019/09/13

CSS
snippet

リンク

【実務から学ぶ】フロントマークアップの進め方 | Hypertext Candy

IT業界には「フロントエンドエンジニア」という職種があります。主にHTML・CSS・JavaScriptを使ったコーディングと、更新や保守も考えた設計を行います。僕はこれまでサーバーエンジニアとして実務をしてきましたが、フロントのコーディングをする事もありました。ですが、今回改めてフロントエンドエンジニアとして一からマークアップを行う機会があり、学びがとても多かったので記事に書いてみたいと思います。本記事は、こんな方向けです。フロント・マークアップのコーディングに興味がある方。すでにHTML・CSSの経験はあるが、なんとなくコーディングしていた。実際どこから手をつければいいの？早くコーディングをするにはどうしたらいいの？ etc... こうすれば効率よくコーディングすることができた！という実務から得た学びを、3つのポイントにまとめました。サクッと読んでいただければ幸いで

elm_arata 2019/04/11

リンク

表示領域にピタッと移動！CSSでスクロールスナップを実装しよう

2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ ↑私が10年以上利用している会計ソフト！スクロールスナップの基本 See the Pen scroll-snap basic demo by Mana (@manabox) on CodePen. スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね！このデモの構成を見ていきましょう： HTML ピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。 <div class="container"

elm_arata 2019/01/18

リンク

游ゴシックのfont-family指定方法！@font-faceは絶対NG！WindowsのChromeでかすれる問題徹底検証 | WEMO

游ゴシックは素晴らしい。まず前提としてこれは間違いのないことです。ただ、面倒くさい問題があるんですよね。そう、かねてより議論されている、「WindowsのChromeで見にくいんすけど」問題。この問題についてちょっと調べればわかるのですが、@font-face で解決している人がかなり多いです。僕も以前までそうしていました。