CSSで角丸を美しく実装するテクニック、ネストされた外側と内側を相対角丸の美しいバランスで実装
カードやパネルの外側と内側に角丸を使用したときに、なんだかバランスが悪いなと思ったことはありませんか？ 角丸を二重にするときに外側の角丸と内側の角丸の値を同じに設定すると、内側の方がすこし大きく見えて、不格好になってしまいます。 外側の角丸と内側の角丸を美しいバランスで実装する相対角丸のテクニックを紹介します。 まずは、ネストされた角丸を美しいバランスで実装したデモをご覧ください。 See the Pen Inner Radius Design Tip with CSS Custom Properties by coliss (@coliss) on CodePen. 外側の角丸と内側の角丸を美しいバランスで実装するポイントは、「外側の半径 = 内側の半径 + パディング」に設定することです。こうすることで、外側の角丸と内側の角丸の中心点が同じになり、美しいバランスになります。 ちなみに、
CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif
Google HTML/CSS Style Guide まとめ - Qiita
Google HTML/CSS Style Guide（2019年9月時点） より意訳とまとめ。訳が間違っていたらごめんなさい。 プロトコル imageやmedia、scriptなどを指定するときに、可能な限りhttpsを利用する。 <!-- 非推奨：プロトコルの省略 --> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 非推奨：httpの利用 --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <!-- 推奨 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery
copypet.jp｜パーツで探す、web制作に使えるコピペサイト。 - CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。困った自分用のストックブログ
免責事項 当サイトのすべてのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、必ずしも正確性・信頼性等を保証するものではありません。 当サイトの情報によるいかなる損失に関して、免責とさせて頂きます。ご利用の際はあらかじめご了承ください。 本免責事項、および、当サイトに掲載しているコンテンツ・情報は、予告なしに変更・削除されることがあります。予めご了承下さい。
Wholly – 表形式のデータ選択を便利に
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました これは業務システムに良さそうです！ テーブルのセルを選択したとき、それがどの行のどの列のセルなのか分からなくなったりした経験はないでしょうか。Excelなどのように行、列のヘッダーが固定できれば良いのですがWebではそう簡単ではありません。 そこで使ってみたいのがWhollyです。選択したセルと同列をハイライト表示することで選択した場所を分かりやすくしてくれるライブラリです。 Whollyの使い方 テーブル形式で整然と並んでいると一見すると分かりやすいのですが、メリハリがないので大量のデータを見た時にどこを選んでいるのか、どれを見ているのかが分からなくなってしまいます。手に触れる紙でさえそうなので、コンピュータ上では特に分かりづらいでしょう。そこでWhollyを使うと大量のデータも
CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
cssgrep·コンソール上でDOMをCSSセレクタ/XPathで検索 MOONGIFT
HTMLの中から指定したDOMを探し出すにはXPathまたはCSSセレクタを使う方法が考えられます。jQueryなりを使って利用する人が多いと思いますが、今回はWebブラウザを使わずにターミナルで行うケースを考えます。 そのためのツールがcssgrepです。まるでファイルをgrepするようにXPathやCSSセレクタを使ったテキスト抽出ができます。 cssgrepの使い方 MOONGIFTで試したところ。 サンプルのコードは次のようになっています。 curl http://linuxfr.org/ | ./cssgrep.rb '#friends li:nth-child(even)' <li><a href="http://www.agendadulibre.org/">Agenda du libre</a></li> <li><a href="http://fr.lolix.org/"
CSSだけで作る最も単純なプルダウンメニュー（ドロップダウンメニュー）【Webデザイン】 : 元・地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記
今まではIE6の存在等もあってCSSだけでプルダウンメニューを作るのはほぼ不可能でしたが、CSSがより多くのブラウザでしっかりと反映されるようになってきたので、CSSだけでプルダウンメニューを書くことができるようになりました。 今回は、その手順を解説していこうと思います。 ＜続きはこちら＞ コメント一覧 (2) 1. 紫水ルリ 2014年08月07日 19:32 はじめまして、 今まで使っていたメニューバーに ドロップダウンをつけることができました。 ありがとうございました。 いろいろ試してみたのですが、 この方法が１番よくわかりました。 ちゃんとドロップダウンになりました。 ブログに記事を作りたいので、 このページをリンクさせてください。 よろしくおねがいします。 2. のりさ 2014年08月07日 22:58 > 紫水ルリさん 了解です。 むしろ、よろしくお願いします。
CSSだけで作る動きのあるドロップダウンメニュー
では、HTMLから解説していきます。 HTML <ul id="dropmenu"> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メニュー</a> <ul> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> <li><a href="#">サブメニュー</a></li> </ul> </li> <li><a href="#">メ
エレメントを45度傾けてカッコよくレイアウトできる「jquery.diamonds.js」:phpspot開発日誌
jquery.diamonds.js demo エレメントを45度傾けてカッコよくレイアウトできる「jquery.diamonds.js」 次のように画像を45度傾けてカッコよくレイアウトすることができます。なんとなくオシャレですね。 画像ギャラリーの見せ方として、WEBでは結構珍しいレイアウト方法として覚えておいてもよいかも 関連エントリ ダイナミックなタイル状レイアウトを実現できるjQueryプラグイン「Freewall」 ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」 画像のレイアウトに使えるjQueryプラグイン「jQuery Photoset Grid」 テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」 スクロールしてもブロックを固定位置に表示させられるjQueryプラグイン「S
フラットデザインがクールな円グラフ描画jQueryプラグイン「Pie Chart」:phpspot開発日誌
Pie Chart jQuery Plugin - Flat Framework フラットデザインがクールな円グラフ描画jQueryプラグイン「Pie Chart」 次のようなフラットでインタラクティブなグラフが描画できるプラグイン。 フラットってなんでこんなにシンプルなのにカッコいいんでしょうね 関連エントリ 線グラフを描くだけの軽量グラフ描画JS「Aristochart」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」 どんなデータもリアルタイムなグラフにできるフレームワーク「FnordMetric」 テーブルをグラフに変換してくれるjQueryプラグイン
Animation to Explain CSS Triangles
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
表示が速過ぎても、誰も文句は言いません～CSS Nite「表示速度最適化」レポート
CSS Nite LP, Disk 23「表示速度最適化」 2012年6月30日、ベルサール九段下で「CSS Nite LP, Disk 23」が開催されました。CSS NiteはWeb制作に関わる方のためのセミナーイベントで、マークアップエンジニアやデザイナーの方が多く参加しています。今回のテーマは「表示速度最適化」でした。 パフォーマンス計測の方法、画像の最適化、モバイル向け最適化、そしてフロントエンドからバックエンドまでを考慮した設計段階からの最適化と、幅広いながらとても密度の濃い内容でした。 自己満足で終わらないためのパフォーマンス計測 サイバーエージェントの石本 光司（@t32k）さんから「Measuring Web Performance - 自己満足で終わらないためのパフォーマンス計測 - 」というタイトルで、サイトの最適化を行う上で重要なパフォーマンスの計測手段や分析方法に
これはいい！設置するだけでWebサイトを高速化·FastPage MOONGIFT
FastPageは静的サイトを対象にしたWebサイト高速化ソフトウェアです。 Googleはページの表示速度を検索順位の要素に盛り込むようになっています。そうでなかったとしてもページが高速に表示されるのは良いことです。そこで既存のサイト構成そのままにサイトを高速化するFastPageを使ってみましょう。 ファイル構成です。 例えば実行したイメージです。普通にファイルの内容が返ってきますが、実際にはキャッシュが使われています。 FastPageではファイルサイズの小さい画像をHTML/CSS内にインラインで展開したり、JavaScriptもサイズが小さければHTML内で展開します。さらにファイルもGzipで圧縮して転送量を小さくする、キャッシュ（サーバサイド、クライアントサイド）の利用などの施策がとられています。 なお商用版ではAmazon S3やWindows Azureを使ったCDN配信
CSS と JavaScript でタブ切り替え
CSS と JavaScript でタブ切り替えを実現しています。 なるべく CSS や JS の記述量を最小にするように努力しました。 もっとシンプルにできそうなアイディアがございましたらご教示下さい。 「無償・無保証・著作権放棄」 ですので、 このページのソースを適当にいじって自由に使って下さい。 全てのタブの中味は 1 つの HTML ファイル (このファイル) に書いてあります。 見出しのクリックにより、表示の ON/OFF を切り替えるだけ、という仕組みです。 タブの見出しをクリックするたびにサーバーを読みに行くのが 欝陶しく思えるときに、うってつけかと。 そう言えば、某サイトでは、クリックどころか、 タブの見出しにマウスカーソルを合わせるだけで、 フォーカスされていることを表す見出しの画像 (背景色が異なるだけ) を いちいち Web サーバーへ取りに
第1回 使いやすいメニューはどう作る？ ～水平メニュー | gihyo.jp
「使いやすいメニュー」に必要な3つのこと よく「ナビゲーションメニュー」と言われるように、Webサイトではメニューはナビゲートするためのものです。ナビゲートする対象はもちろん人（ユーザー）ですが、もっと具体的に言及すると「情報を探しているユーザー」ということになります。そして、情報を探す際には、できるだけ簡単に探せる必要があります。 使いやすいメニューには、3つのことが必要です。1つ目はアフォーダンス。言い換えると「メニューがメニューである（次の情報に導く）とすぐにわかる」ということです。2つ目はインタラクティブ性。たとえばメニューにマウスオーバーした、あるいはクリックしたことがわかることを意味します。3つ目はカレント表示。これは「現在いる場所がわかる」という意味です。 この3つを満たすため、メニューには3タイプから4タイプの画像を用意することが多くなっています。ノーマル時、マウスオーバー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.life-is-bitter.com/entry/ui_checklist
http://csscorners.com/
「印刷用ページ」の作り方
