タグ

cssに関するsakaki0214のブックマーク (38)

  • HTML Imagemap Generator

    矩形、または、円を描く場合は、ツールを選択後に画像上でドラッグしてください。作成済みのシェイプをクリックするとサイズや位置の調整ができます。 多角形を描く場合は、ツールを選択後に画像上でクリックしてください。2つめの頂点が確定すると、マウス移動時に対象エリアを確認できるようになります。 escape キーで多角形の作成モードを終了します。作成済みのシェイプをクリックすると位置の調整ができます。

  • WebKit系ブラウザ(Chrome/Safari)で両端揃えはできないの?jQueryで検証してみた | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    WebKit系ブラウザ(Chrome/Safari)で両端揃えはできないの?jQueryで検証してみた こんにちは。カートン買いでライターが溜まっているライターの内藤です。 先日、とある案件で「pタグの部分、両端揃えした方がきれいに見えない?」という話が出て、FirefoxとIE10は問題なかったのですが、WebKit系(ChromeとSafari)が対応していないことに今更気づき、何とかできないものかと思ったのがこの記事の経緯です。 具体的には、 text-align: justify; text-justify: inter-ideograph;(IE用) がWebKit系だと綺麗に見えないぜ!ということです。 目次 ブラウザによる両端揃えの見え方の違い 参考になったjQueryコード slabTextとFitText WP slabText 試してみた 研究してみた 自作の幅調整jQ

    WebKit系ブラウザ(Chrome/Safari)で両端揃えはできないの?jQueryで検証してみた | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • CSSだけで<select>をカスタマイズする - Qiita

    Form系要素スタイルの初期化 ブラウザのForm系要素の初期スタイルをはがすときには、appearance: noneをあてつつ、backgroundやborderなどのリセットをする。 select { -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; border: 0; margin: 0; padding: 0; background: none transparent; vertical-align: middle; font-size: inherit; color: inherit; box-sizing: content-box; } しかし<select>だと、WebKit系のを除けば、-moz-apperanceとしているFirefoxでさえも、選択

    CSSだけで<select>をカスタマイズする - Qiita
  • gruntで快適JS/CSSビルド生活

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ※ この記事はgrunt version 0.2.x のもので、grunt 0.3 からはAPIが変更されています grunt というJS/CSSのビルドツールが便利だったので紹介します。(Mac/Linux) cowboy/grunt - GitHubこのgruntってのは、JS,CSSを全部まとめて繋げる、まとめてJS lintする、minifyする見たいのをタスクとして登録しておくと、それ実行すればちゃちゃっとやってくれちゃうやつです。さらにwatchっていう機能使えば、ファイルが更新されたらそのタスクをやってくれるみたいなのも。 似たモノで、MakeとかRakeとかCakeとかそういう

    gruntで快適JS/CSSビルド生活
  • レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net

    いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法 それぞれをコードで表すなら以下の書き方が該当します。 方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">

    レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net
  • 0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-

    私の周りでwebデザインが出来る人ってあんまりいません。でも「webデザインってどうやるのー?」とか「私もやってみたいんだけど…」とかの声はよく聞きます。皆興味はあるのに”webデザインは難しい”と思って始められないんじゃないでしょうか。そんなこれからwebデザインを始めたいビギナーさんに向けてHTMLの基・基礎をまとめてみます。真新しいことは特にないほんとに基礎です〜>< by:fweez まずはじめに とりあえず用意するもの2つ HTMLの基 HTMLとは? 1.DOCTYPEの宣言 2.基的なタグ 3.<body>の文書構造 CSSの基 CSSとは? 1.CSSの読み込み方法 2.指定パターン 3.marginとpaddingの違い 4.ブロック要素とインライン要素 応用してwebページを作ってみる まずはじめに 一口にwebデザインといっても色々なことがあると思うのですが大

  • hamashun me : Windows PC に Ruby と Sass を導入する方法

    Sugamo.cssでちょっと前に話題になったのが、CSSのメタ言語(って言い方でいいのかな)であるSassです。 Sassを使うと、CSSをクールに記述する事ができます。 Sass自体についての解説はググると詳しいものがいくつかあります。 この記事では、Windows PC(XPとVistaで試しました)にSassを導入する手順を紹介します。 Rubyのインストール SassはRubyで動いているので、まずはRubyをインストールします。 RubyInstaller for Windows を使えば、何度かクリックするだけで完了します。 インストールが終了したらコマンドプロンプトを起動して、次のコマンドを入力してエンターをッターンと叩いてください。 ruby -v ruby 1.9 1p430(2010-08-16 revision 28998) みたいのが出たらgemのアップデートに進

  • 2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About

    CSSハックを使わずIEのバグに対処する方法(2ページ目)特定のブラウザに限定してスタイルを適用する方法として、ブラウザのバグを利用した「CSS Hack(ハック)」がよく使われています。IEでのみ表示がおかしくなる場合の対策なども紹介。

    2/3 CSSハックを使わずIEのバグに対処する方法 [ホームページ作成] All About
    sakaki0214
    sakaki0214 2011/04/07
    条件分岐
  • 最近はword-breakするのにJSは使わないほうがいいみたい - Webtech Walker

    Twitter / tacamy: { word-wrap: break-word; } ... ということなのでJSを使わずにCSSだけでやれるみたいです。しかもこれだけ。 .word_wrap { word-wrap: break-word; } IE6、7、8、Firefox3.6、Safari4、Chrome、Opera10.52で確認しましたけどこれだけで全部いけます。ブラボー。 <div class="word_wrap">http://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%8D%E3%83%83%E3%83%88%E3%82%B3%E3%83%9F%E3%83%A5%E3%83%8B%E3%83%86%E3%82%A3</div> <div class="word_wrap">aaaa

    最近はword-breakするのにJSは使わないほうがいいみたい - Webtech Walker
    sakaki0214
    sakaki0214 2010/05/21
    本当にありがとうございます!!このエントリーなかったら死んでた!
  • duree dpe

    Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe logement tous les cas à par

  • 2010年のWeb標準 | gihyo.jp

    あけましておめでとうございます。株式会社ミツエーリンクスの渡邊卓です。昨年の年初、弊社木達による「2009年のWeb標準」をお読みになった方は、執筆者の変更に「おや?」と思われるかもしれません。今年は縁あって私が執筆を担当させていただくことになりました。 2010年も、昨年と同様にWebコンテンツのフロントエンド実装に関連した標準とその周辺の動向について、短期的な予測を書かせていただきます。引き続きよろしくお願いいたします。 さて、2010年のWeb標準については「ECMAScript 5とJavaScriptエンジン」「⁠HTML5と周辺仕様」「⁠CSS 2.1・CSS3 モジュールとWebブラウザアップデート」「⁠JIS X 8341-3改訂とW3C DOM」をキーワードとして取りあげます。 ECMAScript 5とJavaScriptエンジン 去る2009年12月3日、JavaSc

    2010年のWeb標準 | gihyo.jp
  • とっても使えるoverflowプロパティ。その使い方色々。

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

    とっても使えるoverflowプロパティ。その使い方色々。
    sakaki0214
    sakaki0214 2009/11/02
    overflowって普段そこまで使ってなかったーこんなに優秀な子だったとは。
  • 第4回 CSSの「いま」を知る | gihyo.jp

    前回はHTMLやXHTMLHTML5について、その歴史などを振り返りました。今回はCSSのいまをみみていきます。CSS 2.1やCSS3の策定が開始してから数年経ちますが、現在はいったいどのような状況にあるのでしょうか。 CSS1やCSS 2.0は古いもの 2009年10月現在、勧告されているCSS仕様は次の2つです。 CSS Level 1 CSS Level 2 (CSS 2.0) しかし、これらはCSS WGにより「古いもの」とされています。理由としては、仕様書に不備があるにも関わらずメンテナンスされていないこと、実装とのい違いが無視できないほどに多くなったことが挙げられています。 特に後者は、私達Web制作者にとって問題でしょう。仕様書に則ってスタイルシートを書いたのに、意図しない表示にならないといったことが起こりかねないからです。 実質的な標準はCSS 2.1 現在はCSS1

    第4回 CSSの「いま」を知る | gihyo.jp
  • CSS Backgrounds and Borders Module Level 3 (W3C Working Draft 15 October 2009)

    W3C Working Draft 15 October 2009 This version: http://www.w3.org/TR/2009/WD-css3-background-20091015 Latest version: http://www.w3.org/TR/css3-background Previous versions: http://www.w3.org/TR/2008/WD-css3-background-20080910 Editors: Bert Bos (W3C) Elika J. Etemad (Invited Expert) Brad Kemper (Invited Expert) Copyright © 2009 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademar

  • IE8正式版のみ適用するCSSハック│Web制作の現場から 〜入院、退院、そしてつまはじき〜

    IE8の正式版がとうとうリリースされました。IE7もまだ普及してないのに何をしているんだろうという声も多数ありますがMSさんもあせってるんでしょうか。どうもこんにちは。 新しいブラウザがリリースされると問題になるのが、CSSハックの問題です。IE8がベータ版のときにいろいろと見つけられましたが、正式版では軒並み使えなくなってます(IE8だけ適用、というものが適用しなくなっている)。 そこでIE8のみに適用するCSSハックを考えました。 サンプルページ(成功していたら、IE8だけ字が青くなっているはずです)

  • 逆引きCSSハック(IE8,Firefox,Opera,Safariを含めたブラウザ別CSSハック)

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

  • 2009年2月第4週号 1位は、CSSでの縦方向のセンタリング/気になるネタは、アップル、Safari 4を発表 | gihyo.jp

    週刊Webテク通信 2009年2月第4週号1位は、CSSでの縦方向のセンタリング/気になるネタは、アップル、Safari 4を発表 ネットで見かけたWebテク(Webテクニック・Webテクノロジー)記事から、Webデザイナーの目で厳選したネタを週刊で紹介するこのコーナー。今回は、2009年2月23日~3月1日の間に見つけた記事のベスト5です。 1. In the Woods - Vertical Centering With CSShttp://blog.themeforest.net/tutorials/vertical-centering-with-css/ CSSでは意外とむずかしい縦方向のセンタリングを実現する方法を5パターン紹介しています。 「display:table」を使う方法 絶対配置で要素の半分の高さをマイナスのマージンにする方法 高さの50%から「要素の半分の高さ」を引

    2009年2月第4週号 1位は、CSSでの縦方向のセンタリング/気になるネタは、アップル、Safari 4を発表 | gihyo.jp
  • Internet Explorer (Windows) CSSバグリスト

    ここにはWindows版Internet Explorer4.0以降(WinIE)のCSS/DOM実装バグの一覧があります。以下のリストからそれぞれのバグの詳細を見ることができます。 WinIEのCSS実装 WinIE6.0以降に「DOCTYPEスイッチ」が実装されています。DOCTYPE宣言により、W3Cが策定したCSS仕様に従う「標準モード」か、過去のUAに実装されていたCSS仕様に従う「互換モード」で解析・描画が行われます。 DOCTYPE宣言なし: 互換モード HTML3.2以前: 互換モード HTML4 Transtional/Frameset(システム識別子なし): 互換モード HTML4 Transtional/Frameset(システム識別子あり): 標準モード HTML4 Strict: 標準モード XHTML(XML宣言なし): 標準モード XHTML(XML宣言あり)

  • 各種言語に対応したソース整形ソフトウェア·UniversalIndentGUI MOONGIFT

    インデントがあまり深いソースコードは何ともしがたいが、同時にワンライナーにこだわり過ぎるのも問題だ。そのため、多人数で行うプロジェクトや、オープンソース・ソフトウェアのプロジェクトではソースコードのフォーマットが定義されている場合が多い。 うーん、これは読みづらい。問題があっても分かりづらそうだ。 だが慣れるまではインデントの数や改行の入れ方などで間違えてしまうことが多いかもしれない。そうした時に便利なのがソースコードを整形してくれるソフトウェアだ。Webであればサーバサイドのプログラミング言語の他にもCSSHTMLJavaScriptなど多数の技術が関わってくる。そのような時にはUniversalIndentGUIが便利だ。 今回紹介するオープンソース・ソフトウェアはUniversalIndentGUI、多数の言語に対応したソースコードフォーマッターだ。 UniversalInden

    各種言語に対応したソース整形ソフトウェア·UniversalIndentGUI MOONGIFT
    sakaki0214
    sakaki0214 2009/02/19
    コード整形
  • http://devsnippets.com/reviews/css-code-snippets-15-wicked-tricks.html

    sakaki0214
    sakaki0214 2009/02/02
    小技いっぱい。