自分のwebサイト作る工程 - MEMOGRAPHIX
2. モック作る次に、Illustrator でモック作る。前は Photoshop で作ってたけど Illustrator に変えた。ラフスケッチでだいたいの構造は決まってるので、それを画面で見た時の見栄えを検証する。雑だけどこれは自分のサイトなのだから自分しか見ないという前提があって、雑でも問題ないということにしてる。8割くらい作り込んだところでやめて、コーディングに入るようにしている。2割くらい変更可能な余地を残しておくことで、コード書くとき融通が効く。 ラフとかモック描かずにコーディング始めることもたまにあるけど、それは余程デザインが頭のなかで固まっている場合に限る。ラフとかモック作るの、コーディングと同じくらい大事だと思ってて、コーディングを始めてしまうとデザインに気を配るのを疎かにしがち。デザインを考えつつ同時にコードを書くというのは結構難しくて、トレーニングが要る。全体のデザ
ウェブページのサイドバーに生じる空きスペースの活用方法
ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。
デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則
このブログ、Webデザインレシピのデザインをリニューアルしました。 この機会にデザインを勉強したことがない人でも、楽しくデザインをすることができるかもしれない、基本原則 4つをご紹介します。 この原則は「ノンデザイナーズ・デザインブック」著者 Robin Williams で詳しく解説されています。 古い本ですが、とっても素晴らしい本で今では新装増補版となって発行されているようです。 今回、このブログ – Webデザインレシピのデザインを、ガラッと変えてみました。これを機会にちょっとデザインの基本というか、デザインをするときにガイドとなる、4つの原則をおさらいしておきます。Webデザインに限らず、会社で提出する報告書や学生さんのレポート、レストランのメニューなど、ページと呼べるものには全部当てはまると思うので、Webサイトを作るとかじゃなくても、知っておいて損はないかもしれませんね。 せっ
＆ｎｂｓｐ;の使いどころ | Blog hamashun.com
文字実体参照の中に、 という物があります。 使用すると半角スペースと同量の間隔を空けます。 これまでは何も考えずに半角スペースの代わりであると認識していたのですが、ではどういった時に使うのかという事を知りませんでした。 サンプル 最初に疑問に思ったのは、全ての半角スペースは に置換するべきなのか？ という事です。 半角スペースを主に使うのは、やはり英語圏であろうと思ったのでA list Apartのソースを見てみました。 すると、全ての半角スペースが通常のスペースを使用されていました。 続いてThe Web Standards ProjectやThe Web KANZAKIも調べてみましたが、同じく半角スペースを使用。 まあ、ちょっと考えてみれば、英語は単語を半角スペースで区切るので、いちいちそんな事やってられないですね。 では、どんな時に使うのが正しいのでしょうか。
divタグが多用されている経済産業省のページのdivタグを可視化してみた - Pastalablog in はてな
はてなブックマークとかで盛り上がってたのを見て、せっかくなので、divにborderかけてみたらすごいことになった。 話題なのはこのページ 経済産業省 会見・スピーチ 大臣記者会見 ページ自体は古め*1 divの数は下のコードで数えたらページ全体で309個あった。 検証方法 firebugにjQuery検証機能を付けるFireQueryというのを使ってjQueryで適当に以下のコードを実行した。 var c=new Array("red","yello","blue","green","black","pink"); $("div").each(function(i){ $(this).attr("style",("border:1px solid "+c[i%6])) }) 結果 こんなHTMLどうやって作ったんだろうか。 もし手打ちなら根気の居る作業だったんだろうなぁと思いました。 追
【twitter】ホームを透明化しまくって世紀末な感じにする【裏技】 - uinyan.com
2020/10/18 エンジニア D4DJ Groovy Mix オープンベータ開始 2020/10/18 ＤＪ 秋葉原(を夢見る)パラダイスレイディオ Vol.1 @ twitch配信 2020/10/25 エンジニア D4DJ Groovy Mix リリース 2020/11/14 ＤＪ UNDER Freaks 2nd anniv. @ 渋谷Cafe W (渋谷WOMB 1F) 今日は各所から「キモイ」「すごい」「ヤバい」との賞賛の声が殺到したあの裏ワザを紹介！ あなたのtwitterのホームがとってもシースルーな感じになります。 サクッと実行して、友達のドギモを抜いてやりましょう★ミ やりかた １．twitterの「設定」へ行く ２．「デザイン」を選択 ３．下の秘密コマンドをコピーする javascript:d=document;c=d.createElement('scri
画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！ 今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
商用可も有り！フリーアイコンを100,000個以上集めたアイコン総合サイト「FREE ICONS!」
TOP > WebDesign > 商用可も有り！フリーアイコンを100,000個以上集めたアイコン総合サイト「FREE ICONS!」 デザイン的にもユーザビリティ的にも非常に便利に使えるアイコン。デザインをより分かりやすくしてくれます。今回紹介するのはそんな制作に使えるフリーアイコンを100,000個以上集めたアイコン総合サイト「FREE ICONS!」です。 基本的に、アイコン個別ではなくて、アイコンセットが多数、集められていると言う形になります。沢山のアイコンセットが公開されていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■Iconset:2experts-30-icons-set icons License: Free for commercial use (Include link to authors website) ■Cr
Twitterの「これはいい画像ですね！」のUIを3分で実装してみる - spanstyle::monolog
Twitterの「これはいい画像ですね！」のUIを3分で実装してみる ishii (2009年11月18日 17:17) | 個別ページ | トラックバック(0) カテゴリ XHTML+CSS タグ css, HTML, jQuery, Twitter, これはいい画像ですね！ Twitterアカウントを持っている人なら一度は見ているであろう、設定完了画面で出てくる「ありがとう。設定を保存しました」や「これはいい画像ですね！」のUI。 ページ表示時にベロンと出てきて、一定時間が経過したらスルスルと消えていく例のアレですが、ユーザへの通知手段として非常にわかりやすいなあと思いませんでしたか？ためしてみたら意外とカンタンに実装できたので、実装方法をまとめてみます。 この記事を見た人は以下のエントリも見ています SyntaxHighlighter の記述方法と注意点のまとめ 間違えやすいHTML
愛生会病院
小坂町へアカシアドライブ 先日、小坂康楽館通りにあるアカシアを見に行ってきました。風が少し強い日でしたが満開のアカシアが花吹雪となり綺麗に舞っていました。噴水の音を聞きながら「風が気持ちいいなぁ」と、景色を眺め、花壇の...
愛の妖精ぷりんてぃん 公式ホームページ
コーナー一覧 ご覧になりたいコーナーをお選びください ☆ トップページタイトル ☆ 今日の未女子日女（ミニ日記） 【SPECIAL】 愛の妖精ぷりんてぃん きらめきの商品 販売中☆ ☆ ぷりんてぃんのお店 【SPECIAL】 あなたの運気（pr）を高めます♡ スマホ用 壁紙 無料配布中 ☆ きらめきの壁紙カード ☆ ぷりんてぃん ここがすごい!! 【はじめに】 ♡ ぷりんてぃんってなに？ ♡ ミーちゃんがご案内する 愛のぷりんてぃんの世界 【絵 本】 ♡ 愛のファンタジアランドへ ようこそ！ ♡ ぷりんてぃんと遊ぼうよ！ 【エッセイ】 ♡ あなたが幸せになるために 【作 品 集】 ♡ 未女子日女ギャラリー１ 東日本大震災復興祈念 ♡ 未女子日女ギャラリー２ ♡ 未女子日女ギャラリー３ ♡ 未女子日女 直筆 書道メッセージ集 【ミニ劇場】 ♡ 愛と幸せの ぷりんてぃん物語 【ライトノベル】
)
CSS に関する互換性と Internet Explorer
Windows Internet Explorer の新しいリリースが発表されるたびに、カスケード スタイル シート (CSS) 標準のサポートは絶えず改善されてきました。 Internet Explorer 6 は、CSS レベル 1 に完全準拠した最初の Internet Explorer バージョンでした。 Windows Internet Explorer 8 は、CSS レベル 2 リビジョン 1 (CSS 2.1) の仕様に完全準拠し、CSS レベル 3 (CSS 3) の一部の機能をサポートします。 お客様の Web サイトが、以前のバージョンの Internet Explorer を含むブラウザーを対象にする場合、各バージョンの CSS 準拠レベルを確認する必要があります。 この記事では、Internet Explorer 8 でのサポート状況を含む、Internet Ex
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
属性セレクタで、スタイルシートを柔軟に！ - ［ホームページ作成］All About
属性セレクタを使うとスタイルシートの記述が楽になる スタイルシートで装飾対象を指定する方法に「属性セレクタ」という書式があります。 今までは、FirefoxやOperaしか対応していませんでしたが、Internet Explorer 7でも使えるようになりました。 この「属性セレクタ」を使うと、スタイルシートでの装飾対象の指定が楽になります。 例えば、次のような指定が可能です。 a要素のうち、name属性があるものだけを装飾 a要素のうち、target属性の値が _blank のものだけを装飾 input要素のうち、type属性の値が button のものだけを装飾 このように、「特定の属性が存在する要素のみ」や、「ある属性の値が指定した文字列である場合のみ」に限定した指定ができるようになります。 属性の値まで指定して装飾できるので、より柔軟で記述量の少ないスタイルシート
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
ブロックレベル要素をセンタリングする方法 - Web標準普及プロジェクト
ブロックレベル要素をセンタリングする方法 一昔まえはcenter要素やdiv要素にalign属性を付けてセンタリングするという手法が当たり前でした。 しかし、最近では見た目はHTMLではなく、CSSで指定するべきである、と言われだし、 現にcenter要素はHTML4.01 Strictや、最新のXHTMLでは使用できません(HTML4.01的には非推奨)。 そこでCSSによる正しいセンタリングの仕方をここで解説します。 正しいセンタリング方法 テーブルやdiv要素のようなブロックレベル要素をセンタリングするにはtext-alignは使いません。 text-alignプロパティはインライン要素の位置揃えを指定するためのものだからです。 Bugzilla-jpにも報告された多くのサイトでは"text-align:center;"を使ってセンタリングしようとしていましたが、 これによってブロッ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サービス終了のお知らせ
http://homepage3.nifty.com/abe-hiroshi/
タブジェネレータ%26utm_content%3DGoogle%2520Reader)
css-lecture.com