[B! CSS] r-aidaのブックマーク

CSSコピペで完成！押したくなるWebボタンデザインまとめ

この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。どのボタンをHTMLとCSSのみで作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在となっています。 JSもつかったよりクリエイティブなボタンエフェクトもあるので、プロジェクトに合ったボタンデザインを探してみましょう。ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。現在37種類のボタンデザインが揃い、今後も定期的にアップデートしていきます。 CSSコピペで完成！押したくなるWebボタンデザインまとめユラユラと揺れる波ウェーブボタンまるで水面が揺れているようなエフェクトが特長のボタンエフェクト。 See the Pen Creative Wave Button

r-aida 2021/08/23

リンク

【CSS】ボタンから波紋が広がっていくエフェクトを実装する方法 | WebDev Tech

SNSボタンなどに使えそうな、ボタンから波紋が広がっていくエフェクトを実装してみたので、紹介していこうと思います。以下が実際のエフェクト付きボタンです。このボタンをベースに、ホバー時のみ波紋エフェクトをONにするカスタマイズ方法も紹介していきます！ HTMLとCSSのみで実装できるので、是非試してみてください。【コピペ用】ボタンから波紋が広がっていくエフェクトの実装コードまずは、「コピペしてすぐに使いたい」という方のために、全体のコードを載せておきます。 index.htmlとstyle.cssを作成して、コードをそのままコピペしてください。 Twitterアイコンの画像は、Iconfinderから無料でダウンロードできます。 imgタグのsrc属性の値には、ダウンロードした画像のパスを記入してください。 <!DOCTYPE html> <html lang="ja"> <head

r-aida 2021/07/12

CSS

リンク

グラスモーフィズムをCSSで実装するコードを簡単に生成できるジェネレーター -Glass Morphism Generator

カードやパネルにぴったりな透明度のある背景のぼかしを使った磨りガラスのエフェクト、グラスモーフィズムを実装するコードを生成できるジェネレーターを紹介します。 Glass Morphism Generator Glass Morphism Generator -GitHub このエフェクトは去年の暮れくらいから、Glassmorphismと呼ばれはじめたエフェクトで、古くはiOS7やWindows Vistaでも使用されています。最近では、macOS Big Surでも見かけますね。参考: Glassmorphism in user interfaces Glass Morphism Generatorでは、磨りガラスの透明度やぼかし具合を確認しながら、コードを生成できます。

r-aida 2021/02/03

CSS

リンク

Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる

Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能「CSS Overview」の準備 Chromeの新機能「CSS Overview」の使い方 Chromeの新機能「CSS Overview」の準備まずは、Chrome デベロッパーツールを開き、右上の歯車アイコン（Settings）をクリックします。

r-aida 2020/07/06

chrome
CSS

リンク

CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる

画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを与えることができます。高コントラストの画像では目立たず、低コントラストの画像では繊細なコントラストを与えるCSSのテクニックを紹介します。 borderとbox-shadowの比較元ネタは、下記ツイートです。意訳すると、インセットのbox-shadowを使用すると、画像と周囲のページの間に繊細なコントラストを追加するのに最適です。borderよりもシームレスで、カラーがフレキシブルです。 👨🏾‍💻 CSS tip: inset box-shadows are great for adding subtle contrast between images and the surro

r-aida 2020/07/03

リンク

横並びのリストを中央寄せにする5つの方法 - CSSテクニック - acky.info

HTMLコード <ul class="float"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="inline-block"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="table-cell"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul class="flex"> <li>1</li> <li>2</li> <li>3</li> </ul> CSSコード ul { list-style-type: none; padding-left: 0; } li { background: #CCC; width: 50px;

r-aida 2018/07/31

HTML5
CSS

リンク

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

r-aida 2018/07/12

リンク

H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -

HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transf orm」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。サンプルページ » 01.切り取り線紙を切り取ったようなデザインです。サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);

r-aida 2018/07/12

リンク

コピペで絶対使いたくなるCSSボタン 25選 | SONICMOOV LAB

動きがシャープなStylish Social Buttons マウスオーバー時の背景の動きがシャープです。送信完了が分かりやすいSend button with a transition クリックして送信完了するまでの過程が分かりやすいです。視覚をさらにプッシュするMaterial Button Hover マウスオーバーでさらに視覚に対してプッシュしてくれます。広がるメニューAnimated Material Design Button マウスオーバーでメニューが広がります。 tの文字にも注目Twitter Button Concept 遊び心があるボタンです。隠しボタンHidden door twitter button ツイッターフォローボタンで動きを付けたい時にオススメです。立体的なボタンSquishy Toggle Buttons CSSだけでの表現でこんなボタンも。

r-aida 2018/06/27

リンク

新米Webデザイナーがこれだけは抑えておきたいデベロッパーツールの使い方

2022年4月27日 CSS, Webサイト制作, 便利ツール皆さん、使っていますか？Chrome DevTools。日本語ではデベロッパーツールと呼ばれていますね。Webサイトの構成やCSSの検証が手軽にできちゃう、制作者の必須アイテム！Chromeにデフォルトでついている機能なので、今すぐに使い始められますよ。また、「デベロッパーツールの存在は知っていてもどう使えばいいかわからない…」という方向けに、使いどころポイントも紹介します！ ↑私が10年以上利用している会計ソフト！ Chromeデベロッパーツールの基本的な使い方まずはChromeでデベロッパーツールを起動させましょう。Webページ内のどこでもいいので右クリックし、「検証」を選択します。すると、こんな感じでパネルが表示されます。これがデベロッパーツールです。英語だらけでびっくりしちゃうかもしれませんが、次第に慣れます（たぶ

r-aida 2018/06/22

リンク

CSSでアンダーラインが追従するメニューを実装する方法 - NxWorld

以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と

r-aida 2017/11/02

CSS

リンク

最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger

ぱっと見ただけではなかなか気がつかないような、ディテールにこだわった素晴らしいデザインのアイデアとテクニックを使ったUI要素を紹介します。最近のWebサイトで見かけるUI要素がたくさんあり、すぐに次のプロジェクトに役立つと思います。

r-aida 2017/09/14

リンク

コーディング初心者こそ知っておきたい「CSS擬似クラス」超入門

1990年代から2000年代のいわゆるCSSの黎明期の頃には、CSSで使う構文も少なく、覚える量もそれほど多くなかったために、学習コストは今よりも非常に小さいものでした。しかし、時代が進むにつれ、CSSでできることも非常に幅広くなり、それに合わせてCSSでさえ難しく感じてしまう人が増えてしまったのではないかと思います。当初は「:hover」や「:active」といった代表的な擬似クラスだけを使っていけばよかったものの、今では様々な擬似クラスがあるので、初心者の方はもちろんのこと、ベテランの方であっても、CSSの擬似クラスを学び直したいと思っている方は多いはずです。そこで本稿では、「CSS擬似クラス」について改めて理解を深めていくための基本事項をおさらいしていきます。 CSSの擬似クラスは、さまざまな仕様変更や勧告を経て、現在のものになっています。擬似クラスを使いこなせれば、特定のオ

r-aida 2017/09/11

CSS

リンク

テーブルタグをレスポンシブサイトでも見やすくする方法・４選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

r-aida 2017/09/04

HTML
CSS

リンク

CSSで作ったドロップダウンメニューのドロップの動きいろいろ

CSSだけで作ったドロップダウンメニューのドロップの動きをいろいろと考えてみました。ちょっとしたことですが、目を引く動きはサイトの印象をよくするかもしれないです。では解説していきます。まずはHTMLからです。 <ul id="normal" class="dropmenu"> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> <li><a href="#">submenu</a></li> </ul> </li> <li><a href="#">menu</a> <ul> <li><a href="#">submenu</a></li> <li><a href="#">submenu

r-aida 2017/08/24

リンク

【保存版】remにvh、mozmm…あまり知られていないけれど知ると得するCSSの単位まとめ

「この単位、なんだ？初めて見た・・・」 CSSが初めに登場してからかなりの時間が経過していますが、CSSに触れている経験が長いひとでも、一度はこのように思ったことがあるのではないでしょうか。 CSS歴10年以上の方でも*「長さの指定にはpxしか使わない」*という人も珍しくはありません。実際、CSSは小さな仕様変更を繰り返しており、W3Cの草案作成・勧告といった正式なプロセスを経て便利な単位やプロパティは続々と追加されています。 CSSにおいて、単位を操ることができれば、デザインやレイアウトを行う上でかなり幅が広がることになります。これから紹介するように、CSSにはすでにさまざまな単位がありますが、知らなかったがために回り道をしてしまっていた、あるいは知っていたらもっと短く書けるコードも多く存在します。今回は、あまり知られていないけれど知ると得するCSSの単位をまとめていきます。単位

r-aida 2017/08/18

CSS

リンク

CSSフレックスボックス(display:flex)の使い方 [無料ホームページ作成クラウドサービス　まめわざ]

HTMLのレイアウト方法で最も新しいフレキシブルボックスをまめわざでも利用しています。手軽に並列レイアウトができるスタイルですが、他の並列レイアウトとの使い分けはどうすべきか、flexにしかできない表現はあるのかを、実例を挙げながら解説します。

r-aida 2017/08/17

CSS

リンク

手を動かして学習しよう！コードチャレンジ HTML/CSS 初級編

2020年2月13日 CSS, HTML, Webサイト制作 Web制作初心者の方向けに教える仕事をちょこちょこしているのですが、その時よく思うのが、本を眺めるだけでは覚えられないな…という点。やはりコーディングに関しては実際に手を動かしてみないと自分のスキルとしてしっかりと定着しません。そこで今回は私が教える中でよく使っている簡単な「コードチャレンジ」を紹介します。Web制作を勉強中の方や、同じく初心者向けに教えているという方の学習のヒントになればと思います。 ↑私が10年以上利用している会計ソフト！コードチャレンジの進め方私が教える際によく使うツールはCodePen。実際に書いたコードがその場で表示されるので、生徒側も「これを書いたらこう変化する」というのが実感しやすいようです。この記事に埋め込まれているCodePenの画面の右上「EDIT ON CODEPEN」をクリックすると

r-aida 2017/07/31

HTML
CSS

リンク

CSSのみでは実装できない、気持ちいい動きのちょっと面白いホバーエフェクト -Attract hover effect

周りがうねうねしたサークル状のアイコン、ホバー時にどんなインタラクションを想像しますか？カラーが変化したり、裏返しになったり、サイズが大きくなったり、いろいろなエフェクトが考えられると思います。あまり見たことがない、ホバー時のちょっと面白いインタラクションを紹介します。

r-aida 2017/07/12

CSS

リンク

[CSS]marginの相殺を正しく理解しておこう！相殺はいつ起こるのか、相殺を回避するテクニック

marginの相殺について、まずはクイズ。 Aのdiv要素には「margin-bottom: 10px;」を、Bのdiv要素には「margin-top: 30px;」を指定した場合、それらを垂直に配置するとマージンはいくつでしょうか？ What's the Deal with Collapsible Margins? これは「マージンの相殺（Collapsing Margins）」と呼ばれるものです。このマージンの相殺とは何なのか？いつどういう条件の時に起こるのか？それぞれどのように回避できるのかを紹介します。下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 marginの相殺についてアンケート CSSのmarginがどのように機能するか marginの相殺（Collapsing Margins）とは marginの相殺は