「印刷用ページ」の作り方CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
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
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
【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
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="
これは驚きの、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とレイアウト力 まず、知っている人には物凄く当たり前の事ですが、
複雑なWebサイトデザインを容易に実現するテンプレート·YAML MOONGIFT
なぜデザインとYAMLが関係するのだろうと思ったが、ここでは「Yet Another Multicolumn Layout」の略らしい。つまりマルチカラムのデザインを容易に実現するためのCSSテンプレートということだ。 整ったデザインが簡単に手に入るのはすばらしい！ Webプログラマの一番の悩みどころがデザインだ。特にCSSを使ってマルチカラムや入れ子になっているデザインは難しい。高さをそろえたり、メニューを横並びにしつつ、次の要素では違う表示など、複雑になればなるほど放棄したくなってくる。それがFirefox/IE/Safariなどのブラウザにも対応するとなれば尚更だ。そこで登場するのがYAMLだ。 今回紹介するフリーウェアはYAML、複雑なマルチカラムデザインテンプレートだ。 YAMLでは多数のサンプルが用意されている。単純な2または3カラムを基本として、グリッド化されてページの幅に応
ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく
ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。
Webサイトの制作／運用の効率化を図る 「ガイドライン策定」のすすめ（前編）（1/4）：CodeZine
Web標準に従うことは、SEO効果、ユーザービリティ、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従ってWebサイトを制作しようとすると、制作者の頭を悩ませる多くの問題が待っています。本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 はじめに Web標準に従うことは、SEO効果、アクセシビリティ、ユーザービリティ、相互運用性、互換性、メンテナンス性の向上など、Webサイトの利用者と制作者の双方にさまざまなメリットをもたらします。しかし、実際にWeb標準の仕様書に従って「正しい（X）HTML+CSS」でWebサイトを制作しようとすると、制作者の頭を悩ませる多くの
Ajaxload - Ajax loading gif generator
Indicator type : Background color : # Transparent background Foreground color : # Create easily your own ajax loader icon : Select the type of indicator you want Enter the background code color you want (tick "Transparent background" if you don't want one Enter the foreground code color you want Press "Generate it"
CSS で簡単に上下中央揃えを実現する
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
第13回 Webページで読みやすいテキストとは：ITpro
今回のポイント 1行あたりの文字数の目安 1段落の文字数の目安 段落に含む文字数 行間調整の考え方 字間調整を使ったロゴ風味見出し 日本語というのはもともと縦書き文化です。文字も筆で縦書きしていくときに書きやすいように作られています。現在PC画面上で見るフォントは，活字印刷物のフォントとは違い，横書きで読みやすいようにもともとの字体から若干形を変えられています。それでも起源である縦書きの形を完全に壊すことができないので，やはり横書きでは読みづらいようになっています。 日本人が苦痛を感じることなく読める横書き1行あたりの字数は20字＋α程度だと言われています。意識して雑誌などを見るとたいていが!)25文字から28文字程度です。用紙，つまり本のサイズがA4を超えるような大判になると，1ページを左右2段組に分けて25～28字程度に調整されています。 一方，縦書きの場合には識別許容量はグンと増加し
MOONGIFT: » JavaScriptを使ってCSSを拡張「MoreCSS」:オープンソースを毎日紹介
※ 画像は公式サイトデモより 最近のWeb開発は単純なタグ構成をCSSを使って装飾していくという形式が多い。確かに開発側にとっても単純な構造は分かりやすく、CSSで見た目を変更できるのはデザインとシステムの分離ができ、効率的だ。 そしてこのソフトウェアはそれをさらに発展させてくれる。 今回紹介するオープンソース・ソフトウェアはMoreCSS、CSSを拡張するJavaScriptライブラリだ。 JavaScriptでCSSを拡張とはどういうことだろうか。例に出すと、例えばテキストボックスにデフォルトで「Search...」という文字を出したいとする。通常、JavaScriptを使ってonClickなどを定義すると思うが、MoreCSSを使えば「default-value:"Search …";」という定義をCSSに書いて、そのIDを当てはめるだけで良い。 他にも同じサーバ内の文字列を拾ってき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://jp.techcrunch.com/2009/06/05/20090604google-opens-up-internal-speed-tool-to-the-public/
テクノロジー : 日経電子版
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker
