今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！
2019年2月3日 CSS 要素の四隅の角を丸めるためのCSSプロパティー「border-radius」。ボックスや画像などの要素に対して適応でき、角丸にしたりまん丸にしたりと、様々な表現が可能です。このプロパティーが使えるようになってから、どれだけコーディングが楽になったか…！今回はそんなborder-radiusの基本的な使い方と、応用表現を紹介します！ ↑私が10年以上利用している会計ソフト！ 無難で王道！正円の円弧を使った角丸 border-radius は「border」とついているものの、border プロパティーの指定がなくても大丈夫。background によって与えられた背景や、img 要素で指定された画像の四隅も丸まめられます。 四隅に同じ値の丸みを与えるなら border-radius: 10px; と記述すればOK。半径10pxの正円の円弧をベースにした角丸を実装で
[CSS]ページが長くても、ページ全体を角丸のボーダーで囲むスタイルシートのテクニック | コリス
ページ全体を角丸のボーダーで囲み、そのページがスクロールするくらい長くても全体を囲むスタイルシートのテクニックを紹介します。 Body Border, Rounded Inside Step 1: ページ全体を角丸で囲む（スクロール非対応） Step 2: ページ全体を角丸で囲む（スクロール対応） Step 3: ページ全体を角丸で囲む（スクロールバーを変更） Step 1: ページ全体を角丸で囲む（スクロール非対応） まずはシンプルなスタイルシートで、ページ全体を角丸のボーダーで囲んでみましょう。 基本的な考え方は、body要素にborder-imageを使い、4つの角を角丸にします。使用するのは下記の画像です。 角丸用の画像 コードを見てみましょう。 HTML HTMLは、bodyだけで構いません。 <body> <h1>Rounded inside body border</h1>
角丸の作成・修正の強力な武器になる機能拡張 -Corner Editor | コリス
Corner Editor Corner Editorの主な特徴 Corner Editorのインストール Corner Editorの使い方 Corner Editorの主な特徴 旧版の全ての機能が使え、更に多くの機能を備えています。 直線で作成された角に角丸作成・修正ができます。 角を一つだけでも、複数同時でも、複数別でも簡単に角丸を適用できます。 角の種類は角丸だけでなく、計4種類のスタイルに増えました。 多角形にも対応しました。 一度設定した内容をセーブできるようになりました。 パスがスムースになりました。 各コーナーにラベルを付与できるようになりました。 Corner Editorのインストール インストールは簡単です。 ※Win/Mac共通です。 ダウンロードして解凍した「Corner Editor.jsx」を、Photoshopフォルダ内の「/Presets/Scripts/
Photoshopで角丸矩形の四つの角丸を個別に編集できるようにする機能拡張 -Rounded Rectangle Radius Resizer
Photoshopで角丸矩形を作成する時、シェイプツールをよく使用すると思いますが、その角丸の矩形の四つの角丸を個別に数値で編集することができる機能拡張（スクリプト）を紹介します。 対応は、CS5, 6みたいです。CS6のWin, Macの日本語環境で動作しました。 Rounded Rectangle Radius Resizer Rounded Rectangle Radius Resizerのインストール Rounded Rectangle Radius Resizerの使い方 Rounded Rectangle Radius Resizerのインストール インストールは簡単です。 ダウンロードして解凍した「Rounded_Rectangle_Radius_Resizer.jsx」を、Photoshopフォルダ内の「/Presets/Scripts/」内に移動します。 Photosho
角が丸いグループのCSSを組むチュートリアル。あのiOSっぽいやつ。（CSS おれおれ Advent Calendar 2012 – 04日目） | Ginpen.com
CSS おれおれ Advent Calendar 2012 – 04日目 iOSでよくみるあのメニューっぽいのをCSSで組んでみたいと思います。 必要になる知識はこんな感じ: border-radius :first-child, :last-child box-shadow デモ 先に完成品です。 作り方 HTML グループを括る要素と各項目の要素が必要です。 何でも良いですが、今回は愚直にul>liにして、ulの方にクラス名を与えました。 最初のCSS まずは枠を用意します。 全体を括る枠があるのですが、ulではなくliの方に付けます。そして項目の境界部分が太くならないよう、下側を空けます。 ここで:last-childというのが出てきました。疑似クラスというやつで、:hoverの仲間です。この場合は「兄弟の中で最後のもの」を指します。 兄弟？ あ、「兄弟」とかわかりますかね？ HTM
[CSS]シンプルなHTMLで角丸のタブをより美しく実装するチュートリアル
画像を使用せずに、リスト要素で実装したシンプルなHTMLで角丸のタブをより美しく実装するチュートリアルを紹介します。 (Better) Tabs with Round Out Borders [ad#ad-2] 下記は各ポイントを意訳したものです。 デモ 実装 デモ デモはChrome, Safari, Firefox, Operaでご覧ください。 IEはたぶんIE10で対応するはずです。 デモページ 実装 まずは、HTMLから。 HTML タブをシンプルなリスト要素で実装します。 <ul class="tabrow"> <li>Lorem</li> <li>Ipsum</li> <li class="selected">Sit amet</li> <li>Consectetur adipisicing</li> </ul> [ad#ad-2] CSS CSSの実装は、少しずつキャプチャと
PIEバグレポート
この記事は1年以上前の記事のため、内容が古い可能性があります。 複数のタグの中にあるブロック要素のタグを角丸にする場合、角丸が効かない場合があります。 例） <div class="box_outer"> <div class="box"> PIEではIEでも<br /> 角丸・ドロップシャドウ・グラデーションを<br /> 実行できます。 </div> </div> この要素の各スタイルは以下の通り .box_outer{ padding:20px; background-color:#FFF; } .box { padding:20px; background-color:#EEE; border:solid 1px #000; /*角丸*/ -moz-border-radius: 15px; /*FireFox*/ -webkit-border-radius: 15px; /* Sa
[CSS]さりげなく、美しくて分かりやすいテーブルにするCSS3のチュートリアル
IE6などの非サポートブラウザも配慮した、角丸、ゼブラ柄、ハイライトなど美しくて分かりやすいテーブルを実装するCSS3のチュートリアルを紹介します。 デモページ:Zebra stripes, footer 角丸、セルを交互にカラーリング 実装のポイント CSS3を使って美しく、そして機能するテーブルを実装するポイントです。 画像を使用しないで、角丸を実装。 余分なid, classは使用せず、更新が容易。 ※tableにclassを一つだけ ユーザフレンドリーで、読むことが簡単。 実装 HTML HTMLは非常にシンプルです。 classは、tableタグにのみ使用します。 <table class="bordered"> <thead> <tr> <th>#</th> <th>IMDB Top 10 Movies</th> <th>Year</th> </tr> </thead> <tr
[CSS]シンプルなHTMLでタブを角丸にするチュートリアル（イラスト付き）
シンプルなHTMLでどのように角丸のタブを実装するか、分かりやすいイラストを交えたチュートリアルを紹介します。 Tabs with Round Out Borders デモページ [ad#ad-2] HTML HTMLは非常にシンプルで、リスト要素で実装しています。 <ul class="tabs group"> <li class="active"><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> <li><a href="#three">Four</a></li> </ul> classのactiveは、現在のタブを明示するものです。 リスト要素をどのように角丸のタブにするか、イラストでご紹介。
appleスタイルのクールなインプットフィールド実装チュートリアル:phpspot開発日誌
Creating an Apple-Style Input Field With Display Labels | Design Shack appleスタイルのクールなインプットフィールド実装チュートリアルが公開されています。 次のようにグラデーションがかかっており、カーソルをあわせると青くハイライトされます。 普通のインプットフィールドと比べてなかなかかっこ良くなってます。サンプルのダウンロードも可能 デモページ border-radius、text-shadowなどCSS3を駆使してるようです。 関連エントリ textareaやinputでタブの入力を可能にするjQueryプラグイン「Enable tab key」 クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」
iOS Safari で border-radius : <percentage> が使えない件
いや、これは単純に私が知らなかったというか、普通に使えると思い込んでいただけなんですけどね。 前のエントリで 「HTML5 + CSS でコバトン描いてみた」 っていうお遊びを紹介したのですが、その後 iPhone / iPad で確認してみたらコバトンさんのお顔が四角い顔になっていて、そこで初めて気がつきました。結論から言ってしまえば単なる勘違いという間抜けなお話ではありますが、メモ代わりにエントリ。 2012年5月14日追記 iOS のバージョンアップで border-radius プロパティに 「%」 値が使えるようになりましたので文末に関連エントリを追加しました。 iOS で見たらこんな感じになっていました… で、冷静に考えれば、PC 版 Safari も 5.0 系 （Webkit） までは 「%」 値が使えなかったので、同じ Webkit ベースの iOS 版で使えないのは当た
[CSS]すぐに利用できる、美しいボックスシャドウと角丸のスタイルシートのまとめ
一昔前はPhotoshopを使用しないと作成できなかったデザインをCSS3で実装するシリーズのナビゲーション編から、すぐに利用できるボックスシャドウと角丸のスタイルシートを紹介します。 CSS3 vs. Photoshop: Rounded Corners and Box Shadows [ad#ad-2] 下記は、その中からボックスシャドウと角丸に関するスタイルシートをピックアップしたものです。 ボックスシャドウ -box-shadow 角丸 -border-radius 対応ブラウザ ボックスシャドウ -box-shadow HTMLはsection要素を使用していますが、これはdiv要素などでもそのまま利用できます。
紙を折ったようなエフェクトを実装するチュートリアル | コリス
画像を使用せずに、スタイルシートで紙を折ったようなエフェクトを矩形の角に適用するチュートリアルを紹介します。 Pure CSS folded-corner effect [ad#ad-2] 対応ブラウザはCSS3と:before疑似要素を使用しているため、Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+です。 デモページ 紙を折ったようなエフェクトの実装 紙を折ったようなエフェクトは、全部で4種類あります。 HTML HTMLはdiv要素を使用するだけで、class名を変更するだけです。 <div class="note"> コンテンツ </div> 適用するclassは「note」です。 全てのベースとなるスタイルシートです。 .note { position:relative; width:480px; padding:1em 1
Photoshopのシェイプツールでオブジェクトの輪郭をくっきりさせる方法
知ってる人には当たり前だと思いますが、Photoshopのシェイプツールを使って描いたオブジェクトの輪郭をくっきりさせる方法を紹介します。 Fixing Photoshop's Shape Tool [ad#ad-2] 上記だと違いが分かりにくいかもしれないので、拡大すると下記のようにオブジェクトの輪郭がくっきりしているのが分かると思います。
Full Set Of Credit Card Icons By Graphicpeel
Free Web Resources Everyday - WebResourcesDepotLouis Harboe, a talented icon and interface designer, is sharing a set of 35 credit card icons in his blog Graphicpeel. Icons include all major credit card providers like Visa, Mastercard, American Express, etc. with multiple versions and also there are items for PayPal, Google Checkout or Amazon too. They are sized 32*32px and come in .PNG format. Sp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chromeで画像の角丸枠線がボケるのを回避する。（CSS おれおれ Advent Calendar 2012 – 20日目） | Ginpen.com
[CSS]三角・丸・アロー・吹き出し・アイコンなど、全200種以上のさまざまな形状をつくるスタイルシート -Neo CSS
rejects_web
steamdev.com
[CSS]Safariで見かける角丸のにじみを解消するスタイルシート