タグ

CSSに関するsobataroのブックマーク (25)

  • DevDocs

    New documentations: Next.js, click

    DevDocs
  • 6 Methods For Vertical Centering With CSS - Vanseo Design

    Centering elements vertically with css is something that often gives designers trouble. There are however a variety of methods for vertical centering and each is fairly easy to use. Today I want to present 6 of those methods. I’ve usually skipped over the topic of vertical centering, since there are some good posts already out there that are easy enough to find, but recently Bikram commented reque

    6 Methods For Vertical Centering With CSS - Vanseo Design
    sobataro
    sobataro 2014/09/04
    veretical-alignとかposition:absoluteとか
  • CSS謝罪文 - jsdo.it - Share JavaScript, HTML5 and CSS

    CSSによるインデックスされない謝罪文 CSS文が書いてあるので、画面上は表示されているがGoogleでのキーワード検索には引っかからない 「流出」などの嫌な単語は:beforeと:afterに「流」「出」を分けて書くことで、自然言語解析を回避 #s { p:first-child { font-weight: bold; font-size: 120%; } p:not(:first-child) { text-indent: 1em; } p:nth-child(1):before{ content: "お 詫"; } p:nth-child(1):after{ content: " び"; } p:nth-child(2):before{ content: "平素は弊社のサービスをご利用いただき、誠にありがとうございます。"; } p:nth-child(3):before{ c

    CSS謝罪文 - jsdo.it - Share JavaScript, HTML5 and CSS
    sobataro
    sobataro 2014/02/03
    “1.CSSに本文が書いてあるので、画面上は表示されているがGoogleでのキーワード検索には引っかからない 2.「流出」などの嫌な単語は:beforeと:afterに「流」「出」を分けて書くことで、自然言語解析を回避”
  • Code smells in CSS | en.ja | Translated Articles for Front End Developers

    sobataro
    sobataro 2013/03/25
  • ブラウザってどうやって動いてるの?(モダンWEBブラウザシーンの裏側)

    どうも、鈴木です。 さて、前回は vim の使用法というじつに低レベルレイヤの出身者的な記事を書きましたが、 今回も懲りずに低レベルのお話しをしたいと思います。 というのも、先日「ブログ書くのめんどくさいよぅ」と駄々をこねていたところ、あまりにレガシーすぎる HTML/CSS/JavaScript 仕様や Flash や Silverlight といったプロプライエタリなリッチコンテンツ用プラグインに日々苦しめられている気弱く善良な一介の WEB プログラマにすぎない我々の希望の星であり、そして同時に新たな巨大クソレガシーの萌芽でもある HTML5 が、いかにイケてないのではなくイケているのであるかを盛んに啓蒙するサイトである HTML5 Rocks (http://www.html5rocks.com/) に、"How Browsers Work" というとても楽しい記事があるのを、我が

  • SASSIENCE ~ 世界が嫉妬するCSSへ

    SASSIENCE ~ 世界が嫉妬するCSS

  • CSSでキュウべえ(FULL)を描いてみた - jsdo.it - Share JavaScript, HTML5 and CSS

    /* * CSSでキュウべえ(FULL)を描いてみた * ※Google Chrome, FireFox, Safari, Operaに対応しています。 */ <div class="qb"> <!-- tail --> <div class="tail"> <div class="parts-1"></div> <div class="parts-2"></div> <div class="parts-3"></div> <div class="parts-4"></div> <div class="parts-5"></div> <div class="parts-6"></div> <div class="parts-7"></div> <div class="parts-8"></div> <div class="parts-9"></div> </div> <!-- ear --

    CSSでキュウべえ(FULL)を描いてみた - jsdo.it - Share JavaScript, HTML5 and CSS
  • 永久保存版!?携帯コーディング、これだけ読めばすぐできる! | KAYAC

    マークアップエンジニア(以下、ME)のtacamyです!(`・ω・´) カヤックでは、デザイナーもHTMLコーディングをしてくれています。 (いつもありがとうございます!) そんなワケで、格的にHTMLコーディングはしないけど、 ちょこっとしたページなら組みますっていうデザイナー向けの、 「コレだけ読めばすぐできる」シリーズを始めました。 第一回は「携帯コーディング」についてです。 携帯はPCとは全くの別物なので、なんとなく敬遠しがちですが、 最低限の内容であれば覚えることも少ないですし、 一度覚えてしまえばスタンダードがしばらく変わらないので、覚えておいて損はないですよ! 携帯コーディングの基 基礎の基礎 文字コードはShift-JIS CSSはインラインで指定(タグに直接style属性を追加する) 画像を含むページ容量100KB以内(HTML自体の容量は9KB以内) 画像はgifか

  • CurvyCorners - Beautiful rounded corners for your HTML boxes

    探偵のバイトのきっかけは単純なもの。 たんなるアルバイトのつもりだった。 名古屋でアルバイトできるのは嬉しいことだけれど。 それが探偵事務所とは、思いもよらない。 名古屋は良いけれど、探偵事務所って、、、 そのころ、資格をとるための勉強を頑張って、 試験を受けたけれど、学科は通り、 実技を落ちてしまったわたしは、就職する気分になれなかった。 受験して3週間ほどで結果が届き、すぐさま再試験の申し込みはしたけれど、、、 ちょうど、3ヶ月。友達と一緒に名古屋の学校へ通う。 その間は、両親も快く協力してくれたのだが、さすがに試験に落っこちてしまうと、態度が冷たく急変した。 で、アルバイトを探すことにしたのだ。 1日中、いつ機嫌の悪くなるともしれない母親と顔を突き合わせるよりは、 少しでも稼ぐくらいの方がマシだと判断したから。 まだ、名古屋の学校の再試験も控えているし、そこまで一生懸命に仕事はしたく

  • 読みやすい日本語のSafariにしておく - ザリガニが見ていた...。

    些細なことなのだが、前々から気になっていたことがある。この日記をSafariで見たとき、以下のように表示されることがある。 ホームベーカリー観察日記 - ザリガニが見ていた...。 気になるのは→の部分。句読点や小さな「っ」が行頭に表示されてしまっている。普段何気なく読んでいるや雑誌では、決してこのような表示になることはないはず。紙媒体では、当たり前のルールとして、さり気なく、でも徹底されている禁則処理。なのに、日語のWebページをSafariで見ると「あれれ?」な表示になってしまうことがよくある。 ちなみに、Firefoxでは禁則処理が正常に働いて、以下のような表示になった。 ホームベーカリー観察日記 - ザリガニが見ていた...。 しかし、Google Chromeでは、Safariと同様に句読点や小さな「っ」が行頭に表示されてしまっている。 WebKit系ブラウザの問題なのだろう

    読みやすい日本語のSafariにしておく - ザリガニが見ていた...。
    sobataro
    sobataro 2010/06/29
    禁則処理やらなんやら
  • より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net

    cssやプログラミングマークアップをより早く Web制作を少しでも効率化しよう と思って(今更)いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 Web制作を少しでも効率化しよう と思って(今更)いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding(家)HTMLコーディングが3倍速くなる?「Zen-Coding」秀丸Zen- Codingマクロコーディングの効率化を図

    より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
  • もう、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

    もう、class名やid名で悩まないんだからっ!!|CSS HappyLife
  • http://blog.alice-books.com/tmp/zero.html

    ルイズ!ルイズ!ルイズ!ルイズぅぅうううわぁああああああああああああああああああああああん!!! あぁああああ…ああ…あっあっー!あぁああああああ!!!ルイズルイズルイズぅううぁわぁああああ!!! あぁクンカクンカ!クンカクンカ!スーハース ーハー!スーハースーハー!いい匂いだなぁ…くんくん んはぁっ!ルイズ・フランソワーズたんの桃色ブロンドの髪をクンカクンカしたいお!クンカクンカ!あぁあ!! 間違えた!モフモフしたいお!モフモフ!モフモフ!髪髪モフモフ!カリカリモフモフ…きゅ んきゅんきゅい!! ルイズ!ルイズ!ルイズ!ルイズぅぅうううわぁああああああああああああああああああああああん!!! あぁああああ…ああ…あっあっー!あぁああああああ!!!ルイズルイズルイズぅううぁわぁああああ!!! あぁクンカクンカ!クン

  • 知らない人は損してる?コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ

    最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか? Zen-CodingはHTML/CSSをショートカット+スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか?という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio

  • CSSの書式 - HTML/XHTMLで使うCSS入門

    CSS の書式について解説します。スタイルを設定するためのセレクタを指定してプロパティと値を設定する方法や、様々なセレクタの指定方法について解説します。 (2022 年 02 月 19 日公開 / 2022 年 02 月 19 日更新) 基書式 セレクタのグループ化 タイプセレクタ 子孫セレクタ 子供セレクタ 隣接兄弟セレクタ クラスセレクタ IDセレクタ 属性セレクタ ユニバーサルセレクタ

    CSSの書式 - HTML/XHTMLで使うCSS入門
  • 効果的なコーディングのための強力CSSテクニック集『Powerful CSS-Techniques For Effective Coding』 – creamu

    DiaryTechnology 効果的なコーディングのための強力CSSテクニック集『Powerful CSS-Techniques For Effective Coding』 かっこいいインターフェースをCSSで実現したい。 そんなあなたにおすすめなのが、『Powerful CSS-Techniques For Effective Coding』。Smashing Magazineによる、効果的なコーディングのための強力CSSテクニック集だ。 以下にいくつかご紹介。 » Triadic Background Setting with CSS Silverbackのサイト。シンプルなCSSで3枚の背景画像を重ねて3D効果を出している。ドキュメントはないがソースコードを見るだけでとても刺激的 » Creative Use of PNG Transparency in Web Design We

  • 【HTMLタグの簡単検索】TAG index - ホームページ作成情報

    リファレンスについて HTML リファレンス HTML Living Standardに対応したリファレンスです。 HTMLタグ リファレンス HTML4の時代に作成したリファレンスです。古いWebページを更新する際などに参考にしてください。 CSS リファレンス CSS2の時代に作成したリファレンスです。

    【HTMLタグの簡単検索】TAG index - ホームページ作成情報
  • CSS Spriteを活用しよう - DesignWalker

    CSS Spriteを活用しよう - DesignWalker
  • 猫式HTML研究室

    HTML研究室 Need to install Japanese fonts to read this site. ハイパーテキストマーク付けガイド 一から始めるHTML HTML要素一覧 ブロック要素・インライン要素 CSSのセレクタ 好ましいWebデザインのための指針 脱出・ホームページ初心者 マーク付けレベル診断 これは避けたいテクニック Webの常識/非常識 Web日記 式Webメモ 式Webメモ Archives 情報 サイトマップ 当サイトについて 連絡先 自己紹介 更新履歴 関連リンク集 最終更新:2003年12月1日 無重力:m_juryoku@yahoo.co.jp SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送

  • 言葉 言葉 言葉

    言葉 言葉 言葉 このサイトの概略 日人論と國字問題を扱ふ正字正かなサイト。 このサイトの全貌 このウェブサイトの主なコンテンツ サイトの内容・インデックス 國語、日語、言葉 國語國字問題解説 國語史、國文法、言語學に關する情報と、戰後の國字改革に關するレポート。 言葉を疑へ 言葉の誤用について。 國語國字問題を考へる爲の文獻資料 國語政策の問題を考へる際、參考になるの紹介。 國語の歴史語の發展や國語政策の變遷について。 國字改良論者と表音主義の分析 カナモジ論者・ローマ字論者の主張を紹介し、その問題點を批判。 正字正かなIMEプロジェクト PCで正字正かなを使ひたい人の爲に、IME用正字正かな辭書と文書變換スクリプト用データを公開。(古いものです)