グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
CSSで、button要素とinput要素のテキストを美しく揃えるスタイルシートのテクニック
検索フォームなど、button要素とinput要素を並べて配置した際に、それらのテキスト（アイコンも）を垂直方向に美しく揃えて配置するスタイルシートのテクニックを紹介します。 ボタンと入力フォームの高さは自由に変更でき、デザインも普通に変更できるので、スニペットとして登録しておくと便利です。 button要素とinput要素のテキストを揃える インタラクティブな要素のコンテンツを垂直方向に揃えるのに苦労したことはありませんか？ あなたは仲間です、多くの人が経験していると思います。 この記事では、line-height, padding, flexboxを使用して、button要素とinput要素のコンテンツを中央に配置する方法について解説します。 まず、ゴールを明確にしておきましょう。 button要素とinput要素のコンテンツは完璧に揃えます。 button要素とinput要素の高さは
Webクリエイターボックス
WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ 続きを読む Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します。 続きを読む WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね
CSSで実装が面倒なトグルをさまざまなデザインで簡単に実装できるCSSの軽量ライブラリ -MoreToggles.css
シンプルなHTMLに、実装が面倒なトグルをclassを加えるだけで簡単に実装できるスタイルシートを紹介します。 iOSやAndroidのスタイルをはじめ、チェックやスクエアなど、さまざまなデザインのトグルを簡単に実装できます。トグルは拡大縮小にも対応しているので、非常に便利です。 MoreToggles.css MoreToggles.css -GitHub MoreToggles.cssの特徴 MoreToggles.cssのデモ MoreToggles.cssの使い方 MoreToggles.cssの特徴 MoreToggles.cssは、さまざまなデザインのトグルを簡単に実装できるCSSライブラリです。classを追加するだけで、簡単に利用できます。 JavaScriptはなし、ピュアCSS classを付与するだけで、簡単な実装 8つのスタイル（さらに増やす予定） トグルの拡大縮小
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
※記事更新から1年以上が経っているため情報が古い可能性があります 当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。 投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。 そこで今回は、当ブログ「ひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。 当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。 デザイン完成図 使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢
Firefoxでテーブルのthとかtdにはposition:relativeが効かない件 - 主に技術的なことを書くブログ
Firefoxでは、テーブルのthとかtdにはposition:relativeが効かないというか。 borderとかが消えたりとかします。 しかし、真実は、ChromeやIEが独自の実装をしているだけで、本当の正義はFirefoxにあると。 どういうシーンで起こるか th内の右上とかに小さいボタンを置くときにわざわざthの中で、ブロックを2つに分けてフロートとかさせるのはちょっとしんどい。なので、positionでやろうとすると、thにposition: relative;をかけることになるので、起こる。という具合です。 解決方法 単純にdivをかまして、そっちにposition: relative;をかける。 th.inBtn { padding: 0 !important; /* table全体でかけてる内側パディングとる */ } th.inBtn > div { position
✨安い！！お得！！激安CSS！！✨ - Qiita
<span class='price'> <span class='price1'>19</span><span class='price2'>,800</span> <span class='yen'>円</span> </span> @import url(https://fonts.googleapis.com/css?family=Poppins:700); .price { color: #c70506; text-shadow: 2px 0 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 0 -2px 0 #fff, 5px 4px 3px rgba(0,0,0,0.5); font-weight: bold; font-family: Poppins; letter-spacing: -3px; } .price1 { font-size: 78px
px,pt,%,em 文字の大きさ 数値一覧表 - 山崎はるかのメモ
この一覧について 単位系の異なるWebページを、どちらかに統一した単位系にする際にべんりなので作った。 表をクリックすると、その段のフォントサイズをデフォルトフォントとして％やemなどを再計算し表示する。 各単位の略称は次の通り px : ピクセル pt : ポイント in : インチ mm : ミリ pc : パイカ また各値は次の点に注意。 Windowsは96dpi、Mac/Linuxは72dpiで表示。 CSSの単位系を使用。（1パイカ = 1/6インチ） 絶対サイズ指定は参考値。ブラウザ・環境によって異なることがある。 小数点は四捨五入して第3位まで表示。 （2010/11/16・山崎はるか） 修正：画面クリックで再計算機能 2010/11/22 スマホ表示対応：2017/02/12 mmの計算式の誤りを修正・表の小見出し修正：2021/05/17 このサイト（山崎はるかのメモ）
スマートフォンサイトに！CSSでできるボタンデザイン | SONICMOOV LAB
こんにちは。デザイナーのユウコです。 CSS3の登場によって、従来なら画像で作成していたボタンも、デザインによってはほぼCSSだけで表現することができるようになりました。 そこで今回は、CSSでできるボタンのデザイン・エフェクトについてご紹介します。 １.枠線・角丸 CSS3では、ボタンに枠線をつけるだけでなく、角丸にすることもできます。 上下左右の枠線の色・太さを個別に設定できて、また四隅それぞれに角丸の大きさを設定できるので、上部だけ角丸に、下はフラットにしてタブっぽいデザインのボタンなんかもCSSだけで可能です。 2.背景色のグラデーション ボタンの背景色にグラデーションを設定することができます。 線形のグラデーションであれば、グラデーションのポイントを複数指定できるので、立体感のあるボタンだけでなく、つやっとした光沢感のあるデザインも表現できます。 不透明度も設定できるので、背景に
ituore.com - ituore リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ulやolはmarginとpaddingをセットで
FirefoxとInternetExprolerの初期値の違い ulやolのmarginを設定するときにはmarginと共にpaddingも設定します。インターネットエクスプローラとその他のブラウザの初期設定が異なるからです。 Firefoxは右側のmarginとpaddingの初期値がそれぞれ0と40pxになっています。次のようにして調べることができます。 インターネットエクスプローラの場合はmarginとpaddingの初期値が逆になっていて、それぞれ40pxと0になっています。次のようにして調べます。 灰色の点線がボーダーの位置です。Firefoxが・を含むのに対して、IEは含まないという違いもありますが、paddingを一致させると同じになります。背景色をつけるときには注意する必要があります。 この初期値はFirefox2.0とインターネットエクスプローラ6.0のものです。バージョ
WEBセーフカラー216色－WEBカラーリファレンス
●WEBセーフカラー216色 8ビットカラー256色のうち、MacintoshとWindowsで異なる40色を除いた216色をWEBセーフカラーといいます。 ユーザーの閲覧環境によっては、制作者の指定した色が変換されて表示されてしまう可能性がありますが、 WEBセーフカラーを使用することでそのリスクを低くすることができます。 安心して使用できる“セーフ”なカラーというわけです。 WEBセーフカラーは、RGBの各色をそれぞれ6段階に分けて、それらの組み合わせでできる色です。 16進表記の場合は00、33、66、99、CC、FFの6段階、 0～255の10進表記の場合は0、51、102、153、204、255の6段階、 パーセンテージ指定の場合は0％、20％、40％、60％、80％、100％の6段階の組み合わせでできる色は、全てWEBセーフカラーとなります。 6×6×6=216色です。 カラー
ウェブカラー - Wikipedia
この節は検証可能な参考文献や出典が全く示されていないか、不十分です。 出典を追加して記事の信頼性向上にご協力ください。（このテンプレートの使い方） 出典検索?: "ウェブカラー" – ニュース · 書籍 · スカラー · CiNii · J-STAGE · NDL · dlib.jp · ジャパンサーチ · TWL (2020年5月) ウェブコンテンツの視覚的な表現に関して指定するスタイルシート（CSS）や、Scalable Vector Graphics（SVG）において、色を指定する方法はいくつかある。主要な方法としては、十六進でRGBの三ツ組（16進トリプレット）を指定する方法と、色名称で指定する方法がある。詳細は後の節で述べる。
ゴーストボタンにマウスを乗せたときの動きいろいろ16個
昨年くらいから流行っているらしいゴーストボタンというもののサンプルをいくつか作ってみました。皆さん色々作られていて、今さら感もありますがぜひご覧ください。 今回、以下のルールに沿って16個サンプルを作りました。 HTMLは全て同じ マウスを乗せる前は同じ状態 擬似要素は使っても1つだけ 擬似要素を2つ使ったり、spanなんかをはさんでやるともっと色々できると思いますが、今回はシンプルにマウスを乗せたときに動きをつけるサンプルを紹介します。 サンプルはこのページで全て載せていますが、まとめて見たいという方はこちらをどうぞ。 ということで、HTMLはこんな感じになります。 <a href="#" class="btn sample1">sample 1</a> 普通のリンクですね。btnは共通部分、sample1はサンプルごとで違ってくる部分になります。 では、共通部分のCSSです。 a.bt
perfect-scrollbar
perfect means... There's no css change on any original element Do not affect the original design layout The scrollbar css is fully customizable The scrollbar size and position can be updated Download perfect-scrollbar-0.3.3.tar.gz perfect-scrollbar-0.3.3.zip Demo Source <script> function change_size() { var width = parseInt($("#Width").val()); var height = parseInt($("#Height").val()); if(!width |
ブラウザのスクロールバーをデザインする「perfect-scrollbar」 - ┗┐＜(՞ਊ՞)＞┌┛
ブラウザのスクロールバーはダサいです．まだ右端のスクロールバーなら許せるところはあるのですが，ページ内コンテンツでoverflowなどで出現するスクロールバーには怒りを覚えます． デフォルトのデザインがあまりにも嫌なので色々探していて，jScrollPaneやらを見てたのですが，あとで動的にdivを追加した時，スクロール範囲が自動で大きくならず，スクロールできなかったり，なんか動きモッサリしている気がして使う気になりませんでした． そこでもっとスマートに書けるライブラリは無いのか？と思って探して見つけたのが「perfect-scrollbar」です． http://noraesae.github.com/perfect-scrollbar/#Demo デモページに飛びます．あずにゃんの画像が設置されていて，画像サイズ（正確には背景画像が設定されているdiv）の大きさに合わせてスクロールバー
CSSで指定するロールオーバー(1)｜CSSの小技(指定テクニック)
グローバルナビゲーションやローカルナビゲーションに画像を使用してボタン化しているサイトがあります。特にホームページビルダーを利用されている方、ホームページを制作されて間もない方のほとんどがjavascriptで指定していると思いますが、ここでは同じ仕組みをスタイルシートで指定する方法の紹介です。 下記のCSS指定は一番簡単な方法となります。もうひとつの方法はロールオーバー(2)を参照して下さい。こちらの方が画像入れ替えがスムーズに行えます。 ロールオーバーサンプル Home menu menu menu menu (X)HTML <ul id="globalnavi"> <li id="menu1"><a href="#">Home</a></li> <li id="menu2"><a href="#">menu</a></li> <li id="menu3"><a href="#">me
borderで背景画像を表示する border-image - シンプルシンプルデザイン CSS
border-imageは、一枚の画像で9スライスのデザインが実現できちゃうという優れもの。 残念ながらIE8以下で適用できず、実際にはまだ使えないかなーという印象。プログレッシブエンハンスメントを適用してうまく見せるのは結構難しそうだなー、という感触。 とはいえせっかく調査したので備忘録。 border-image を使ったサンプル 仕様 border-image-source none（初期値）/ url(画像パス) border-image-slice 100％（初期値）/ 数値 / ○○% / 数値 fill / ○○% fill border-image-width 1（初期値）/ ○○px / ○○% / auto border-image-outset 0（初期値）/ 数値? px? border-image-repeat stretch（初期値）/ repeat / rou
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML,CSS カラーコード一覧表 ｜ 背景色や文字色の設定
travelbanana.net
