[CSS]iPadの横向きと縦向きでレイアウトを変更するスタイルシート
Portraitモード（縦向き）のグリッド設計 グリッド 768=30+708+30 708=216+30+216+30+216 実装のポイント iPadの横向きと縦向きでレイアウトを変更するには2つのポイントがあります。 METAタグ iPadのスクリーンで等倍に表示されるように、METAタグで設定します。 <meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" /> スタイルシート 比率を等倍に設定したので、Media Queriesを使用して横向きと縦向きに分岐させます。 /* Landscapeモード（横向き）用 */ #wrap { width:1024px; } @media only screen and (orientation:portrait){ /* Portr
[CSS]スマフォ対応サイトのためにMedia Queriesをしっかり身につけるチュートリアル
iPhoneなどの小さいサイズのモニターをはじめ、2560pxの大きいサイズのモニターなど、それぞれの幅に適したレイアウトを自動的に適用するMedia Queriesをしっかりと身につけるためのスタイルシートのチュートリアルを紹介します。 Adaptive & Mobile Design with CSS3 Media Queries [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページの確認 HTML CSS Media Queries 完成したデモの確認 デモページの確認 チュートリアルの前にまず、それがどのように見えるかデモページをチェックしてみてください。 このデモページはHTML5+CSS3 Media Queriesで作成されており、ユーザーが使用しているビューポートのサイズに適したレイアウトに自動調整して表示されます。 デモページ 左から、ノーマル、ナロウ、ス
画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！ 今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
CSS で table に斜線を引く方法
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。 斜線（border）を適用する要素の前に を設定。 がなかったり、要素の後方に があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t
包容要素にoverflow:hidden;を使う際の注意点メモ - Rewish
高さの異なるカラムを揃えるスタイルシートで包容要素にoverflow:hidden;を指定する際、その中身に対してページ内リンクを使うと移動された部分より上が非表示になります。 問題のサンプル HTMLサンプルコード <div class="example-wrap"> <div class="example-main"> <div id="example-section1"></div> <div id="example-section2"></div> </div> <div class="example-navi"> <p><a href="#example-section2">第二セクションへ移動</a></p> </div> </div> .example-wrap { width: 500px; overflow: hidden; } .example-main { float
HTMLとCSSしか書かなかったコーダーは今なにしてる？ - Hato-Style
2009年09月13日 （日） Web雑談 風邪ひいた。頭が痛くて熱が下がらない...しかし悶々として眠れない。いろいろと他にの人に迷惑かけちゃったり、マジごめんなさい。ちょっと寝付けなくなっちゃったので、横になりながら頭の中で思ってたことをiPhoneでメモ書き。 マークアップエンジニアはどこへ向かうべきか（を考えてたらカッとなって LL の資料公開） - IT戦記 HTMLは道具 3ping.org マークアップエンジニア云々に関して書いてみる | Blog hamashun.com プログラミング知らないHTMLコーダーがダメな理由 はてな匿名ダイアリー HTMLコーダーやWebデザイナーをバカにしているプログラマーは全員腹切って死ね - kwatchの日記 (X)HTML + CSS しか出来ない人はそれなりに危機感を感じたほうがいいと思った今日の昼ご飯でした。 マークアップエンジ
高木浩光＠自宅の日記 - 楽天ad4Uの隠しリンクを露出させるユーザスタイルシート
■ 楽天ad4Uの隠しリンクを露出させるユーザスタイルシート 脆弱性を突いてブラウザの閲覧履歴を調べるという禁じ手に手を出した、掟破りの（自称「次世代」）行動ターゲティング広告「楽天ad4U」について、amachangの「IEのinnerHTMLやappendChildで要素が挿入された瞬間を取得する方法」を参考に、その隠しリンクを露出させるユーザスタイルシートを作ってみた。（Internet Explorer用。） #ad4u_list { display: expression(function() { if (!this.__mark) { this.__mark = true; // alert(this.innerHTML); var o = '<div style="overflow:scroll; border:dashed 4px red;">'; o = o + this
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
WEB開発者の為のチートシート「40+ Essential Front End Web Developer Cheat Sheets」
TOP > WebDesign > WEB開発者の為のチートシート「40+ Essential Front End Web Developer Cheat Sheets」 WEBの制作、開発に必要な知識は多岐にわたり、毎回使うものは大体覚えていたりしますが、その都度ちょっとしたところを調べて制作していると言う事をされている方も多いのではないでしょうか？今日紹介するのはそんな人に便利なWEB制作者、開発者のために作られたチートシートをまとめたエントリー「40+ Essential Front End Web Developer Cheat Sheets」です。 Gosquared CSS help sheets 全部で40ものチートシートが公開されていますが、今回はその中から気になったものをいくつか公開したいと思います。 詳しくは以下 ■XHTML 1.1 Cheat Sheet X
RedLine Magazine : 印刷用CSSのお話
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
高速なJavaScript CSSセレクトエンジン·Sizzle MOONGIFT
Prototype.jsやjQueryなどのJavaScriptフレームワークではHTMLのクラス名やIDなどを指定して要素を取得できるようになっている。とは言え、簡単な要素の取得のためにフレームワーク全体を読み込むというのはちょっと面倒だ。 次世代版のCSSセレクタエンジン そこでもっと手軽に使えるCSSセレクタとしてSizzleを紹介しよう。jQuery開発者の方が開発している次世代版のCSSセレクタエンジンだ。 今回紹介するオープンソース・ソフトウェアはSizzle、高速＆多機能なCSSセレクタエンジンだ。 SizzleではCSS3のサポート、not指定による要素の除外指定、ポジション（最初、最後、偶数、奇数など）指定など多彩な機能が実装されている。単体で用いることもでき、わずか4KBという軽量さだ（難読化+GZip圧縮した場合だが）。 Firefox3 for Mac OSXの場合
WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル:phpspot開発日誌
WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル 2009年04月15日- PHP Tutorials Examples Embedding PHP In CSS WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル。 CSSファイルをPHPとして実行して共通の値を変数にして使うというチュートリアルが公開されています。 PHPは知ってるという方には当たり前すぎるかもしれないですが、WEBデザイナーの方が最初に入門するにはよいかも。 ステップ1 AddType application/x-httpd-php .css .htaccess等に、AddTypeを追記して、.cssファイルがphpとしてサーバ側で処理されるように指定 ステップ2 <link rel="stylesheet" href="style.php" media="
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes - Nettuts これは驚き！CSSだけで作れる吹き出しボックス。 次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。 HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> blockquote {
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集:phpspot開発日誌
WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集 2009年03月23日- WEBデザイナーという肩書きを使う場合にあったらいいかもなスキルとWEBで見れる無料教材とリソース集。 プログラマが１ヶ月でWEBデザイナーに転身する方法 というエントリを見て、プログラマの方々のWEBデザインに関する関心の高さを見て書いてみます。 WEBデザイナーといっても色々な知識が必要で、かつ、最近はフリーのテンプレートも豊富にある中、どれだけ出来ればWEBデザイナーとして成り立つのだろう？という疑問がありましたので考えてみました。プログラマの方で、WEBデザインをやってみたい。また、全くの素人だけどWEBデザイナーを仕事にされたいという方の参考になれば幸いです。 最低限の知識編 1. HTMLとレイアウト力 まず、知っている人には物凄く当たり前の事ですが、
IE6 で文章の最後の2文字（くらい）が変なところに表示されてしまう問題の原因と解決法。
Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。 btmup Blog ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。 IE6 で float を使ったレイアウトをしているとき、文章の末尾（最後の2文字くらい）が変なところに表示されるということがあります。 どう変かというと、末尾の文字をそのままコピーしてはみ出たような、そんな感じです。 もちろんソースにそんなものは含まれていません。 JavaScript や PHP なんかを使っている訳ではなく、純粋に HTML と CSS のみでもこのような事象が起こります。 で、とりあえずググってみて見つかったのは下記2つの記事。 »コメント文が出力に影響！？ »IE6のバカヤロウ (room ant) これらを読んで、とりあえず「float
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「印刷用ページ」の作り方
TechCrunch | Startup and Technology News
テクノロジー : 日経電子版
