CSSで角丸を表現する方法をちょっと詳しく書いてみる
CSS3では、border-radiusプロパティを使う事で角丸を表現する事ができます。 この方法を少し詳しく調べてみました。 .radius{ border-radius: 10px; /* CSS3草案 */ } ここの10pxとは角丸の半径の大きさとなります。 ただし、現在のところはCSS3はまだ草案なので、 Safari、Google Chrome では -webkit-border-radius、 Firefox では -moz-border-radius と指定します。 Safari、Chorme用（-webkit-border-radius） 4辺を一括指定する場合は以下のように書きます。 .webkit1{ -webkit-border-radius: 10px; /*一括指定*/ } 4辺を個別に指定する場合は以下のように書きます。 .webkit2{ -webkit-b
border-radius + -moz-border-radius + (Nifty Corners * IE behavior) - 徒書
border-radius + -moz-border-radius + (Nifty Corners * IE behavior) これまではさほど関心を持っていなかった角丸なのですが、最近のはてなブックマークで角丸を扱った記事が多く取り上げられてたり、CSS Nite Vol.6(見に行ってました)でも角丸が取り上げられたりしていたので、今更ながらにわかに興味が出てきたのでした。 たぶん、自分が角丸へ関心を持つのを避けていたのは、作る側として「実現するのがややこしいから」ということだったと思うのですが、見る側からしてみると、角丸のもつ見た目の印象はかなり効果的だよなあ、と考えるようになってきました。最近見たものだと、Catalystでサンプルアプリケーションを作った時のデフォルトページが、-moz-border-radiusをつかったスタイルで、衝撃的でした。 さて角丸をどう実現するか
『記事内の画像の角を丸くする。border-radius(CSS3)』
<style type="text/css">.entry .contents img[src*="user_images"]{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}</style> 数値を大きくするほど丸くなります。 似たような部分が3箇所ありますが、現在のところは「こんなものだ」と思っておいてください。 数値は全部同じにしておきましょう。 今回の指定では、Amebloさんの画像フォルダから呼び出した画像にだけ適用されるはずです。 絵文字アイコンやおねだりボタンなどには適用されません。 ※使い方が分からない方はこちらの記事を参考にしてみてください。 『フリープラグイン、フリースペースを利用したカスタマイズ。編集前の準備。』 『フリープラグイン、フリースペースを利用したカスタマイズ。編集
border-radiusプロパティ
CSS3 の border-radiusプロパティはボックスの角を丸める際に利用します。 各コーナーの値の設定に依って、 さまざまな形のボックスを表現できるようになりました。 (*´ω`*) 丸めは、指定された半径の円、あるいは楕円の円周、となります。 左上 border-radiusプロパティを使って角丸ボックスを作る。 ※下記 サンプルコード： ボーダーは指定がない場合は border:2px solid #000;です。 必ず書き加えてください。背景色やテキストなどは別途設定してください。 ４つのコーナーを同じ半径の角丸に、 値１つ .radius-Box { border-radius: 15px; /* 半径を15px に */ /* 値の単位には px,emなど 或は %を使用 */ } 正円形 高さ、幅を同じにして 値を ５０パーセントに .radius-Box { heig
border-radius｜プロパティ｜CSS HappyLife ZERO
border-radiusプロパティは、四つ角の半径を一括指定できるショートハンドプロパティです。 これにより、指定した要素の角を角丸にする事ができます。 角を丸くするだけなのにこのプロパティが使えるだけで、角丸なサイトのデザイン再現用のdiv要素が減り、コーディングもかなり楽になってきます。 とはいえ、角丸は情報を提供するだけなら有っても無くても変わりませんが、ユーザーに与える印象は大きく異なってきます。なので、IEユーザーが多い現状では、デザインとして重要な部分は従来通り背景画像にするなど、訪れるユーザーの事も考慮しながら使うと良いかと思います。 なお、border-radiusプロパティを含む、「CSS Backgrounds and Borders Module Level 3」は現在（2010/01/17） Candidate Recommendation（勧告候補）なので、まだ
【60枚】素晴らしすぎて思わず壁紙にしちゃうような画像スレ カナ速
●【60枚】素晴らしすぎて思わず壁紙にしちゃうような画像スレ 最後不明 ●【60枚】素晴らしすぎて思わず壁紙にしちゃうような画像スレ いいね ●平野綾「私のやってる仕事って凄いんですよ！！！」 堂本光一その他芸能人「すげーっ！」 >>勝手に好きでもいいですか？ これ前にシンスケが散々言ってたやつだろｗｗｗｗ まんま使うって枕デコビッチすげーな・・・ ●平野綾「私のやってる仕事って凄いんですよ！！！」 堂本光一その他芸能人「すげーっ！」 平野綾、ＴＶ出はじめの時はあまりの痛々しさに 「うわ、キモッ！」って苛立ち半分にチャンネル変えてたけど 最近は特に動じず「あ、平野だ。チャンネル変えよ」って位に ●男の8割 「結婚したい…老後独り身は寂しい…自分の帰る場所が欲しい…」 それどこ情報ー？どこ情報よー？ ●30代IT社長「若者の98%は甘まったれ。屑だから首にしてやった」
非デザイナーのためのデザイン基本テクニック その２ | 07design.blog
前回の投稿からかなり空いてしまいました。はてブ砲によりかなりアクセスが伸びてしまい、プレッシャーでいい記事を書こうと思えば思うほど腰が重くなってしまいました。というのはウソでずっとときメモやってました。次回からはもったいぶらないで何かエントリを書く際は一気に書こうと思います…。さて続きです。・・・前回の投稿からかなり空いてしまいました。 はてブ砲によりかなりアクセスが伸びてしまい、プレッシャーでいい記事を書こうと思えば思うほど腰が重くなってしまいました。というのはウソでずっとときメモやってました。 次回からはもったいぶらないで何かエントリを書く際は一気に書こうと思います…。 さて続きです。 前回非デザイナーのためのエントリーだからwebサイトじゃなくてチラシにしよう、と思って記事を書いたんですが 駆使するツールがもちろんweb上にあるものなので、カラーもweb用になってることを失念
非デザイナーのためのデザイン基本テクニック その１ | 07design.blog
デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、実はデザインというものは数々のルールによって成立しています・・・デザイナーではない方も趣味でサイトを作っていたり、デザイナーに頼むほどでもない画像を作ったりする機会があると思います。 デザイナーはセンスでサクサクと制作するイメージがあるかもしれませんが、 実はデザインというものは数々のルールによって成立しています。 そのルールの知識があればデザイナーレベルとはいかないものの、見た目がきれいなグラフィックは作れるはずです。 デザインという言葉の定義やソフトの使い方から始めてしまうとややこしくなるので、 今回はあくまでも「とりあえず見た目をキレイにする」ということに重点を置いて説明します。 記事内で
らばQ:知っておきたい写真が劇的に上手になる25のテクニック
知っておきたい写真が劇的に上手になる25のテクニック デジタルカメラのおかげで気軽に何枚でも撮影できるようになり、素人でも写真を撮る機会や人に見せる機会が増えました。 ちょっとしたコツ、ちょっとした心がけひとつで、写真が劇的に良くなるならば試してみたいものですよね。 そんな劇的に写真が上手になる、25のテクニックをご紹介します。 1. 太陽の撮影は望遠レンズを使う。 悪い例 良い例 2. 人物写真は望遠レンズを使うか、ズームレンズの望遠側を使おう。悪い例 良い例 3. 旅行写真にはアクションを入れる。 悪い例 良い例 4. 夜景は日が沈んでから20分後に撮影する。 悪い例 良い例 5. 葉の撮影は色の種類を抑え、メインの被写体をハイライトする。 悪い例 良い例 6. 人を水平に撮るときは足を中心にするのを避ける。 悪い例 良い例 7. 生物のマクロ撮影は植物のレベルまでに近づく。 悪い例
はてブ1位になると、何が起きるのかまとめてみた
私は以前から、「はてブのホッテントリの上位に表示されるとどういう事が起きるのか」という事がちょっぴり気になっていたのですが、もしかしたら他のブロガーさんやはてな ユーザーの方も気になっているのではないかと思い、先月、偶然知らないと損する賃貸マンションの探し方という記事がはてブ1位を取ったときに起こったことをまとめて「どうしたらホッテントリに入ったのか」「ホッテントリ1位になったとき何が起きたのか」を全て公開する事にしました。 はてブ1位になるまで、このブログにはわずか1日20PV(ページビュー)しかありませんでした。 だからこそ、純粋に「はてブ1位でどれだけの方が来るのか」を計測できたのではないかと思います。 日曜にホッテントリ入りした時はわずか470PV/日だった 実はこの記事がホッテントリする1週間ほど前、VPSを借りて、Twitter botを動かすまでの設定をまとめてみたという記事
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
【Facebook】Graph API の説明：プロジェクトマネジメント10.0：オルタナティブ・ブログ
ブログ引っ越しました→「Looops 直人の備忘録」 ◆関連記事 【Facebook】Social Plugin 説明 2010/04/23 【Facebook】Open Graph Protocol 説明 2010/05/12 お世話になっております。 ループス岡村直人です。 前回の記事ではFacebookのSocial Pluginに関して、 簡単な説明を書かせていただきました。 今回はその続き、Graph APIについて書いてみたいと思います。 前回同様、Facebook.com上のドキュメントがベースになりますので、 内容については未検証の部分も多々あります（未検証の部分はその旨言及するようにいたします）。翻訳をベースとしているため、断定するような表現で文章が終わっている部分が多いのですが、その内容を保証するものではありませんので予めご了承いただきたく存じます。 認識違いや不明点等
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
border-radiusをつかって丸を作ってみました | HTML5GOGO
fizsoft.net - Registered at Namecheap.com
border-radius.js サンプル - jsライブラリ - HTML5.JP
無効なURLです