HTML/CSSでできる、押したくなる最新Webボタンエフェクト集
この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット きらりと輝くコール・トゥ・アクションボタン すべてのモダンブラウザでサポートされるようになった@propertyを利用した新しいCSSの使い方エフェクト。細部まで洗練されあt、注目を集めるCTAボタン。 See the Pen Shin
Web制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ
CSS GridやFlexboxで配置するプロパティ値は？ 先頭の3つだけを指定するセレクタは？ という「あれは何だっけ？」に役立つのが、チートシートです。 CSS GridやFlexboxの各プロパティ・値でどのように配置されるのか、セレクタやnth-child()やdisplayやposition、VS CodeやGitのコマンドがまとめられたチートシートを紹介します。 チートシートは高解像度版が用意されており、ダウンロードしておくと便利です。 CheatSheets -GitHub チートシートはすべて、「ご自由にダウンロードしてご利用してください」とのことです。チートシートは高解像度版を無料でダウンロードでき、モニターの壁紙や印刷して机の脇に貼っておいても便利です。 では、どんなチートシートがあるのか紹介します。 まずは、CSS Flexboxのチートシート。Flexboxの各プロ
紙っぽいかわいいWebサイト作りたい - Qiita
かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ
時計/タイマー/カウントダウンのコードスニペット8選。CSS/JSで作れるデザイン！ - Workship MAGAZINE(ワークシップマガジン)
Webサイト上に「時計」を表示するデザインは、一定の需要があります。 もとからデバイスの画面に時計は表示されていますが、それでもWebサイト上に時計が表示されると、つい目がいってしまいますよね。 時計の要素としてとくに需要があるのが、クイズやイベントなどに使われるカウントダウンです。カウントダウンの機能は、UXにおいて重要な役割を果たすことも。 今回は、時計やタイマー、カウントダウンなどの機能を取り入れられるコードスニペットを8選ご紹介します。 1. Vue.jsを使ったデジタル時計 最初にご紹介するのは、近代的なデザインのデジタル時計です。この時計はVue.jsを使って構築されています。 機能自体はベーシックですが、目をひくデザインに仕上がっていますね。 See the Pen Digital Clock with Vue.js by Toshiyuki TAKAHASHI (@gau)
CSSはこんなにも進化していたのか！ CSSのかなり高度なテクニック -Expert CSS: The CPU Hack
当ブログの記事でも、JavaScriptで実装していたのがCSSで実装できるようになりました、と今までにいくつか紹介してきましたが、今回紹介するのはそれらとはかなり異なるCSSのかなり高度なテクニックです。 CSSでCPUのようにデータを継続的に解析し、状態を再評価します。簡単に言うと、スクリーンの高さや幅を取得したり、マウスの座標を取得したり、さらにはブロック崩しなどのゲームもCSSのみで実装できます。 もう私が知っているCSSをはるかに超えたCSSです。 Expert CSS: The CPU Hack br Jane Ori (@Jane0ri) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのエキスパート: The CPU Hack 5つの観測可能性 The CPU Hackの始まり The CPU Hack 終
1次元の場合でも flex-shrink, flex-grow が必要なら CSS Grid でもいいんじゃない？ - Qiita
1次元の場合でも flex-shrink, flex-grow が必要なら CSS Grid でもいいんじゃない？CSS 「１次元なら Flexbox, ２次元なら CSS Grid」 のように Flexbox と CSS Grid を使い分けると考えている人は多いのではないでしょうか？ じつは、１次元であっても、中身の文字列等の幅に関係ない(つまり 幅 が hug contents じゃない) 要素が含まれるときには、 Flexbox で書くよりも CSS Grid のほうが簡潔になる場合があります。 たとえば、「左側は幅固定で、右側はあまった幅を埋める (ともに中身に左右されない)」のように領域を左右に分ける場合です。 (CodeSandbox のプレビュー画面のサイズを変化させると、左側領域の幅は変わらず、右側だけが変わっていることが分かります。) 1. Flexbox で実装する
【CSS Tips】コンテンツが少ない時は下部に固定されて、コンテンツが増えてきたら下に移動するフッター - Qiita
【CSS Tips】コンテンツが少ない時は下部に固定されて、コンテンツが増えてきたら下に移動するフッターCSSレスポンシブデザイン 概要 要はこんな感じのUI🔽 を実装したい時のCSSの書き方です。 方法① gridを使う header、main、footer要素を用意する bodyにdisplay: gridとgrid-template-rows: auto 1fr autoを指定する main部分に1frを指定することで、flexboxの時と同じくコンテンツの高さを伸ばしてフッターが画面下部に固定されるようになり、コンテンツ部分が画面内に収まらない時は合わせて下に移動します。 多分この方法が一番シンプル 参考 🔽 See the Pen gridを使って使ってフッターを下部固定する by かべちよ (@kabechiyo13) on CodePen. 方法② flex-grow を
【CSS】これから期待できるCSSまとめ2023 - Qiita
はじめに 今までCSSは、「特定のバージョンしか使えない」や「特定のブラウザだと使えない」が 新しいプロパティが公開されても、使えないことが多々ありました。 そのため主要なブラウザの関係者が集まり、Web開発者の開発体験を向上させるための取り組み、「 Compat 2021」・「Compat 2022」が行われていました。 このような取り組みが2023年も引き続続いていくようです。 この記事では、Compat 2022に引き続き、Interop 2023で解消されるCSSプロパティについてまとめました。 こんなものがもうすぐ使えるようになるんだな...みたいに思っていただけると嬉しいです。 目次 Border Image CSSの色空間と関数 コンテナクエリ Containment 擬似クラス カスタムプロパティ フレックス ボックス CSS 数学関数 まとめ 1. Border Imag
独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！ - ICS MEDIA
独立したCSS translate・rotate・scaleプロパティだからできる、豊かなアニメーションテクニック！ CSSのtransformプロパティはtranslate()やrotate()を1つの値として受け取るプロパティでした。そのため、同時にそれらを動かしたい場合、1つのプロパティに両方の記述が必要でした。これは記述の複雑化を生みます。 最新のCSSではtranslate、rotate、scaleをプロパティとして独立して指定できるようになりました。これにより複雑な記述をせずとも別々のタイムラインの指定やイージングの指定など柔軟なアニメーション表現が可能になりました。本記事では独立した特長とそれらを活かしたアニメーション表現を紹介します。 サンプルを別ウインドウで開く コードを確認する 独立したtranslate、rotate、scaleプロパティ 独立した各プロパティについて
Webデザインをするにあたり、構造化された文書を意識する - Qiita
この記事の概要 Webデザインは「最終的にHTMLとCSSで表現される」ことは揺るぎません。 イケてるデザインツールを使おうが、流行りのフレームワークを使おうが、最後に存在するのはHTMLとCSSです。1 というわけで、避けては通れないHTMLとCSS。 コードを書かない人でもある程度は理解しておきたいものです。 この記事では「どんなデザインも最終的に構造化された文書（= HTML）で表されるのだから、初めからそのつもりで作る」を念頭に置いて考え方やトレーニングについて書きます。 細かなタグの使い分けやテクニックというより、文章全般を構造化して捉えるための記事です。 HTMLのテクニック自体は別の記事で書こうと思っています。 Webデザインの前に、日頃のドキュメントを考える いきなりWebデザインを対象に話を進めると、構造だけでなくあしらいにも目が行ってしまいかねません。 そのため、まずは
Webページの見栄えをよくするたった58バイトのCSS
ほとんどのWebページの見栄えをよくするたった58バイトのCSSを紹介します。 3つのプロパティだけですが、Webページを実装する時の最初のスタイルとして用意しておくとよいかもしれません。 また、ボーナスの100バイト版とオプションのさらに100バイト版も合わせて紹介します。 58 bytes of CSS to look great nearly everywhere by @JoeyBurzynski 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Webページの見栄えをよくする58バイトのCSS 58バイトのCSSの解説 Webページの見栄えをよくする100バイトのCSS 100バイトのCSSの解説 オプションでさらに100バイト Webページの見栄えをよくする58バイトのCSS 58 bytes of CSS -Code
究極のシンプルさ！わずか3つのコマンドでブログを構築できる「1POST」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、超ミニマムなシンプルさがウリのブログ構築ツールをご紹介します！ 面倒な依存関係は一切なく、自動生成されるファイルは編集しやすい単純なHTMLというのが大きな特徴です。静的サイトジェネレータのように機能しますが、プログラミングは不要でHTML&CSSの知識があれば誰でも使いこなすことができます。 ブログやWebサイトの構築に興味がある方は、ぜひ参考にしてください！ 【 1POST 】 ■「1POST」の使い方 それでは、「1POST」をどのように使えばいいのか詳しく見ていきましょう！ Node.jsの開発環境をお持ちであれば、以下のコマンドから「1POST」をインストールしてすぐにでもブログを始められます。 $ npm install -g 1post Node.jsの環境がない方や、ちょっと試してみたいだけ…という場合は、ログイン不要で
よりよいCSSを書くための、CSS / Sass (SCSS) 30のルールとその理由
Webエンジニアを始めて丸2年が経ちました。 複数プロジェクトを進める中で、CSSコーディングを行うときの「こうしておくと便利」「このほうが管理しやすい」といった知見が溜まってきたのでまとめます。 はじめに 長くなってしまった細かい説明はところどころ折りたたんでいます。概要だけで理解できたら飛ばしていただき、詳しい話が気になったら開いて読んでください。 これらは「自分がよく取り入れている手法」であって、必ずしもどのプロジェクトにも当てはまるものではないと思います。 各項目について、自分がその判断に至った 「理由」 を説明していますので、 理由を読んだ上で自分のプロジェクトに取り入れるか判断いただくと良いと思います。 この記事は、すでにCSSコーディングをしていてアイデアがほしい人に向けた記事で、 CSSをこれから学び始めるような 初学者向けではない ことご了承ください。 一般的と思われるキ
CSSだけでモーフィングを実装できる！文字列を違う文字列に滑らかに変化させるCSSのテクニック
文字列を違う文字列に滑らかに変化させるモーフィングをCSSで実装するテクニックを紹介します。 モーフィングは人が別の人に変化するのを映画やテレビで見かけますが、文字ならCSSだけでそれっぽく簡単に実装できます。 仕組みは、CSSのblurとcontrastで文字をぼかして変化の間をつなげています。 実際の動作は、下記でお楽しみください。 「Run Pen」をクリックすると動作します。「0.5x」にするとちょうどいいかも。 See the Pen CSS morphing by Amit Sheen (@amit_sheen) on CodePen. 実装コードは、下記の通りです。 デモでは7つのワードをモーフィングしています。ワードの数は増減もOKで、その際はCSSを少し変更します。 <div class="morphing"> <div class="word">Pure CS
JavaScriptで任意のHTML要素をPicture-in-Pictureする
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac
Web制作者は要チェック！現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css
現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Reseter.css -GitHub Reseter.cssの特徴 Reseter.cssの使い方 Reseter.cssの中身 Reseter.cssの特徴 Reseter.cssは現在のWeb制作に合わせて制作された新しいCSSリセットで、ブラウザによって事前に作成されたすべてのスタイルをリセットします。クロスブラウザのエクスペリエンスを向上させるために、ブラウザのスタイルシートを正規化します。 Reseter.css バグやブラウザの不整合
HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css
棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
結局Sassのネストってどこで切ればいいの問題 - Qiita
Figmaで作ったデザインをWebサイトに即反映「STUDIO」 | 進化が止まらない！ 最新ツール
CSSの論理プロパティ？知ってた方が便利！ - Qiita
