[CSS]シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート
GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。 CSS3 GitHub Buttons [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページはボタンの文言を日本語にし、シンプルしたものをアップしました。 デモページ（当方日本語化） 普通のボタン 注意を促すボタン 大きいボタン グループ化したボタン グループ化したものをまとめたボタン アイコンを伴ったボタン 対応ブラウザ ライセンス 普通のボタン 普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。 ボタンを作るためには、「class="button"」を加えるだけです。 デモページ（当方日本語化） <a href="#" class="button">Post comment</a> <input class="
[CSS] Full Screen Background Image - Pure CSS Code - CSSだけで描画するフルスクリーン背景
[CSS] Full Screen Background Image – Pure CSS Code – CSSだけで描画するフルスクリーン背景 Pocket Tweet CSSだけでサイトの背景にフルスクリーン表示させるためのTips。JSもFlashもいらず、CSS3の機能も使ってません。お手軽です。デモはこちら。これを見ると、ブラウザのウィンドウが一定値より細い場合は水平方向に縮小し、広げると徐々に本来の大きさになり、一定値より大きくなると拡大になるという挙動が分かります。ただしmin-heightとかmin-width使ってるので、IE6とか微妙かも（試してませんが）。最近じゃこういう表現も結構見ますよね。覚えておきたい小技。 Full Screen Background Image – Pure CSS Code
GoogleがWebフォントサービスを開始 - フォントブログ
Webフォントが一般に広まった全盛期には国内外含め様々なWebフォント配信サービスが登場しましたが、まさに戦国時代そのもので、数年後には多くのサービスが終了となってしまいました。 2023年現在、利用されているWebフォントサービスをまとめてみました。 Google Fonts 完全無料で誰でも利用可能ということもあり、現在一番利用されているGoogle Fonts。定番のNoto Sans以外にも、ZEN 角ゴシックやBIZ UDゴシックなど、プロ仕様の日本語フォントも使えます。デスクトップ用のフォントもダウンロード可。 Adobe Fonts Adobe Creative Cloud契約者なら誰でも使えるAdobeのフォントサービス。かつてはTypekitの名でサービス展開されていました。完全に日本語化され昔に比べるととても使いやすくなりました。デスクトップ用のフォントもダウンロード可
長い文字列が続いて文字がはみ出してしまうのを防止するCSS:phpspot開発日誌
Wrapping Long URLs and Text Content with CSS ? Perishable Press 長い文字列が続いて文字がはみ出してしまうのを防止するCSSが公開されてます。 CSS2/3, Opera4-7, Mozilla, IE5+ 用にクロスブラウザで動作するようにCSS例が示されていて参考になります。 通常だと文字がはみ出してしまうのを、はみ出さないようにしてくれるCSSです。 ハミ出しを防いでくれます。 対応したつもりが実は特定ブラウザだけっていうことがよくありそうなこの現象、この対策で簡単に対応出来そうです。 関連エントリ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集 便利なＣＳＳテクニック３０選 CSSリストに関する5つのテクニック集
CSSのみで挑むWEBテクニック集「30 Pure CSS Alternatives to Javascript」
TOP > WebDesign > CSSのみで挑むWEBテクニック集「30 Pure CSS Alternatives to Javascript」 WEBに動きをつけたり、制御したりとWEB上ではなにかと便利なjavascript。ライブラリやプラグインも充実していて、それを利用した様々なテクニックが公開されていますが、今日紹介するのはjavascriptは一切使わず、CSSのみで、様々な表現に挑戦しているTipsを集めたエントリー「30 Pure CSS Alternatives to Javascript」です。 30 Pure CSS Alternatives to Javascript スライダーやライトボックスをはじめ、javascriptを使って行われているような事をCSSのみで再現しています。全部で30のプロジェクトがまとめられていますが、今日はその中からいくつか
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
Webサイトの高速化・軽量化に使えるTips・参考記事を集めてみました - Feel Like A Fallinstar
Googleもスマートフォンに参入、ノートPCが完全に主流になるなど、ブロードバンドから逆に回線の「低速化」が起こっています。 参考： 今だからこそ、「軽量なウェブサイト」を作ることが重要、というお話 また、GoogleはWebの表示速度をPageRankに加味することを検討中であることを明言しています。 ただ、そうは言ったものの、ちゃんと実装しないと話しにならない訳で・・（大汗 細かいことでもちゃんと積み重ねて行かねばと。 というわけで、軽快なサイトを実装するためのTipsを自分のサイトで使ったのを備忘録的にここにも書いておきたいと思います。 まずはまとめ記事から 原則を押さえてから、細かいところに行った方が効率がよいかな、と思います。 30分でできる！Webサイトを高速化する6大原則 最適化を行うための観点が簡潔にまとまっていて、高速化チェック項目として有効です。 具体的な方法もいくつ
404 | Seo-Code
The more information you provide, the more accurate our quote will be in terms of cost and time. In the development and maintenance of the site the time and cost depend on design, technical implementation and scope of the information on the website. Promotion, on the age of your site domain, the competition searches, volume and structure of the site and other factors.
「display:none」と「visibility: hidden」と「text-indent」はスパム？ | 無料SEO対策のススメ
「display:none」や「visibility: hidden」や「text-indent」はスパム？ 検索エンジンは画像リンクよりもテキストリンクを評価するため、できる限りリンクはテキストで行いたい所です。画像と比べテキストは見栄えが劣る為、ロゴやナビゲーションはテキストリンクにしてCSSで背景画像設定する手法が良く取られます。 背景画像の上にテキストリンクを表示することは何の問題もありませんが、テキストリンクを非表示にして画像を置換えするとスパムになると思っている方も多いのではないでしょうか。 画像置換＋テキスト非表示はスパムではない 結論から申し上げますと、CSSの画像置換えによるテキストの非表示はその行為自体がスパムにあたるわけではありません。text-indent: -9999px; はスパムになってdisplay:noneならスパムにはならないという事でもありません。 C
h1タグはimgタグ（画像）でも良いの？ | 無料SEO対策のススメ
見出しタグで最もSEO効果が高いh1タグは<body>の直下にテキストで配置する事が推奨されています。誰に？ しかし、現在では見出しタグ自体のSEO効果があまり期待できない状況です。可能な限りテキストでという事に変わりはないのですが、画像（イメージ）でも特に問題ありません。それによりペナルティを受けるような事もありません。 imgタグをh1タグで囲う場合には必ず画像にalt属性を記述します。alt属性として書かれた文章が見出しとして認識されます。画像と関係の無いキーワードを詰め込む事はスパムになりますので注意が必要です。 CSS＋画像でh1の最適化 CSSの「display:none」や「visibility: hidden」や「text-indent」を使用すれば、HTMLソース上はテキストで、見た目はイメージ画像という事も実現可能です。 会社のロゴやグローバルメニュー、サイドバーなどの
IEのタグで隙間ができる - めざし回遊禄
IE6でリストタグを左や右のメニューのように使う時にブロック要素化(display:block;)したり、画像ファイルを使っていると、上下のリスト感に隙間ができるバグがあるようです。 いろいろ調べて、とりあえず解決法があったのでメモ。 【HTMLソース】 1.リストを<a>タグでメニュー化しているとき <ul> <li><a href="〜">メニュー１</a></li> <li><a href="〜">メニュー２</a></li> <li><a href="〜">メニュー３</a></li> </ul> 2.リストを<a>タグ+画像でメニュー化しているとき <ul> <li><a href="〜"><img src="メニュー１の画像" /></a></li> <li><a href="〜"><img src="メニュー２の画像" /></a></li> <li><a href="〜">
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
数枚の背景画像を使って面白い背景画像を設定するCSSサンプル:phpspot開発日誌
WEB開発者は必携かもしれないHTTPパラメータ解析用Firefoxアドオン「UrlPar... 次の記事 ≫：Photoshop用アニメの髪のブラシセット #68: Think Geek Background Fade Technique | CSS-Tricks 数枚の背景画像を使って面白い背景画像を設定するCSSサンプル。 静止画では説明しにくいのですが、画面をスクロールすることで面白い効果が得られます。 ↓↓スクロールでグラデーションが濃くなる とりあえず、デモページ を見るのがよいですね（＾＾；） fixedで固定にするのと、そのままスクロールさせるものを組み合わせて透過PNGで実現されてますね。 CSSは以下のように3枚の画像を使ってるみたいです。 body { background: #404143 url(../images/bodytiletop.jpg) repeat-
クロスブラウザの為のCSSテクニック集「15+ techniques and tools for cross browser CSS coding」
TOP > WebDesign > クロスブラウザの為のCSSテクニック集「15+ techniques and tools for cross browser CSS coding」 IE、Firefox、safariなどを始めとして様々なブラウザがリリースされていて、制作者サイドにはブラウザ間の差異を極力少なくすると言うのは使命の一つだと思いますが、構成によってはなかなか難しく手こずったりする場合があります。今日紹介する「15+ techniques and tools for cross browser CSS coding」はクロスブラウザの為のCSSテクニックを集めたエントリーです。 CSSをリセットする方法からIE用のCSSを読み込ます方法等々、様々なCSSのテクニックが紹介されていますが、今日はその中からいくつか気になったモノをピックアップして紹介したいと思います。
ジャンル別にCSSのテクニックを収録したTips集「40 Outstanding CSS Techniques And Tutorials」
TOP > WebDesign > ジャンル別にCSSのテクニックを収録したTips集「40 Outstanding CSS Techniques And Tutorials」 WEBを制作するにあたって欠かせない技術の一つCSS。工夫や発想次第で様々な表現が可能ですが、今日紹介するのはCSSを使ったテクニックをジャンル別に紹介するエントリー「40 Outstanding CSS Techniques And Tutorials」です。 Cross Browser Multi-Page Photograph Gallery イメージギャラリー、ナビゲーション、ボタンなどシーンに併せたテクニックが全部で40個紹介されています。今日はその中からいくつか気になったものピックアップして紹介したいと思います。 詳しくは以下 ■How to Style an A to Z Index with
新人デザイナーがハマったコーディングの勘違い
はじめまして。新人MEの渕上伸吾です。 カヤックのME は、uemura率いる意匠部ME課（メカ）に所属しています。 ME課のお仕事は、コーディングを覚えたい新人デザイナーのサポートも担っているのですが、 そんななかで出会った、新人にありがちな勘違いネタについてエントリーを書いてみたいと思います。 これから紹介する勘違いや誤解はME課が全力で解いているのでご安心ください ♪ 1. h1タグは太字にするためのなにかだと勘違い 同様にstrongタグも太字にするためのタグだと勘違いされる傾向があるみたいです。 h1タグのhはHeading（見出し）の意味。 strongタグは強調する意味。 情報の意味に添うようにマークアップしよう！ 2. pタグはテキストを中央寄せにするためにある、と勘違い pタグのpは Paragraph（段落）の意味。 中央寄せにする、しないに関わらず文章の段落はpタグで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Travellers Tale: スタイルシートでのフォントの名前
web.memo | 上付き、下付きタグ
https://d-lover.com/css/hack.shtml
フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集:phpspot開発日誌