CSSでレイアウトするなら絶対覚えておきたい配置のルール：フロートや絶対配置、z-index とかいろいろ
最近改めて CSS の基本、要素の配置、レイアウトについて学習しました。過去に CSS でのレイアウトなどの記事を書いた事があるんですけど、改めて勉強してみたら、いろいろ間違えて解釈していたなー ... っていうか、基本が分かってなかったんだなーと反省 ...。今回は CSS の基本中の基本、視覚整形モデルについてまとめてみました。 Webデザインをする上で、必須とも言えるのが CSS …。このブログ – Webデザインレシピでも、過去に CSS について書いた記事がいくつかあります。最近 … でもないけど、以下のふたつは CSS でのレイアウトについて、いろいろと書いた記事でした。 CSSでレイアウトするなら絶対覚えておきたいブロックレベル要素のクセとかいろいろ – 2011年 6月17日 CSS：初心者の頃にハマったスタイルシートのあれこれ … IE7多め -2011年 4月21日 で
ウェブデザインが苦手なプログラマーたちへ「XHTML+CSSデザイン 基本原則、これだけ。」 - elm200 のノマドで行こう！
私はウェブデザインができないプログラマーである。以前はデザインはデザイナーさんに任せておけば良いと思っていた。だが、考えてみると、われわれは、デザインされたものしか目にすることはできないのだ。どんなに優れたアルゴリズムをプログラマーが実装しても、残念ながら私たちの目には見えない（反応速度で体感できることはあるにしても）。人もウェブサイトも見た目が９割なのである。 最近、私は「書評人」というウェブサービスを始めた。当然、私にデザイナーを雇う余裕などない。自分でデザインを制作する必要に迫られた。さて困ったどうするか。 私は、ある人気ウェブサービスを運営する友人に尋ねてみた。彼は、昔、一緒に仕事をしたことがあるプログラマーだ。特にデザインを専門的に勉強したことはないはずなのに、彼が作るサイトはどこかあかぬけている。彼に根掘り葉掘り尋ねるうちに、勧めてくれた本がこれ。 XHTML&CSSデザイン
娘娘飯店を見て育ちました
neotag @neotag 日本の秩序あるWWWのためには、親分がNEETたりえるだけの寄付金が必要。ホワイトバンドでも売ろうかしら。 2011-02-08 23:13:16
フォントが変わるとアイコンがずれる問題の対策 | ウェビンブログ | 札幌のWebデザイナー・カスタマイズアドバイザー WebbingStudioのよしなし語り
要素の先頭にアイコンを表示するときには、CSSの「padding」と「background-position」を使うのが一般的です。 a.pdf { padding-left: 24px; background: url(../images/parts/pdf_ico.gif) no-repeat 0 0; } ですが、対象がテキストリンクなどのインライン要素で、かつアイコンの大きさがフォントサイズギリギリだった場合 「フォントが『メイリオ』や『ヒラギノ角ゴ』だとちゃんと表示されるのに、『MS Pゴシック』だとアイコンの下が欠ける」 という現象が起きてしまいます。 これはWindowsのMS Pゴシックとそれ以外でテキストの開始位置が異なっているために起こる現象らしく、ブラウザ別のCSSハックでは回避できません。 また、最新OSのWindows7でも、ブラウザのデフォルトフォントは「MS
Firebugの使い方2 THE HAM MEDIA
以前に『意外と知られていない機能が多い！？Firebugの使い方』というエントリーを書いたところ、気づけばビックリなブクマ数がついたりする。 Firebugってかなりのコーダー（デザイナー）とか、Webに関わる人の多くはいれているアドオンのハズ(未調査なので自分の気持です)だけど、SaCSS参加者では使っていないって人が意外にもいたので書いたエントリーでした。そのブクマしている人の数やコメントをみると、やっぱりみんながみんな、使い切れているものでないですよね。 ということで、前回は紹介しきれなかったけど、こんな使い方してるよ～という自分の使い方を紹介します！ 不必要な要素は消してしまおう 前回のおさらいっぽい部分から。 いろいろなサイトをみてまわっていると、時々、「これ邪魔だな」とか思う要素がポッとでてきたりってしませんか？大きいモニタの時はそんなこと特に思わないのですが、小さいモニタを使
Zudolab -
The Search for a Trusted 메이저사이트: A World of Thrills, Security, and Immersive GamingdErsPOId - December 1, 2023In the dynamic world of online entertainment, the quest for finding a trustworthy 메이저사이트, or major site, is akin to navigating through a labyrinthine digital jungle. Much like the adventurers of old scouring for hidden treasures, modern-day netizens are on the lookout for that one platform
RedLine Magazine : CSS セレクタ総復習 （2010年5月版）
CSS セレクタ総復習 （2010年5月版） CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。本来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。 Selectors Level 3 http://www.w3.org/TR/css3-selectors/ 選択子 http://zng.info/specs/css3-selectors.html (日本語訳) ※下記内容で、サンプルページを用意したセレクタもあるんですが、当然、各セレクタに対応しているブラウザとそうでないブラウザがあります。対応していないブラウザでサンプルページを見ても再現できません。 目次 * (汎用選択子) E (型選択子) E[foo] (属性選択子) E[foo="bar"] (属性選択子) E[foo~="bar"] (属性選択子
RedLine Magazine : ブラウザ(Win) CSSセレクタ対応状況まとめ （2010年5月14日版）
最近のコメント PHP オブジェクト指向の勉強 └ Red - 2010.01.08 └ hogepage - 2010.01.21 └ Red - 2010.01.22 └ - 2011.11.27 └ houseiii - 2011.11.27 Fireworks トリミング画像を一括書出 CS4編 └ Iper - 2009.06.27 └ Red - 2009.06.27 └ mala - 2011.11.17 └ Red - 2011.11.18 jQueryでボックスを上下左右中央に簡単配置 └ ミラクル - 2009.03.15 └ Red - 2009.03.15 └ entZ - 2011.10.22 └ Red - 2011.10.24 overflow を使用したボックス背景のこと └ - 2007.12.13 └ Red - 2007.12.13 └ - 2007.
zen-codingでhtml,cssのコーディングスピードが3倍以上になる - chulip.org
zen-codingはHTML and CSS hi-speed codingと謳っているように飛躍的にhtml,cssのコーディングスピードを上げてくれます。 zen-coding - Project Hosting on Google Code 公式でVimには対応していなかったのだけどvimscriptでmattnさんが作っていました。神 zen-coding for vim を pure vimscript だけで書いてみた。 使用方法 スニペットコマンドを入力したあとにexpandabbr_keyをタイプします。 ※デフォルトだと, スニペットコマンド一覧 HTML http://code.google.com/p/zen-coding/wiki/ZenHTMLElementsEn CSS http://code.google.com/p/zen-coding/wiki/ZenC
Google Slides: Sign-in
Not your computer? Use a private browsing window to sign in. Learn more
Webサイトの高速化的な話をWD誌で | gaspanik weblog
先日エイプリルフールにあげた冗談エントリーのお詫びとして、Webサイトの高速化というかパフォーマンスアップのネタをこのブログに書こうと画策していたのですが、実は本日18日にそれらの内容をまとめた特集を含む「Web Designing vol. 102」がマイコミさんから発売されてしまいました…。（いや、書いたのボクですけど 笑）。 “Web Designing vol. 102″ on Flickr Originally uploaded by [cipher]. とまぁ、出ちゃったからにはしょうがないので、本誌に掲載された内容のフォローとか締切以降に変わった話なんかをピックアップしてみたいと思います。ちなみに今回のこの記事、Livedoorの浜俊太朗さんと二人で書いてます。 高速化のキモは違う視点でサイトを見直すことWebサイトの評価というのは、見る人によって変わってきます。やれ、デザイ
隠しテキストは Google のウェブマスター向けガイドライン違反です
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
「XHTML&CSS超高速コーディング術」の出版記念セミナーに行ってきた | ウェビンブログ | 札幌のWEBデザイナー・カスタマイズアドバイザー WebbingStudioのよしなし語り
新しい技術を得ることも大切ですが、今の作業、ブラッシュアップできてますか？ iPhoneアプリ「HTML/XHTMLタグ辞典」が人気の、大藤幹先生の新刊「XHTML&CSS超高速コーディング術」の出版記念セミナーが、アップルストア札幌で開かれました。 今回は「コーディング＝カンプを元にHTMLとCSSを作成する業務」を専門に扱う制作会社「牧野工房」の大杉さんとの共著となっていて、短時間で正確、かつ美しいコーディングを行うための、牧野工房の実践的なノウハウが紹介されています。 コーディング専門の牧野工房 スキルパートナーズ株式会社 本のPRになると思うのでNDAに反しない範囲で書きますと、私はこの牧野工房さんとお仕事をさせていただいたことがあります。 その際にワークフローの一部を拝見することになったのですが、とにかく驚いたのが、共著・大杉さんのコーディング技術と、徹底した作業工程の管理体制
960 Grid System
960 Grid System Download - CSS, sketch paper, and templates for: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, QuarkXPress, Visio, Exp Design. Repository at GitHub. Essence The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns,
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
RedLine Magazine : CSS 画像の一部を使う3つの方法
CSS 画像の一部を使う3つの方法 こちらの記事でCSSを利用して画像の一部分だけを表示させる3つのテクニックが載ってました。タイムリーに実務で使うかも！とか思ったのでメモがてらにエントリ。 3 Easy and Fast CSS Techniques for Faux Image Cropping | Css Globe ちなみに上記エントリでは、これらの方法を「Faux Image Cropping」って呼んでます。私の拙い英語力ではCropって「作物」としか記憶してなくて一瞬何のこっちゃと思ったんですが、辞書引いてみると「刈る」とかいう意味もあるんですね。なるほどなるほど。 ネガティブマージンを利用する方法 まず１つ目はネガティブマージンを利用する方法。 必要条件 親要素に「overflow:hidden;」を指定 一部分を利用する画像に対してのネガティブマージンの指定 >>ネガティ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS3】しましまテーブルを簡単につくるnth-child - もんじゃのひみつきち
IDEA * IDEA
HTML+CSS templating%26utm_content%3DGoogle%2520Reader)
css-lecture.com