シンプルで使いやすいHTML・CSSボタンデザイン集11選 - ICS MEDIA
ウェブ制作においてボタン風の見た目はよく作成するものの、ネットには新旧さまざまな記法で紹介されているため、参照しづらいケースもあると課題を感じていました。 そこで、2023年において「シンプルで手軽に使いやすいボタン」というテーマで、11種類のHTML・CSSのボタンデザインを紹介します。 この記事で紹介するボタン aタグやbuttonタグのどちらでも利用可能 JavaScriptを用いずHTMLとCSSだけで作成 コピペしやすい 各ボタン設計時に心掛けたポイントを終盤にコラムとしてまとめています。この記事のデモはオリジナルで、GitHubにてMITライセンスとして公開しています。ぜひご活用ください。 ※デモのホバー演出は、ホバーが有効なデバイスでのみ確認可能です。詳しくはコラムで紹介します。 アウトラインのボタン（枠線をグラデーションで再現する） サンプルを別ウインドウで開く ソースコー
The Power of CSS Blend Modes
I knew CSS blend modes could create some cool effects, but even so, a CodePen I saw recently left me shocked at what they’re capable of. See the Pen Apple inspired Pride clock by Scott Kellum (@scottkellum) on CodePen. This CodePen, by Scott Kellum, really caught my eye. I could see it was HTML text for the numbers, but I wasn’t sure how he created the radial line effect. When I dug into the code,
【初心者必見】CSSチートシート集まとめ - 現役エンジニアが使い方も合わせて徹底解説(保存版)
(この記事は2021年8月に更新されました) ・ CSS実装の効率化を測りたい ・ フレックスボックスに中々慣れられない ・ 実装する上で使えるカンニングペーパーが欲しい この記事はそんな悩みがある方に向けて書いています。 チート集というのは、プログラミングの実装でよく使われるコードが、わかりやすくまとめられているものです。 これによって効率的にコードの実装を進めることができます。 今回は、世の中にある4つの代表的なCSSのチート集を、使い方と学習法も合わせて解説していきます。 この記事を読めば、でネット上に散らばっている『主要CSSチート集を網羅的に知る』ことができます。 ✔︎ 本日のテーマ CSSチート集まとめ ✔︎ CSSチート集 ・① CSSセレクターチート ・② flexboxチート ・③ Sassチートシート ・④ Tailwindチートシート ① CSSセレクターチート集 初
【游ゴシック】macとwinの差異！ – スタッフブログ
こんにちわ、T橋です( ˆoˆ )))三 みなさんはどんな夏休みを過ごしましたか？ 私は秋田出身のイラストレーター・にしむらゆうじさんの展示会に行きました(と〜〜〜〜ってもかわいかった・・・) 好きな世界観にどっぷり浸かり、友達と遊んだりとにかく楽しい夏でした。 ・・・本題に行きます！ 最近のwebデザインのトレンドは游ゴシックが流行りの兆し！ 游ゴシックといえばカタカナの「タ」が特徴的な気がします。細くて綺麗ですね。 游ゴシックを使ってwebデザイン/コーディングするぞ〜∩(´∀｀∩) ・・と意気込むのは良いのですが、 デザイナーもコーダーも何点か確認しないといけないので備忘録的にまとめました。 1.macとwinで微妙に違う！！ まずは游ゴシックのもろもろを各OSの公式サイトで確認します。
CSSで游ゴシックやメイリオなどのfont-familyを指定するときのベストプラクティス | SPYWEB
長い間、CSSで指定する font-family は宗教戦争とまではならないとしても、かなり議論されてきました。游書体がWindowsとMacの両方で使えるようになってやっと統一されたかと思ったのですが、色々な問題がありなんだかなぁという感じです。そんな中で実用性のある font-family を紹介します。 body { font-family: -apple-system, blinkMacSystemFont, /* Macの欧文はSan Francisco (OS X 10.11以降) */ 'Helvetica Neue', /* Macの欧文 (OS X 10.10以前) */ 'Segoe UI', /* Windowsの欧文 */ YuGothicM, /* Windows8.1以上は游ゴシック */ YuGothic, /* Macの游ゴシック */ Meiryo, /*
HTMLにimg要素で画像を表示する 2020年版 - Qiita
<img src="sample.jpg" srcset="sample@2x.jpg 2x, sample@3x.jpg 3x" alt="画像"> srcset属性を使うとRetinaディスプレイ/高解像度ディスプレイに対応した画像を置くことができる。 参考 レスポンシブ画像 - MDN レスポンシブ画像2: sizes属性 <img srcset="sample-320w.jpg 320w, sample-480w.jpg 480w, sample-800w.jpg 800w" sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" src="sample-800w.jpg" alt="画像">
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
Googleのエンジニアが「ウェブサイトの画像読み込み」を最適化する方法を解説
ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加
CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック
検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinput要素のテキストを揃える インタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか？ あなたは仲間です、多くの人が経験していると思います。 この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。 まず、ゴールを明確にしておきましょう。 button要素とinput要素のコンテンツは完璧に揃えます。 button要素とinput要素の高さは
WordPressをやめ、静的サイトジェネレーターで高速化した話 - ICS MEDIA
ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ
【無料】コピペで簡単！404エラーページHTML/CSSテンプレート素材31選
以前403エラー,404エラーページ(主に403エラー)のCSSアニメーションを活用したテンプレートをご紹介しました。 2018年12月5日CSSで作る！面白い403エラー・404エラーページデザイン集 当サイトでもわりとアクセスが多く、気になっている方が多いコンテンツです。 そこで今回は第二弾という事で404エラーページをメインとしたCSSアニメーションテンプレートをご紹介します。 エラーページで離脱されることが多いですが、エラーページを少し工夫することでサイトの回遊率アップにつながるかもしれません。 ぜひサイト構築をされている方は参考にしてみてはいかがでしょうか。 数字のカウントが0からどんどん上がって404でとまる背景がキレイなエラーページ See the Pen Spacy 404 with count up by Morten Sørensen (@moso) on CodePe
サイトの表示高速化につながる18のこと | knowledge / baigie
ベイジでエンジニアをやっている酒井です。 ベイジには2017年に、新卒で入社しました。いつもはJavaScriptの開発からWordPressのカスタマイズなど、フロントエンドを中心としながら、一部バックエンドも含めて仕事をしています。『knowledge / baigie』でも、フロントエンド寄りの情報を発信していきたいと思います。 私の今日のテーマは、表示の高速化についてです。 webサイトの表示スピードは、webサイトのユーザー体験に直結すると私は考えています。表層的なUIデザインの改善以上に重要かつ効果的であることも多いため、webのデザイナーやエンジニアは、0.1秒でも速くなることにこだわるべきでしょう。 表示高速化の手法というと、サーバ側の話になることも多いですが、実はフロントエンド側でできることもたくさんあります。それは大きく3つに分けられます。 ブラウザ処理の高速化通信の高
A Complete Guide for Responsive Images!
A responsive image is one whose size responds to changes in screen resolution. The concept of responsive images was triggered by the need to solve issues such as serving different image sizes to different devices, and manifested into using that flexibility for things beyond sizes, such as art direction, image types, and more. The responsive images specification was created only after the responsiv
UIコンポーネントにはマージンをつけるな！絶対にだ！！ - Qiita
.button { display: block; margin: 50px auto 0; padding: 8px 20px; border: solid 2px #ddd; border-radius: 10px; font-size: 16px; } See the Pen button_01 by Otsuka Yuhi (@boltkeep) on CodePen. パット見、いい感じのボタンです。 しかし、このボタンには一点重大な欠点があります。 それは、このボタンは必ず上に50pxの余白が付き、かつ中央寄せされるということです。 デザイナー登場 デザイナーがこう言いました。 「ボタンを横に２つ並べたい」 「ボタンとボタンの間隔は20px」 「その上で中央寄せで！」 「あと、上のマージンは外しといて！」 さて、どうしましょう？？display: flex;でしょうか？
line-clampプロパティの効果的な実装方法、CSSで文末を3点リーダーで省略表示する
テキストを省略表示する際に、文末を3点リーダーにするline-clampプロパティの効果的な実装方法を紹介します。数行のスタイルシートで、簡単に実現できます。 line-clamp 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 line-clampプロパティとは line-clampプロパティの仕様 text-overflowでこれを実現できますか？ 実装の注意点 line-clampプロパティのサポートブラウザ リソース line-clampプロパティとは CSSのline-clampプロパティは、テキストを指定した行数で省略します。 2019年現在、Editors Draftなので、仕様は確定ではありませんが、max-linesとblock-overflowの省略形として定義されており、前者は勧告候補で削除される危険性があ
最近のWebページ用にCSSリセットの効果的な使い方、Normalize CSSとReset CSSそれぞれの利点を取り入れる
Webページを実装する際に、何らかのCSSリセットを使用している人が多いと思います。リリースされているものをそのまま、またはカスタマイズしたり、オリジナルのCSSリセットを使用しているかもしれません。 2大CSSリセットとも言えるNormalize CSSとReset CSSの特徴、Normalize CSSとReset CSSそれぞれの利点を取り入れて安心して使用する方法を紹介します。 Normalize CSS or CSS Reset?! br Elad Shechter 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ブラウザのユーザーエージェント スタイル Normalize CSS Reset CSS Normalize CSSとReset CSSの両方を安心して使用する方法 終わりに 参考記事 はじめに
【CSS】font-sizeの使い方！pxやrem、％などの使い分けも解説 | creive【クリーブ】
「文字の単位が複数あって、結局どれを使えばいいのかわからない。」 「文字単位のそれぞれの特徴がよくわかっていない。」 文字サイズの単位にこのような感想を感じた人は、htmlの学習を始めたばかりの人には多いのではないでしょうか？事実、一つのサイトに複数の単位が使われている時などは、「なぜこの単位なの？」と思った方も多いでしょう。 実際、全ての単位を駆使して、サイトを作っている人は少ないでしょう。ですが、状況に応じて特定の単位を使い分けている人は多いですし、そうすべきです。今回、単位の背景にあるサイト構築の方法にも触れ、どの状況で、どの単位を使うべきかを解説します。文字サイズの問題は今後も避けて通ることはできない問題ですので、早めに理解しておくことが寛容です。心配しないでください。頻繁に使うフォント単位はある程度決まっており、コツをつかめばすぐに使えるようになります。 この記事は初学者向けのも
ページ内リンクの実装から考える、a要素のclickイベントとその振る舞い
この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-behaviorプロパティを使えば非常に簡単に実装できます。 body { scroll-behavior: smooth; } たったこれだけの宣言で、JavaScript を一切用いることなく、ページ内リンクをクリックしたときのスクロールにアニメーションが伴うようになります。また、ページ内リンクのクリックだけでなく、可視領域外にある要素がフォーカスされたときや、ページ内検索に一致したテキストがハイライトされたときなど、スクロールが伴う場面すべてに適用されま
CSS SANS
CSS SANS は、WEB上でデザイン・文字組をするためのプログラミング言語 CSS でつくられたフォント。 WEBの歴史・進化を映し出し、時代に合わせて形を変える、これまでにないフォントです。 CSS SANS is the font created by CSS, the programming language for web designing and typesetting. It is an unprecedented font that reflects history and evolution of the Web, and even changes its own shape. フォントの成り立ちHow the font is madeCSS でできることは、WEBページのレイアウトを整えたり、文字組・文字間の調整をしたりなど、様々。 ただひとつ、「文字自体をデザイン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://nasust.com/blog/bf604cc7-61a7-4917-9406-4f650485aecd/
