タグ

*cssに関するfumikopeのブックマーク (65)

  • どや!?ひよっこデザイナーにもできるWebページ高速化!鍵は「HTTPリクエストの数を減らすこと」 | デザインどや!?

    Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー&カルーセルプラグイン、チャート&グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。

  • deferloader – 株式会社ウフル技術ブログ

    LoRa 開発シールドのデータを enebular で受け取る By hrd_pk|5月 9, 2017|未分類, | 花粉がまだ名残惜しく思っているようで、鼻がまだむずむずしています。 ぽかぽか陽気が続いていますが、みなさんいかがお過ごし… Read More

  • [CSS]画像に美しい角丸とボックスシャドウを適用する方法

    img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ(Safari)のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左:角丸と外側にシャドウ、右:角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。

  • Webサイト制作でよく出てくるコンテンツとそれによく使うディレクトリ・ファイル名の一覧 - btmup Blog

    Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基スタンス。 btmup Blog ディレクトリ名とかファイル名って、ちゃんとしようとすると意外に時間がかかるもの。 ページタイトルを直訳すれば良いってもんでもなく、いくつかある候補から内容に一番合った単語を見付けてこないといけない。 いちいち英語を調べるのもメンドいし、かといって「gaiyo」とかじゃ気持ち悪いし、どうしたもんかねー、とずっと思っていました。 で、今回、勢いでざっくりとまとめてみたのでついでに公開します。 当にざっくりなので抜けもあるだろうし「それくらい書かんでも分かるわボケ」なものもあるでしょうけど、まぁそれは追々。 ディレクトリ名やファイル名として使用することを前提としているので、文法とかは全く考慮してませんので悪しからず。 最近、医療・病院関係のサイトに仕事で関わることが多

    Webサイト制作でよく出てくるコンテンツとそれによく使うディレクトリ・ファイル名の一覧 - btmup Blog
  • ID や Class の命名規則

    デザインがしっかりしていてメジャーかなと思われるサイトの ID や Class の命名規則を調べてみました。 パスカルケース 可読性が高い反面、大文字と小文字を使うのでタイプミスによるバグが出やすくなるかもしれません。 例 : HeaderMenu 2-U : トゥーユー キャメルケース JavaScript などプログラムで良く使用する命名規則なのでプログラマーの方が選ぶ傾向にあるようです。パスカルケースと同様、大文字と小文字を使うのでタイプミスによるバグが出やすくなるかもしれません。 例 : headerMenu 無印良品 スネークケース アンダースコア(アンダーライン)で単語が分かれるので、可読性は高いです。また、小文字しか使用しないのでタイプミスも起こりにくいです。ただし、一部の古いブラウザ(IE4やNN4など)では未対応です。 例 : header_menu ハイフン (-) ハ

    ID や Class の命名規則
  • Actiphy - Actiphy.com | Japan

    私たちの提供する「システム保護ソリューション」は単に製品を販売して終わり、ではありません。もちろん製品の性能、使いやすさ、分かりやすさには自信をもって開発しており、システム保護というソリューションを一部のプロフェッショナルだけの世界から、もっと簡単に安心して使えるよう解放したいと日々努力しています。 そのためには、お客様とより親密に意見を交わし、不明な点、特殊な環境への随時対応など重要課題として取り組んでいます。 お客様の環境や使用シーンに合わせた購入前の技術的な問い合わせ、高度な専門的な内容も網羅するナレッジベース、リソース(技術資料)、すぐに操作できる手助けとなるチュートリアル(操作動画)など、充実したサポートを提供しています。

  • Naga Blog : ちょっとした表示チェックに便利? Windows版「IE」をMac OS Xで動かしてみました。 - Computer

    仕事のWebサイト制作は、自分の場合、Macで作業しています。自分がAppleファンだというのも多分にあるのですが、Windowsで作業してしまうと、世の中の多勢を占める「InternetExplorer」(以下IE)に特化したサイトを作ってしまうからというのもあります。 基的には、サイトの完成まで全てMacで作業するのですが、要所要所でWindows版の「IE」で表示チェックを行います。PowerPC搭載のMacを使っていた時は、別の人が使っているWindowsマシンを借りてチェックしていたのですが、最近は会社で使っているMacを、Intelプロセッサ搭載の「Mac mini」に変更したので、Parallesのエミュレーターソフト「Paralles for Mac 3.0」を使ってWindowsを同時起動させて、その「IE」を使ってチェックしています。(流石に「Boot Camp」を

  • たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

    IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。

  • [使える CSS テクニック] CSS で DL を float して表組みのように表現する | バシャログ。

    使える CSS テクニック第 5 回、「CSS で DL を float して表組みのように表現する」です。 何かと便利な定義リストですが、今回は dt と dd を並列に並べて、テーブルのように表示する方法をご紹介します。 よく使われる定番の方法で、難しいものではないですが、少しだけクセがあります。 ベーシックなテーブル まずは下のような、会社紹介などに使われる汎用的なテーブルです。 基的に dt に float を設定して、dd は dt に乗っかる形になります。 [サンプル] 会社名 株式会社シーブレイン 住所 横浜市中区尾上町 5-77-2 馬車道ウエストビル 8F 電話番号 045-650-6210 [HTML] <dl> <dt>会社名</dt> <dd>株式会社シーブレイン</dd> <dt>住所</dt> <dd>横浜市中区尾上町 5-77-2 馬車道ウエストビル 8F<

    [使える CSS テクニック] CSS で DL を float して表組みのように表現する | バシャログ。
  • 混乱 IE8のCSSハック

    今まで余り使っていなかったけど、次のテンプレートでCSSハックを使おうかと思っています。これはブラウザによって、別々のCSSを指定できるというもの。なるべく使わずにいこうと思っていたんですが、いつもbodyに指定する”font-size:75%;”が気になっていました。 IEではpxなどでフォントのサイズを指定すると、ブラウザの「文字の拡大・縮小」を利用してもサイズが変わりません。そこで%にしているのですが、これはブラウザの初期設定が16pxという前提の指定です。大抵のブラウザは初期値は16pxなんですが、そうでない場合はこちらの意図した大きさで表示されません。 そこでCSSハックを使おうと思ったのですが、今度は別の問題が…。IE6、IE7以外のモダンブラウザを指定するハックは以下の記述なのですが、これにはIE8も含まれます。

  • IE8とIE7はメイリオ、IE6/FFはMS Pゴシック、Mac Safari/FFはヒラギノ角ゴを表示 | A Day in the Life

    IE8とIE7はメイリオ、IE6/FFはMS Pゴシック、Mac Safari/FFはヒラギノ角ゴを表示 June 28, 2009 以前エントリーした記事、IE7はメイリオ、IE6/FFはMS Pゴシ、Mac Safari/FFはヒラギノ角ゴを表示から1年4ヶ月ほど経ちました。ブラウザの最新版はIE8/FF3/Safari4となったのでフォントのセットを少々変更してみました。 IE8ですが、IE6/IE7と同様にフォントをピクセル指定すると文字の大きさを変更することが出来ません(ページズームを使えと言う感じではありますが)。 以前のセットではhtml>bodyハックでモダンブラウザ(Safari/Firefox)用にフォントをピクセルで指定していたのですが、IE8ではこのハックが有効になってしまい、ピクセル指定したCSSが適用されてしまいます。 今回はIE8をのぞいたモダンブラウザに適応

  • とっても使えるoverflowプロパティ。その使い方色々。

    光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ~と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ! これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し!!(わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに

    とっても使えるoverflowプロパティ。その使い方色々。
  • コーディングの仕事をするとき、気を付けてること – ウェビンブログ

    おしらせ: サイトの改装を予定してます。 時間がかかりそうなので、このブログも一時的に見栄えが悪くなるかもしれません。そうなったらすみません。 北海道にもWeb標準が普及したのか、私がMTやWPを扱っているからか、最近は会社を通したコーディング案件を扱うことが多くなりました。 静的なウェブサイトの場合、大抵はコーディングの時点で中に入る文章が確定していますが、私の場合ブログやレンタルカートやCMSがベースなので、通常テキスト部分に何を書きこまれるのか予想がつきません。 この点を踏まえて、どんな感じで気を付けているのかご紹介します。 熟練のコーダーさんには、今更な内容も多いですが…^^; ↓このようなサイトのコーディングをしたとして、以降の話を進めます。 あ、これオリジナルです。クライアントさんの原画使ったら拳で殴られます。 右に画像があるときはwidthかpaddingを明

  • safari4のCSSハック | WEB MEMO:RE

    今まで使ってたsafari3のハックがsafari4では通用しなかった。 下記、safari4でも効くCSSハックです。 body:first-of-type example : body:first-of-type body { back-ground: #333333; margin: 10px }

    fumikope
    fumikope 2009/07/02
    safari4用ハック
  • 逆引きCSSハック(IE8,Firefox,Opera,Safariを含めたブラウザ別CSSハック)

    cat888 live เว็บไซต์ของเราได้รับการรับรองว่าเป็นเว็บพนันที่มีคุณภาพเยี่ยมที่สุดในประเทศไทยสำหรับการพนันออนไลน์ เว็บพนันที่มั่นคงและปลอดภัยที่สุดสำหรับการเดิมพันออนไลน์ที่ทำการเงินอย่างมั่นคงและปลอดภัยและรับรองความเป็นส่วนตัวของคุณในการเล่นเกมพนันที่นี่. ทางเรามุ่งเน้นให้ประสบการณ์การพนันออนไลน์ที่ไม่ซ้ำซากและน่าสนุกที่สุดเลยค่ะ! cat888 หวย เมื่อคุณมีความระมัดระวังในการพนันออนไลน์ คุณจะมั่นใจได้ว่า

  • HR でfloatを解除するときの余白を詰める − ミモザガーデン

    お久しぶりに仕事のことを書きますよ。(^_^) CSSでレイアウトしていると、floatのclearする方法が必須なのですが、a-blog1.xでは、一般向けに解りやすく記述するため、なるべく少なめのCSSで記述されています。 ですが、このままだと、WindowsIE6のバグで、hr のmargin-bottomに20pxの余白が付いてしまいます。 レイアウトにより、余白が入ると非常に困ることもあるでしょうから、余白を詰めるための記述を紹介します。 WindowsIEのhrのmargin-bottom対応サンプルページはこちらです。 <style type="text/css"> <!-- .clearHidden { margin:0 0 0 0; border:none; padding:0; height:0; width:auto; visibility:hidden; clear

  • first-childっぽい効果をネガティブマージンで実現 | Takazudo Clipping*

    first-childっぽい効果を、first-childや、余分なclass付加なしで実現しようという話です。すごい地味Tipsですが・・・。 例えばこんなものを作りたいとします。 リストの間に線が入っているというデザイン。コレを組むときにどうするか。こんな感じでul / li で組むとして、borderを上か下につけようとか思っていた場合、最初か最後についてしまう、余分なボーダーをなんとかせねばならぬ。 <ul> <li>hoge hoge hoge hoge</li> <li>hoge hoge hoge hoge</li> <li>hoge hoge hoge hoge</li> </ul> まず、考えられるのは、liの上にborderをつけ、li:first-childで、最初のリストだけborder-top:none;などを指定して、何とかする方法。しかし、IE6はfirst-

  • [ CSS ] IE6 でリストの背景画像が表示されないよ

    [MultipleIEs](http://tredosoft.com/Multiple_IE) の Internet Explorer 6.0 でリストの背景画像が表示されなくてハマったのでメモ。 ## 問題の状況 とりあえず、問題の起きる状況をまとめてみます。 ### Internet Explorer 6.0 のスナップショット こんな感じでリストマーク ( 背景画像 ) が表示されない。 ### HTML のソース ### CSS のソース #test { position: relative; width: 150px; height: 150px; } #test ul { list-style-type: none; margin: 0; padding: 0; } #test ul li { background: url(list.gif) no-repeat 0 1px;

    [ CSS ] IE6 でリストの背景画像が表示されないよ
    fumikope
    fumikope 2009/01/13
    ハックでIEにheight:1%
  • http://www.webvider.com/ehp/o-index004.html

    fumikope
    fumikope 2008/12/22
    コーディングでよく使う英語
  • line-height の値には単位なしが良いとされる理由

    CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size

    fumikope
    fumikope 2008/12/08
    変に上にpaddingがつくときはline-height: 1