iPhoneやAndroidのサイトでスクロールバーをカスタマイズ ｜ スターフィールド株式会社
CSSの設定で、”overflow: auto” や”overflow:scroll”を指定したとき、 iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、 スクロールは可能なのですが、スクロールバーが表示されません。 そのままでは、そこがスクロール可能であるということがわかりづらく、 サイトとして使いづらくなってしまう可能性が高くなります。 なんとか解決策はないかと探していたところ、 Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、 その方法についてご紹介いたします。 ↓こちらがデモです(ChromeもしくはSafariにてご覧下さい) DEMO 方法 スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundと
Firefox 27 が正式リリース、all:unset で CSS のリセットが可能に
Firefox の最新版、Firefox 27 が正式リリースされ、自動更新も提供開始されました。 CSS 関連では、all プロパティと unset 値に対応し、CSS のリセットが簡単に行えるようになった他、cursor プロパティ用の -moz-grab、-moz-grabbing 接頭辞が外れました。ベンダプレフィックスなしで使用できます。 Firefox 27.0 リリースノート Firefox 27 サイト互換性情報 Firefox 27 for developers all: unset で何ができるか 仕様的には下記にあります。 3.1 Resetting All Properties: the all property ： CSS Cascading and Inheritance Level 3 The all property is a shorthand that
Windowsでも綺麗な明朝体を表示する
こんにちは。 ひっそりと活動場所が 東京から大阪に変わったシモヤマです。 大阪に来て知ったのは、飴ちゃんをくれるのはおばちゃんだけではない。ということです。 さて、突然ですが webサイトに真面目な感じやリッチな雰囲気を出したい時、明朝体を使いたくなりませんか？ なりますよね。 でも、ほとんどの場合、使いません。 なぜなら macでは、基本的に全てのサイズのフォントにアンチエイリアス処理が施されていますが windowsは…。 なので、どうしても明朝にしたいときは 今までだったら：画像にする 先人の知恵を借りるなら：裏技を使う 最近：webフォント という感じでした。 わたしはもう、そこまでするなら大人しくゴシックで頑張ろうと思っていました。 ・・・が！ありました！ 使える！Officeフォント 参考記事：http://creazy.net/2007/08/windows_anti_ali
HTML5 Boilerplateのhtmlスニペットを紐解く
HTML4.01, XHTML1.0で「いつもの感じ」のソースコードにすっかり落ち着き、特に迷うこともなかった私は、Boilerplateのスニペットをみた時、結構衝撃を受けました(；´Д｀)。 今回は、Boilerplateのコアであるhtmlの内容・スニペットをひとつずつ見ていき、それらが前回テーマにした「5つの要件」にどのように作用するかを紐解いていきます。「新しい技術に取り組みたい、けど何から始めればいいか分からない！」そんな方のヒントになると幸いです。 それでは早速、謎解きスタートです！ ソース全体 まずは全体から、次のような特徴が見て取れます。 文頭に、見慣れないコンディショナルコメントがある。 ＜meta＞に「X-UA-Compatible」というのがある。 ＜meta＞に「keyword」がない。 ＜meta＞に「viewport」がある。 読み込まれているスタイルシートは
IEのCSSハックが嫌いな人は、このナイスなhtmlの書き方で対応してみてはいかが？
概要 ▶ HTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」ですが、テンプレートを使ってガリガリ制作を始めて見ると「これは本当にいいものだ！」というものが更にわかってきたので、その部分を紹介。前回はjQueryのロードの方法がナイス！という話でしたが、今回はhtmlタグの書き方がナイス！という話。いや、本当にさすがとしか言いようがない。 HTML5のベースとなるテンプレートを一瞬で作ってくれる「Initializr」ですが、テンプレートを使ってガリガリ制作を始めて見ると「これは本当にいいものだ！」というものが更にわかってきたので、その部分を紹介。 前回はjQueryのロードの方法がナイス！という話でしたが、今回はhtmlタグの書き方がナイス！という話。 いや、本当にさすがとしか言いようがない。 Internet Explorerの複数バージョンの対応は面倒 や
[意外と知らないCSS]テーブルの列幅を均等にするtable-layout:fixed | Cappee Design
あとで読みたい人は… 去年花粉症デビューした、@cappeeです。 いつまで続くかわからない意外と知らないCSSシリーズ第１弾です。 デフォルトだと自動レイアウトになっているため、セル内の文字数などによって自動的に列幅が調整されてしまいますが、table-layout:fixed を指定すると列幅を固定して均等にすることができます。 table-layout の説明 table-layout:fixed; テーブルの列幅を固定レイアウトにして均等にします。 table-layout: auto; デフォルトの値です。自動レイアウトでセルの内容によって列幅が調整されます。 table-layout:fixed の記述例 table { width: 100%; table-layout: fixed; } tableセレクタには横幅の指定が必要です。 table-layout:fixe
複数の要素に同じクラス名を指定する
解説 「要素名．クラス名」のように、特定の要素にのみ適用するスタイルシートをクラス名で指定している場合でも、「他の要素名．同名のクラス」のように同名のクラス名を他の要素に指定したり、単独で「．同じクラス名」など、同じクラス名をCSS内で複数定義することができます。 優先順序 同じクラス名を複数の要素に指定する場合は、各プロパティの優先順序に注意してください。 CSS内で「要素名.クラス名」のような記述と、同じクラス名で「.クラス名」とを記述した場合、スタイルシートの指定方法の1つである「<要素名 class=”クラス名”>…</要素名>」でスタイルシートを呼び出したときは、両者で指定したプロパティがすべて適用されます。 ただし、両者で同じプロパティが指定されていて、そのプロパティに対する値が両者異なる場合は、「要素名.クラス名」で指定したプロパティの値の方が優先されます。 CSS p.sa
【5パターン】画像を使わず CSS3 のみで作れる吹き出しを作ってみた – Pure CSS3 Balloons | Stronghold Archive
どうもこんにちは、Honma です。今回の Tips は CSS のみで作れる吹き出しのデモです。簡単なツールチップなどにも利用できるかと思います。 CSSのみの吹き出し 5パターン×4方向 CSS は長くなるので全てデモページに記載してあります。 吹き出しの仕組み自体は :before :after 要素に三角形や円を作ることで表現しています。 Balloon 4 がうまく表示されない場合は z-index による可能性が高いので、吹き出しを囲う container の 値を 1 にするなど各自調節してみてください。 また、簡単に吹き出しを作るジェネレーター もありますので参考までに！ 以上になります。
CSSで要素を画面中央に配置する方法 | hT DESIGN blog
ある要素を画面の中央（縦横ともに中央）に配置したい。そんなとき使えるCSSテクニックについて書きます。※IE7以下のブラウザには対応していません。 要素を画面中央に配置するサンプル 水平方向（横位置）に対する中央揃えは、CSSで text-align: center; を使ったり、ブロック要素ならば margin: 0 auto; を使ったりして実現できます。しかしながら、垂直方向（縦位置）の中央揃えとなると、簡単に出来そうでなかなか上手くいかず、悩むところです。 tableタグによって実現することもできますが、あまりスマートなやり方ではありませんので、ここではCSSを使って中央に配置する方法を説明します。 <TABLE>タグをレイアウト目的で使用するケースがありますが、 <TABLE>タグは本来はテーブル（表）を作成するためのタグです。 レイアウト目的には、できるだけスタイルシートを利用
画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合のCSS - スタイルシートTipsふぁくとりー
《2019年9月16日 16:10 公開/更新》 画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合のCSS [イメージ,幅] 画像を描画領域の横幅いっぱいに表示したいけども、原寸サイズを超えて拡大はさせたくない、という場合がありますよね？ つまり、画像より描画領域(ブラウザのウインドウや端末の画面)の方が狭い場合は「横幅一杯になるように自動縮小させたい」けども、描画領域の方が広い場合は自動拡大はせずに原寸サイズで表示したい、というケースが。特にレスポンシブ・ウェブデザインを採用している場合などで。そんな画像の表示方法もCSSなら簡単です。 画像の横幅をウインドウ幅に合わせたいが、原寸より大きくはしたくない場合のCSS 描画領域の横幅に合わせて自動で拡大したり縮小したりする表示 描画領域の横幅いっぱいになるよう自動でサイズ調整はするが、原寸より大きくはしたくない場合 画
display:none と visibility:hidden の違い - Qiita
visibility:hiddenは名前の通り、要素はあるけど見えない状態。 display:noneは、要素も取得されず、完全にその場にない扱い。 検証準備 html <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>difference between visibility hidden and display none</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="one" class="box"></div> <div id="two" class="box"> <h3>Visibility:hidden</h3> エレメント描画されず。けど、表示エリアは「残る」。背景色で塗りつぶした感
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日本のドメイン登録業者(レジストラ)（「ICANNがレジストラとして認定した企業」一覧（InterNIC提供）内に「Japan」の記載があるもの）を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年10月時点の調査。
画像を使わずに見出しを水平線で挟むCSS小技 - かちびと.net
ちょっと素敵だったので備忘録。CSS で見出しを水平線で囲むテクニック です。本とかでよくある表現方法です が、これを画像を使わず実装しよう、 というもの。クロスブラウザで動作 しますので汎用性もありますね。 これはいいですな・・・IE6でも7でも実装出来て、背景カラーや画像にも依存しません。 demo こんな感じ。よく見かけますが、これをCSSのみで実装するTipsです。 h1 { border-top: 1px solid black; margin:23px 0 0; text-align:center; padding:0; height:24px; } h1 span { position: relative; top: -24px; padding: 0 20px; background:white; } borderを使って実装。h1にborderを付けて位置を下げ、span
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
コピペで５秒！CSS3で背景画像を画面いっぱいに表示する | ホームページ制作お役立ち情報
2014年9月14日 【CSS3】コピペで５秒！背景画像を画面いっぱいに表示する 背景画像をブラウザいっぱいに表示するテクニックを、シンプルかつ簡単に叶えるスタールシートをご紹介します。もちろん、レスポンシブ対応です。 元のサイトはこちら。 Responsive Full Background Image Using CSS （http://sixrevisions.com/css/responsive-background-image/） [デモページ] （http://cdn.sixrevisions.com/0431-01_responsive_background_image_demo/responsive-full-background-image-demo.html） 方法はとてもシンプル。 bodyの背景画像関連のcssを記述するだけです。 body { background
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
ノートのように罫線（下線）を引く
ノートのように罫線(下線)を引くデザインの作り方(2ページ目)ノートのように、文中の各行に下線を引くデザインの作り方を解説。罫線画像とスタイルシートを組み合わせると、簡単にノートのように見えるデザインが作れます。 ノートの下線を画像で用意する まずは、ノートの下線になる画像を用意します。ここでは、下記の画像を用意しました。必要であればご自由にコピーしてご活用下さい。 「 」：bluedash.gif 「 」：greendot.gif 「 」：redbrush.gif 画像はすべて高さを25ピクセルにして作成しています。画像の最下部に下線が引いてあり、それ以外は透明色になっています。 スタイルシートでデザインする際には、この「画像の高さ」に合わせて記述する必要があります。横幅は何ピクセルでも構いません。高さは25ピクセルである必要はないので、お好きな高さで作って下さい。 ノートのように見える
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.css-lecture.com/log/css3/css3-gradient.html
ブログ