HTMLとCSSでつくる！ リンクテキストのホバー時アニメーション11選 - ICS MEDIA
テキストをホバーしたときの変化やアニメーションをつくることは、どのようなサイトをつくっていてもほぼ必ず行う工程ではないでしょうか。 テキストがリンクであることをユーザーに伝えるという点では、ブラウザのデフォルトスタイルのような下線のみで十分な場合もあると思います。 しかしそれだけではなく、変化をつけてよりわかりやすくしたい場合や、サイト全体の雰囲気に合わせたい場合にちょっとしたアニメーションが効果的です。 今回はHTMLとCSSのみで作成できる、シンプルながら少し目を引くアニメーションをテーマに実装例を紹介します。 ▼今回紹介する実装例一覧 とくに、以下のようなデザイナー／エンジニアにとって参考になれば嬉しいです。 HTMLとCSSのみでどのようなホバー時のアニメーションができるのか知りたい 透明度の変化や、下線のつけ外し以外の実装例の引き出しを増やしたい ※今回の実装例では主にヘッダー／
これは嬉しい ChatGPTプロンプト書き方のコツ、OpenAIが公開
OpenAIは、大規模言語モデル（GPT-4）でよりよい結果を出すためのプロンプトエンジニアリング（プロンプトのノウハウ）入門テキストを同社のウェブサイトで公開している。 同テキストでは、現在同社で最高の性能を持つ大規模言語モデルGPT-4を対象に、よりよい結果を導くための6つの戦略と、それぞれを実行する際の具体的な戦術（コツ）が掲載されている。 また、「Prompt examples」のページでは、上記で紹介したものを含む多数のプロンプト例が紹介されており、すぐに利用できるようになっている。 では紹介された6つの戦略を見ていこう。 明確な指示を書く LLMは利用者の心を読むことができないので、回答が長すぎる場合は「簡潔に」、単純すぎる場合は「専門家レベルで」と明示的に依頼する必要がある。 具体的な戦術としては下記が提案されている。 ・より関連性の高い回答を得られるよう、質問は詳細に ・モ
アクセシビリティ | SmartHR Design System
アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざまな環境や状況にいる人、高齢者、日本語以外を得意な言語とする人など、すべての人のためのものです。人だけでなく、サービスや情報にアクセスする機械(ロボット)もアクセシビリティの影響を受けます。 SmartHRの開発方針SmartHRは「well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会を作る。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。 誰もがその人らしく働ける社会を実現するため、SmartHRはアクセシビリティの向上に取
iPhoneのホーム画面から「ChatGPT」をサクッと使える方法が話題 – 究極の時短に！
高クオリティなオリジナルのテキストを生成してくれる、AIチャットボット『ChatGPT』。今、世界中で大きな注目を集めている『ChatGPT』だが、利用するにはブラウザを経由しなければいけないので、起動に多少の時間がかかってしまうのは、すでに読者の皆さんもご存じの通りである。せっかく便利なツールなのだから、さらにシームレスに活用する方法はないのだろうか。 2023年3月11 日に投稿された、シロフネ Web3の案内人@web3_shirofuneさんの「知らなきゃ損です。今話題のAI『ChatGPT』はホーム画面からサクッと使える。あきらめて毎回ブラウザを開いてたら時間のムダ。ショートカットを設定したら、アプリみたいに１タップするだけで調べごとできるから超便利。家族や友達もこれ教えてから使い倒してます。今日からすぐ始められる使い方は」というツイートには、『ChatGPT』をホーム画面から
Web制作に役立つ超便利ツールが登場！ HTMLやCSSやJavaScriptのさまざまなツールがひとまとめになったツールボックス -He3
HTMLやCSSやJavaScriptの軽量化・整形、FlexboxやGridやbox-shadowのジェネレーター、各種エンコード・デコード、データの暗号化、ダミーテキスト・ダミーデータ・ファビコン生成、テキスト比較（Diff）など、Web制作に役立つさまざまなツールがまとめて利用できる『He3』を紹介します。 Windows, macOS, Linux対応の無料アプリで、今までオンラインであちこちの各ツールを利用していた人とかにかなり便利なツールだと思います。 He3: Modern Developer Toolbox He3の特徴 He3のダウンロードとインストール He3の使い方 He3の特徴 He3は、200種類以上のWeb制作に役立つ便利ツールが詰め込まれたデベロッパー向けのツールボックスです。 200種類以上あるツールは、カテゴリ別にまとめられており、スマート検索機能ですぐに
明日からできる、爆速Figma活用術 - エムスリーテックブログ
こんにちは、エムスリーデザイングループでチームリーダーをやりながらエンジニアリングGも兼務しているプロダクトデザイナーの大月です。 私が所属しているエムスリーのデザイン組織は以下２つの強みがあります。 多様性 スピード 特に日々の業務では"スピード"をとても大切にしており、 デザインを早くすることで、検証回数を増やし、PDCAを多く回し、価値創造を加速することを意識しています。 こうしたエムスリーのスピード文化から、日々の業務を効率化できるFigma活用法もデザイナーのみんなで学びあっています。 今回は、エムスリーのデザイナー間で話題になった、意外と知らなかった、知っているだけで日々の業務が一気に楽になった！というFigma活用術を紹介します。 少しでもFigmaでのデザイン作業をスピードアップさせたい方の参考になれば幸いです！ 爆速のための3種の神器 1. 秩序をつくる ファイル構成とコ
ウェブサイトなどのデザインを考える上で役に立つアドバイス25選
ウェブサイトやソフトウェアの作成において、機能の他にデザイン面も高い質が求められます。デザインにおいて良いもの・悪いものはいろいろありますが、「とりあえず守っておけば問題ナシ」なデザインのルールについて、プロダクトデザイナーのアンソニー・ホブデイ氏が解説しました。 Visual design rules you can safely follow every time https://anthonyhobday.com/sideprojects/saferules/ ◆01：真っ黒・真っ白は避ける ホブデイ氏いわく、真っ黒は画面上で不自然に見え、真っ白は明るすぎるとのこと。代わりに真っ黒・真っ白に近いグレーを用いることが推奨されています。 ◆02：ニュートラルカラー(無彩色)に手を加える ニュートラルカラーとは一般的に黒、白、グレーを指します。もしインターフェイスに何らかの色を使う場合、そ
いざという時に使える13のHTML&CSS Tips集 | BUILD Journal
いざという時に使える13のHTML&CSS Tips集Update2023.05.12Release2023.04.13Coding HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する いざという時のために覚えておくと便利なHTML＆CSSのTipsを13個紹介します。何かで困った時に読み返してみてください。何かでお役にたてると思います。 テキストの円形回り込み See the Pen shape-outside by Kobayashi (@Pulp_Kobayashi) on CodePen. 円形の画像の縁に沿ってテキストを回り込ませるCSS Tips。実際には画像の縁を判定して回り込んでいるのではなく、shape-outsideプロパティを使用し、circle(50%)を指定することで、要素の回り込みの形状を円形にしています。 CS
少しのコードで実装可能なHTML小技集
2023年2月7日 HTML これまで「少しのコードで実装可能な10のCSS小技集」シリーズでCSSのちょっとしたTipsを紹介していましたが、今回はHTMLバージョン！知っていると使い勝手がちょっとよくなる小技を集めました！ ↑私が10年以上利用している会計ソフト！ 目次 セレクトメニューの選択肢をグループ化 type 属性値によって入力欄が変化 スマートフォンでエンターキーのテキストを変える 画像の遅延読み込み テキストの折り返し位置を指定する 番号付きリストの順番を変更する 簡単アコーディオン 任意のテキストを自動翻訳させない リンク先のテキストを指定してスクロールさせる 1. セレクトメニューの選択肢をグループ化 複数の選択肢を用意できるおなじみの select タグ。項目は option タグを利用しますが、さらに optgroup タグで囲むことでグループ化できます。選択肢が多
CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif
2021年、最も注目されたUIデザインのテクニックのまとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 今年公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2021 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ユーザーの混乱を避けるために、UIで確立されたアイコンを使用する 2. 4ptベースライン＋8ptグリッド＝調和のとれた縦のリズム 3. フォントで階層を示すにはウェイト、サイズ、カラーを使用する 4. ホワイトスペースはたっぷり使用してください 5. アイコンをグリッドシステムで使用する際の注意点 6. アクションを実行
モダンCSSリセットを徹底解説、最近のデバイス・モダンブラウザの仕様に対応
最近のデバイス・モダンブラウザの仕様に対応した、モダンCSSリセットを紹介します。スタイル宣言はたったの9個ですが、個々のCSSについて詳しく解説されているので、記事はけっこう長いです。 なぜそうしたのか、なぜそれを使用しないのか、最近の実装にあわせたCSSの役立つテクニックもたくさん解説されています。 My Custom CSS Reset by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 他のいろいろなCSSリセットについては、下記をご覧ください。 モダンブラウザに適したCSSリセットのまとめ はじめに CSSリセット 1. ボックスサイズのモデル 2. デフォルトのマージンを削除 3. 高さは%ベースを使用 4. アクセシブルなline-heightを追加 5. テキストのレンダリングを改
モダンCSSによる絶対配置（position: absolute;）の削減
テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめに ケース1: カードのオーバーレイ ケース2: カードのタグ ケース3: ヒーローセクション ケース4: display: contents; ケース5: カードアイテムの並べ替え ケース6: 中央寄せ ケース7: 画像のアス
CSSでボタンにテキストを配置する時、上下のスペースを簡単に揃えられる実装テクニック
ボタンにテキストを配置する時、上下のスペースを揃えるのに困ったことはありませんか？ ボタンのHTMLはそのままで、疑似要素を追加するだけで簡単に揃えられるので、そのCSSのテクニックを紹介します。 Aligning a Button Label Vertically by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンにテキストを配置する時、上下のスペースを揃える 終わりに はじめに デベロッパーのあなたは実装するために、デザインのモックアップを渡されたとします。そのモックアップではかっこよくフォントが使用されており、デザインの中で完璧に見えました。 しかし、CSSで実装してみると、フォントの周りに予期せぬスペースが追加されていることに気がつきました。これは何だと思いますか？ そもそ
CSSで三角形のいろいろな実装例
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 三角形や矢印をWebブラウザーで表示するためには、PNGなどのラスター画像、SVG、CSSを使う方法があります。 場面に応じた実装方法を選ぶことで、該当箇所に変更があった場合に対応しやすくなります。 この記事では、実装方法によってどのような違いが出るのか、3つのパターンで解説します。 コンテンツの区切りで斜めになっている背景手順や流れでよくある矢印before/afterでの矢印 セクショニング
CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー
【第4弾】少しのコードで実装可能な10のCSS小技集
2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせて引用符を変更 クリックで文字列を選択 背景画像を見切れないよう繰り返し表示 入力時の縦線の色を変更 ドラッグで要素のサイズを変更できるようにする floatは flow-root で解除 文章をカラム分けしてラインを入れる HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. 要素の上下左右中央配置 ボックスを要
CSSのテキストマスクで映えるメインビジュアルを実現
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。 メインビジュアルがマンネリ化していませんか 「メインビジュアルの見せ方がワンパターン化してきた」「CSSでちょっと凝った感じに見えるメインビジュアルを作ることができれば」など、シンプルなのにいつもより少し見栄えのするCSSで実現できるメインビジュアルを紹介します。 CSSのテキストマスクを使ってみる CSSのbackground-clipを使用すると、背景画像をテキストの形で切り抜いたように表示
CSSでアイコンをテキストに揃えるのはこれで簡単になる！CSSの新しい単位「lh」「rlh」が登場
アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか？ テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。 'lh' and 'rlh' units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Values and Units Module Level 4に見たこともない新しい単位がありました！ lh それが使われている要素のline-heightプロパティの計算値に等しい rlh ルート要素（おそらく<html>要素）のline-heightプロパティの計算値に等しい これらの新しい単位が役立つシーンはどこだと思いますか？ Šime Vidasの記事によると、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AIで簡単に実装コードを生成できる！ テキストからCSSアニメーションのコードを生成できるツール -AI CSS Animations
