フッターとかの区切り『｜』のサンプル1種
ふと、昔のサンプルを見て、今そんな組み方しないよ。とか思ってしまったので、最近もっぱらコレっていうのを書き書き。 コレに限らず、昔のエントリーを見てると、自分で無いな～使えねー！って突っ込みたくなるエントリーが多いっす・・・うぅ。 念じたら全部最近の書き方になおらないかな。 ・・・ 残念ながらなおらないと思うので、昔のエントリーを見る場合は、ちょっと気を付けたって下さい。 何気に大掛かりな計画は有るけれど、計画がでか過ぎて中々どうにもこうにも。 というかブログ書いてる暇有るなら、「お前アレやれよアレ。」ってお怒りの声が聞こえてきそうなので、アレに専念する為にまた大人しくしてるっぽいです。 最近フッターで区切りが有る場合は、:first-child疑似クラスを使って対応するケースが殆どです。 実際のサンプルも用意しました。 サンプルサイトを見る XHTMLはこんな感じ。 <div id="f
ごく簡単なHTMLの説明
HTMLは本来簡単で便利なものです。「30分間HTML入門」で基本は十分。まずシンプルに自分の情報を表現してみてください。 You can write a document as simple as you like. In many ways, the simpler the better. -- Tim Berners-Lee 簡単なHTMLの説明 少し詳しいHTMLの説明 XHTMLから次世代ウェブへ 電子テキストで情報発信 簡単なHTMLの説明 だんだん説明の量が増えてきたので、コンパクトな入門ページを用意しました。 基本がきちんと分かる30分間(X)HTML入門 HTMLを使った人間・コンピュータ双方にわかりやすい表現 （スライドのHTML版） 何のためのHTML？ HTMLは画面をレイアウトするためではなく、文書を環境に依存せずに共有できるように記述するための約束です。そこを正
ウェブサイトでやってしまいがちなユーザビリティのミス
ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。 9 Common Usability Mistakes In Web Design 下記は、その意訳です。 1. クリックできるエリアが小さい リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。 解決方法 リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。 2. 間違った目的のためのページネーション ページネーションは、内容を複数のページに分ける時に使用します。 しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。 一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ペー
[CSS]シンプルでクールなデザインのパンくずを実装するスタイルシート
グラデーションを使用したアローでデザインされた、シンプルでクールなパンくずのスタイルシートをVeerle's blogから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="crumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main section</a></li> <li><a href="#">Sub section</a></li> <li><a href="#">Sub sub section</a></li> <li>The page you are on right now</li> </ul> </textarea>
CSS HappyLife
もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった！ これは中々に酷いですね。 とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。 - 探そう！好きな恐竜 なんで恐竜！？って感じしますね。 正直、恐竜には全然興味なかった側の人間です。 もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公
SEO基本技術のチートシート（トラの巻）を作ってみた | Web担当者Forum
9か月前、最初にSEOmozで働き始めたとき、僕はウェブ制作のインターンだった。それ以前の経験といえば、コードを書いたことがあるくらいだった。 SEOmozに参加してから、それこそ何百時間もかけて、いろいろな分野の知識を広げていった。特に、定番のSEO手法と中小企業向けの実務は力を入れて勉強した。この間投稿したSEO初心者のためのチェックリストは、僕が新しく手に入れた知識の結晶なんだ。 原点に立ち帰るために、SEO技術のトラの巻の母体となるべきものを丸1日かけてまとめてみた。このトラの巻は、ブログ記事として読むよりもPDFで印刷して読んだ方がいいよ（ブログ記事は印刷しにくいからね）。 ダウンロードする前に内容を確認できるように、簡単な説明をしておくよ。じゃあね！ SEO基本技術のチートシート（トラの巻）――表面
よりよいWebデザインにするための配色のセオリー :: Love & Design ::
第一印象を決めてしまうほど、色はとても大切な役割を持っています。 Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。 配色には様々なルールがありますが、Webデザインの配色は好みやセンスに頼らず、目的や用途に合わせて「調和」と「役割」を持つ効果的な配色をしたいものですね。 そこでWebデザインでも“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめました。 では、さっそく配色の基本になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。 色相差で配色 【イメージ効果】 暖かい⇔冷たい 動的な⇔静的な 情熱的な⇔理知的な → 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。 背景色の心理補色（黄⇔青 赤⇔緑）の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。（色相対比）
ウノウラボ Unoh Labs: 「視線を導く」方法あれこれ
yamazakiです。毎度毎度技術系なこのウノウラボには馴染まない話題を振りまいているわけですが、さてはてどの程度お役に立てているものか…。 今回のテーマは「視線」です。例えばWebサイトは「見てもらう」ことが大事ですし、また、UI設計の場面などでも、「視線をうまく導いてやる」のは使い勝手をよくする上でも大切なことだと思います。といったわけで、ユーザの視線をうまく捕まえてみたり導いてみたりする上で役に立つかもしれない情報を簡単にまとめてみます。 １．視線をつかまえる Web上にも街にも広告だの何だのと情報が氾濫しています。その中で「見てもらう」ためには何かしらの工夫が必要になることがあります。というわけでまずは「人の視線をつかまえる」ための方法論を少し。 「人の顔」を使う まずはこの画像を見てみてください。 01 posted by (C)フォト蔵 最初に、どれを「見てしまいました」か？
秋元@サイボウズラボ・プログラマー・ブログ: 究極の.htaccess?
via del.icio.us/popular Apacheのフォルダローカルな設定ファイル.htaccess で使いそうな設定をかたっぱしから書き込んだファイル。 メイン、スクリプト関連、ヘッダ(キャッシュや最速化)、URL書き換え、認証、SSL、開発中サイト、というようなジャンルごとに、よく使われそうなディレクティブがずらずらと並んでいる。PHPの設定、cool URLの設定、エラーページ、認証の掛けかた、などなど。 書き換えるべきところは英単語で何を書くのかわかるようになっているので、コメントとあわせて思い出しながらコメントを外していくとそれなりに使えそうな .htaccess が作れるかもしれない。僕なんかは細かい設定方法すぐ忘れてしまって検索することが多いので、これで楽になりそう。 # 本当に不要なものはコメントにせずファイルから消すべきだし、安定運用に入ったら.htaccess
CSSでクールなテーブルを作成するサンプル:phpspot開発日誌
A CSS styled table | Veerle's blog Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS.CSSでクールなテーブルを作成するサンプル。 次のようなテーブルを作成するサンプルが公開されています。 サンプル１（解説記事） サンプル２（解説記事） テーブルもここまでカッコいいものが作れるんですね。 是非テーブルスタイル時の参考にしたいサンプルです。
ウノウラボ Unoh Labs: グラフィック作りのコツとカン
こんにちは。yamazakiです。 前回はレイアウトなどについて非常にざっくりとですが書いてみたわけですが、いかがでしたでしょうか。 そろそろ「グラフィック」のほうも少し書いてみようかという気になってきたので、グラフィック品質を高めるベーシックな技術についても少しずつ書いていってみようと思います。 基本のき 具体的な話に入る前に、まずは基本的な話から。 とりあえず、ざっとあなたの周囲を見回してみてください。壁にしても、PCにしても、「単なる一色のベタ塗り」にはなっていないのではないかと思います。光の加減などで、「影」や「グラデーション」がついていると思います。また、ものの表面には「つるつる」「ざらざら」といった「質感」があるのが当たり前、という中で私たちは生活しています。 そのため、人の目はそういう「グラデーション」や「影」、「質感」がある状況を「見慣れて」います。 グラフィック上
クールなURIは変わらない -- Style Guide for Online Hypertext
クールなURIとは？ クールなURIとは変わらないもののこと。 どんなURIが変わってしまう？ URIは変わらない：人がそれを変更するのだ。 理屈の上では、人々がURIを変更するべき（もしくはドキュメントのメンテナンスをやめてしまう）理由は全くありません。しかし、現実には山ほど理由があります。 理論上では、ドメイン名空間の所有者はその空間を所有しており、したがってその中に含まれるURIも所有権を持ちます。ドメイン維持料が支払えない場合を除いて、その名前を保有し続けることを妨げるものはありません。そして理論上は、あなたのドメイン名のもとにあるURIは、完全にあなたの管理下にあり、望む限りそれを安定的に保つことができるのです。 ウェブからあるドキュメントが消えてしまう唯一の納得できる理由は、そのドメイン名を保持していた会社が廃業してしまうか、サーバーを維持できなくなったという場合ぐらいでしょう
ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー！古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザーフレンドリーな優れたナビゲーション集
http://e0166nt.com/blog-entry-313.html
HTMLテーブルの行を見やすくするテーブルクロスJavaScript*ホームページを作る人のネタ帳
TableとCSSいろいろ - DesignWalker
サイトでグラフを使いたい時に使えるまとめ - DesignWalker
JavaScript無しのドロップダウンメニューを実行する純粋なCSS*ホームページを作る人のネタ帳
http://www.designwalker.com/2007/08/drop_shadow.html