Webタイポグラフィまとめ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 フォント指定や行間、約物といった、文字周りのノウハウです。デザインというより技術的なまとめ。SWFObjectとかsIFRといったFlashネタを除けば、Webの文字は全部CSSでできるんだから... コーダこそタイポグラフィを意識すべし。看板みて書体言い当てるとか変態的な域まで達せずとも、原則だけ覚えとけばプロトタイプが様になるんだし。 オールドスタイル数字 アンパサンド（“＆”） スモールキャップ ハイフンとダーシ 各種スペース 合字 約物 約物はぶら下げる :beforeと:after 見出しのサイズ 初期フォントサイズ 行間の調整 余白の調節 各国の日付表記
2008年、ウェブのデザイナー・開発者がおさえておきたいリソース集 | コリス
2008年、ウェブのデザイナー・開発者がおさえておきたいデザイン、Photoshop&Illustratorのチュートリアル、ブラシやベクター素材、JavaScript、CSS、WordPress、タイポグラフィ、フォント、素材、リソースなどをnoupeのエントリーから紹介します。 2008 Most Popular Design posts, Tutorials and Resources デザイン関連 Photoshopのチュートリアル関連 Illustratorのチュートリアル関連 Photoshop&Illustratorのブラシやベクター素材 JavaScript関連 WordPress関連 CSS関連 フォント&タイポグラフィ関連 ツール&素材関連 デザイン関連 42 Awesome Business Card Designs 20 Beautiful HDR Pictures
hiromasa.zone : o) (ドキュメント) � Eclipse XAMPP で WordPress の開発環境を作ろう/はじめに
はじめに ブログシステム WordPress でのサイト構築にあたって必要となってくる、いわゆるローカル環境の構築手順です。 WordPress | 日本語 WordPress 日本語ローカルサイトへようこそ。 WordPress (ワードプレス) は、オープンソースのブログ／CMS プラットフォームです。セマンティック Web、コードやデザインの美しさ、Web 標準、ユーザビリティなどを意識して開発されており、無料でダウンロードして使うことができます。 WordPress を使って、思い通りにカスタマイズしたブログサイトを作り上げてみませんか。 WordPress は多くの場合レンタルサーバ上にインストールを行いインターネットにサイトを公開しますが、サイト運転中のレンタルサーバ上に直接修正したテーマファイルや追加インストールしたプラグインをアップロードして試験すると、ブログ読者にその作業
中級マークアップ(3) < 良質なテキストサイトの爲のISO-HTML入門
この文書の小見出し一覽 埋めこみ畫像(img) 整形濟みテキスト(pre) 水平線（區切り）(hr) 強制改行(br) 引用元(cite) 略語(abbr) この節では、比較的重要でない（と思はれる）要素を、まとめて解説してゆくことにします。なほ、HTMLで用ゐられる要素はここで紹介するもので全てではありません。この章は飽く迄「中級マークアップ」（と私が判斷するもの）を解説してをりますので、上級者向けの要素は當記事では解説しません。HTMLの要素に關する更なる情報をお求めの方は、HTMLの仕樣書を讀むなり、他のリファレンスをあたるなりされることをお薦めします。 埋めこみ畫像(img) HTML文書中に、畫像を用ゐたい場合が有ります。文章では説明しづらいことを圖で説明する場合や、CGや寫眞などの作品を公開したい場合、サイトのバナーやロゴマークを用ゐたい場合などです。HTML文書中に畫像を埋め
Inspiration Package: 60 Usable & Elegant Designs | Design Showcase | Smashing Magazine
As usual, we have to put ourselves in the users’ shoes: What do we want them to see first? How will your message be best communicated? We have to ask these questions before we start designing, because the layout will shape the rest of the design. The following websites have some quite unusual layouts. They aren’t necessarily perfect; still, browse through them, and maybe your creative genius will
:link、:visited、:hover、:active の記述順序とその覚え方 - jmblog.jp
スタイルシートでa要素のリンクのデザインをする際に、次のように 4 つの擬似クラスを用いることが多いと思います。 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: yellow; } 実はこの 4 つの擬似クラスの記述順序には注意が必要で、 link visited hover active の順番で記述しないと意図した結果にならなかったりします。この順序についてちょっと調べてみたので、まとめてみたいと思います。 なぜこの順番じゃなければダメなのか？ 実践 Web Standards Design には、次のように書かれています。 :hover 擬似クラスと:active 擬似クラスは一連の動作であるので、スタイルシート内でもこの順番で記述しないと有効
webサービスを作る前に読みたいデザイン系エントリまとめ - 遥か彼方の彼方から
まとめwebプログラムをしていて、いざサービスを作ろうと思ったときにネックになるのが、デザインです。 僕はもうその手のセンスが絶望的に欠けていて、配色もレイアウトもまともなものが出来ません。HTMLやCSSそのものの知識があっても、それで作るモノが見えてこない。CakePHPの勉強をしてwebサービスをいっぱい作ろうと思っているのに、これは良くない。 そこで実際にwebサービスを作る前に読んでおきたいwebデザイン系の記事をメモとして並べておくことにしました。「これを読んでおけ」「ここのデザインは参考になるよ」「このアイコン集おすすめ」「あのツールの使い方ならここだ」「このツール良い感じ」みたいなものがあれば、是非教えてください！ 随時追加していきます。 プログラマでも出来るWebデザイン - Blog.37to.netウノウラボ Unoh Labs: デザインセンスの無い人がwebサイト
Using Javascript to Fix 12 Common Browser Headaches - noupe
We advocate using CSS whenever possible, and we often successed. Modern browsers have very good support for CSS -- it's certainly good enough for you to use CSS to control layout and presentation. Sometimes however, certain page elements will appear differently in different browsers. Don't worry too much if you don't know the reason why, play around with the CSS rules and check out this post: Usin
Telegraphics - Free plugins for Photoshop & Illustrator...and other software
Plugins Most plugins below are usable with all versions of Photoshop under Mac OS X, 9 and earlier, and Windows (if you need a version that's not here, please write to us). Should also work with Elements, AfterEffects, Premiere, PhotoDeluxe, Corel PhotoPaint, Paint Shop Pro, Fireworks, Painter, Photo Impact etc. (incomplete list). For information about using these and other Photoshop plugins with
Life is beautiful: Ajaxの本質、「非同期メッセージ型ウェブ・アプリケーション」のススメ
最近、「これからのウェブ・アプリケーションはAjaxだ」という声を良く聞く。ソフトウェアを生業としているエンジニアとしては、この手の「流行もの（hype）」に触れた時には、表面的なものに踊らされずに、その本質を自分なりにしっかりと捕らえて消化・吸収して自分のものにしなければいけない。今までも、「オブジェクト指向」、「マルチ・ティアー・アーキテクチャー」、などの言葉が一人歩きするたびに、「これからは○○だ」とか「○○の時代は終わった」などと、過激なことを言って読者の目を引こうとだけするマスコミや企業のマーケティング戦略に数多くの人が踊らされてきた。 そんなノイズだらけのメッセージに混乱させられた結果、「Ｃではオブジェクト指向のプログラミングは出来ない」と信じているエンジニアがいまだに沢山いることは全く嘆かわしいことだ。「オブジェクト指向のプログラミング」は、設計姿勢・プログラミングスタイルに
Sexting: What It Means, How It Works and Benefits
Gone are the days of handwritten snail mails and post cards between romantic couples. Nowadays, we hardly hear about anyone sending a personalized love note or love letter that takes days to weeks for it to get into its rightful owner. In this generation, we have emails, text messages, instant messaging, social media, online voice calls and video calls. The list goes on as modern technology contin
IE7とIE6を共存させる
「Internet Explorer 7」と「Internet Explorer 6」を一つのOSに共存させる方法の紹介です。 「Internet Explorer」は「Windows XP」などのOSのシステムに組み込まれるため、通常のインストール方法ではどちらかのブラウザしか使用できませんが、下記の２つの方法のどちらでも共存が可能です。 IE7をベースに、IE6をスタンドアローンで起動する方法 IE6をベースに、IE7をスタンドアローンで起動する方法 IE7をベースに、IE6をスタンドアローンで起動する方法 IE7をベースにする方法です。 今後はIE7がIE6より主流になりますので、こちらの方法を推奨します。 ただし、会社のマシンや使用しているアプリケーションの都合でIE6が変更できない場合などは、「IE6をベースに、IE7をスタンドアローンで起動する方法」になります。 IE7をダウン
あるＳＥのつぶやき: minmax.js - IEでCSSのmax-widthなどを使えるようにするライブラリ
minmax.js(doxdesk.com) FireFoxなどでは、以下のCSSを使えてとても便利です。 min-width ・・・要素の最小幅 max-width ・・・ 要素の最大幅(指定幅までしか広がらない) min-height ・・・ 要素の最小の高さ max-height ・・・ 要素の最大の高さ(指定の高さまでしか広がらない)でも、これはIEでは使えず大変不便です。 上記CSSをIEでも使えるようにするのが、minmax.jsです。 ・サンプル <html> <head> <!-- <script type="text/javascript" src="minmax.js"> </script> --> <style type="text/css"> <!-- .minmax { background-color:#FFCC66; max-width:100px; } -
コードは<pre>でマークアップするべき ...か？ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 技術系のネタを出すときに避けて通れないのが、ソースコードの出し方。通常は<pre>要素でマークアップするのが一般的。だけど<pre>要素でマークアップすると、基本的にはどれだけ横長になろうがソース中の改行でしか改行されないため、表示領域内に収めることが難しい。 だが待ってほしい。 そもそも<pre>でマークアップしなければいけないのか？ そんな事はない。<pre>（整形済みテキスト）はソース中のスペースや改行をそのまま表示するために作られたタグで、改行や空白に大きな意味をもつ詩や俳句なんかのために用意されている。それがソースコードのマークアップに使われるのは、単にイン
マークアップの仕方、P 要素とか - カナかな団の躁鬱
つまるところ、日記BBSの過去ログです。各記事の見出し部分のナンバーは記事個別表示のアンカーとなっています。
IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester | コリス
IETesterは、IE5.5, IE6, IE7, IE8beta1の確認が同時にできるアプリケーションです。 IETester [ad#ad-2] IETesterを利用するには、上記IETesterのページの「Download IETester」から「install-ietester-v0.2.exe」ダウンロードし、IETesterをインストールします。 IEのバージョンの切り替えは、「New Tab」から切り替えることができます。 簡単に使用しただけですが、IE5.5, IE6, IE7, IE8beta1のレンダリングの違いを確認できました。 バージョン0.2の動作条件は、Windows XP or Vista + IE7以上となっています。XP + IE6の場合、IE7, IE8のモードが動作しません。 Windows XP + IE7, IE8beta1の環境で使用したとこ
パンくずリストとは 【topic path】 ─ 意味・解説 ： IT用語辞典 e-Words
概要 パンくずリスト（breadcrumbs list）とは、あるWebページのサイト全体の中での位置を、階層構造の上位ページへのリンクを順に並べて簡潔に記したもの。 ある程度以上の規模のWebサイトは、ページ群全体が大きなカテゴリに分かれ、その下に何階層かの中カテゴリや小カテゴリ、個別のページ、という形で階層構造で管理されていることが多い。 そのページの属する階層のメインページへのリンクと、上位階層のメインページへのリンクをトップページまで順番に遡って「トップ > コンピュータ > パソコン > 買い方」のように並べたものがパンくずリストで、ページ上部など目立つ位置に配置することが多い。 名称の由来は童話「ヘンゼルとグレーテル」で、森の中で帰り道が分かるようにパンくずを少しずつ落としながら歩いたというエピソードである。トップページからそのページまでの経路を示すことにより、訪問者がサイト内
もう、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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
リゾレーヌ サプリを口コミだけで判断してはダメ？バストアップ効果が口コミ通りなのか試してわかったことを包み隠さず公開します！
hr要素とbr要素について