素人っぽいデザインから脱却するための12のデザインチップス | webox blog
クオリティを上げるためにはちょっとした「こだわり」がとても大事です。 定期的に話題になるネタで恐縮ですが、素人っぽいデザインにならないように個人的によく使ってる小技をまとめました。 上のものほど、簡単で多くのデザインに使える小技になります。 1pxのボーダーを使う 1pxの効果を使うのと使わないのでは、デザインの質に大きな違いが生まれます。 ある意味Webデザインでは一番重要な要素かもしれません。 定番です。たった1pxのボーダーをつけるだけでシャープな印象になります。 ただ塗りつぶしただけ、グラデーションを入れただけのボタンでは、のっぺりとした感じになりやすいですが、1pxのボーダーを上部に入れるだけでシャープな立体を表現できます。 正確には1pxでなく2pxですが、こうして黒系のボーダーと白系のボーダーを並べることで、明確にかつシャープに仕切りを表現できます。 1pxのドロップシャ
ずっと使えるデザインテクニック。すっきり美しく見せる『余白』と『文字』の使い方。
こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。 2. 内側のマージンは外側のマージンより狭く レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基本的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。 3. 段落の下は間隔を広く開け
HTML5 でやりがちな間違い
HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 HTML5 Doctor で 「Avoiding common HTML5 mistakes」 という記事が上がっていましたので稚拙ではありますが翻訳など。HTML5 でマークアップする際にやりがちな間違いをいくつか挙げて、さらに正しいマークアップ例も紹介くれていますので、参考にしてみてはいかがでしょうか。 Avoiding common HTML5 mistakes ： HTML5 Doctor 翻訳といっても要約みたいな感じですので、書いてあることをそのまま日本語にしたものではあり
技術者が知っておきたいTomcat 7の新機能20連発
■ リクエスト処理のアーキテクチャ Tomcat 4時代から採用されているリクエスト処理のCatalinaアーキテクチャは変更なしで、そのまま採用しています。Tomcatが受け付けたリクエストは、リクエスト処理パイプラインによってServletまで到達し処理されます。 ■ クラスタリング（セッションレプリケーション） 若干のインターフェイスの改良はありますが、基本的には同じ仕様です。 「All-to-All」「primary-secondary」の2つのレプリケーション方式が利用可能となっています。 ■ DBコネクションプール 今までどおりApache Commons DBCPを使用し、バージョンはDBCP 1.4系(JDBC 4用)を採用しています。Tomcat独自のjdbc-poolを利用する場合は別途ビルドが必要です。jdbc-poolは近いうちに同梱されるかもしれません。 では、T
ウノウラボ Unoh Labs: CSSの管理と記述法のコツ
前回はYUIの紹介でしたが、今回はCSSの管理と記述法について書きたいと思います。 CSSは、主なHTMLエディタなどでは標準で編集できますが、多人数での開発 やスタイルが多くなってくるほど管理が大変になっていきます。 アプリケーションソフトの管理機能もいいですが、CSSコーディング規約のようなものがあると、より把握が容易になるメリットがあります。 サイト基準設定、ページレイアウト、共通要素、個別スタイルに分ける 構成内容によって、上記のような段階に分けると、意図しない表示等が出たとき、簡単に影響箇所の割り出せます。 基準スタイル（ex: base.css) font-sizeやfamily,デフォルトのmarginやpaddingのリセット等。 前回のYUIのReset.CSSを使う手もあります。 ページレイアウト(ex: layout.css) カラム構成やグローバ
はてなブログ | 無料ブログを作成しよう
水風呂のすゝめ 毎日めちゃくちゃに暑い。 ここ数年「およげ!たいやきくん」のように昼間は太陽とオフィスビルとアスファルトの三方向から押し寄せる35℃オーバーの熱に挟まれ、夜になっても最低気温が27℃くらいまでしか下がらない。そんな理不尽な東京鍋の中の暮らしが毎年のことにな…
【レビュー】HTMLのidとclassでいい名前をつけるテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers HTMLを書く際に悩むことは多々あるが、中でも悩ましいことのひとつにidやclassで指定する「名前」がある。idやclass属性はCSSやJavaScriptで対象となる要素を特定するために使われる。わかりやすく一貫性がある名前をつけることは、WebプログラマやWebデザイナにとって欠かすことができないスキルであり、悩ましいところでもある。 How To Compose HTML ID and Class Names like a RockstarにおいてMeitar Moscovitz氏がidやclassの名前をつけるひとつの方法を紹介している。短くまとまっており参考になる。同記事では次のテクニックが紹介されている。まず、名前を考える段階で次
CSSでグラデーションを実現する方法、主要ブラウザ全対応 | エンタープライズ | マイコミジャーナル
Robert’s talk Firefox 3.6 / Gecko 1.9.2のCSSにはグラデーション機能が実装されている。この機能を利用すると背景のみならず要素ごとにグラデーションをかけることが可能になり、画像を使うことなく手軽に美しいUIを実現することができる。 CSSグラデーションを使ってクールなボタンをつくる方法 Firefox 3.6でCSSグラデーションを使う方法 グラデーション実装はFirefox以外のブラウザでも実現されている。Operaはまだ正式サポートしていないが、近いうちにサポートが実現するとみられる。IEではIE 5.5のころからサポートしており、WebKitを採用しているChromeとSafariでもサポートされている。IE8から名前が変わっているが指定する内容は同じまま。 CSSグラデーションは便利な機能だが、現状ではIE、Firefox、WebKit (Ch
第1回 Twitterキホンのキホン｜gihyo.jp
皆さん、こんにちは！ ふじかわと申します。 新しいものにはすぐ飛びついて試してみる性分で、新しいWebサービスの話を聞くととりあえず登録しまくる日々です。今回は、そんな中でも近年まれに見る盛り上がりを見せるWebサービス「Twitter」をご紹介したいと思います。 Twitterってなに？ 図1 Twitterのトップページ。世界中のユーザーの今の状況が見られる 2006年からスタートした、海外のWebサービスです（図1、http://twitter.com/）。 しくみはとてもシンプル。「What are you doing?」（今何してる？）というたった1つの問いにひたすら答え続けるだけ。その答えが、自分とつながっている友人たちや、（設定によっては）Twitterを利用している全ユーザに発信されます。 基本的には発信することがメインなのに、そこから新たなつながりや交流が生まれ
GAE/J使うならこの設定をしておけ！ - 手抜きぷろぐらまのメモ帳
※2010/4/23 sessionのクリアについてご指摘頂き、追記しました。Google App Engine for Java(GAE/J)にて、どんなアプリを使う場合でも （自分的に）ほぼ必須となる設定ファイルのまとめ。 ていうか、リファレンス読めばいーんだけどさ １．sessionを有効にする & クリアの設定をする Javaでsession使わないケースなんてあるのか？ appengine-web.xml に 下記を追加 <sessions-enabled>true</sessions-enabled> GAE/Jでsessionを使う場合、このままだとDatastoreにsession情報が残ったままなので定期的にクリアするcronを設定する web.xml に 下記を追加 <servlet> <servlet-name>_ah_sessioncleanup</servlet-
TaskQueueをローカルでデバッグする方法 - ひがやすを技術ブログ
SDK 1.2.5からGoogle App EngineにTaskQueueが導入されましたが、ローカル(development server)でデバッグはできないと思っている人が結構いるようなので、やり方を書いておきます。 ローカルの環境では、Queueにaddしたタスクは、自動的には実行されず、Queueにたまっています。たまっているタスクを実行するには、http://localhost:8080/_ah/adminにアクセスし、左側のTask Queuesのリンクをクリックします。 すると、Queueの一覧が表示されるので、そこでQueueのリンクをクリックすると、タスクを実行する画面に遷移します。そこで、runのボタンを押すと、ローカルでQueueのタスクを実行できます。 Web ApplicationをDebug Asで起動しておけば、EclipseからDebugすることもできま
Google App EngineでH2 Database Engine使ってみた
Web技術を追ってHTML5, JavaScript, Flex, Adobe AIRのことをつらつらと 巷で話題になっているけど、Google App EngineでJavaがサポートされたことで、GroobyやJRuby、Scalaも動かせるようになりました。 Googleがそんなステキなことをしてくれていた陰で、H2はH2 Database Engine 1.1.111をリリースしています。 その変更履歴にこんな1文が。 Version 1.1.111 (2009-04-10) * In-memory databases can now run inside the Google App Engine. Google App Engineで、DBにはGoogle App Engine Datastoreを使わないといけなかった(?)んだけど、JavaサポートのおかげでRDBのH2(i
1emが何pxなのか自動的に計算する方法(Final) : やむにやまれず
2007年07月24日16:16 by 山崎泰宏 1emが何pxなのか自動的に計算する方法(Final) カテゴリJavaScript Tweet sparklegate Comment(0)Trackback(1) クロスブラウザでなおかつ以前より簡単な方法修正：ソースコードに余計な行が入っていたのを削除しました。 以前はgetComputedStyle()に取り憑かれていたのだけど、一つ前のエントリを書いている最中に「あ、もしかして」と違うことを思ったので早速実験してみたらうまくいきました。 1emのdivセクションを設けてあげれば、clientWidthかclientHeight辺りが良い感じにpxの値を返すようです。 それだけ！ <html> <head> <title>em2px</title> <script language="javascript" type="text/j
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS段組1：スタイルシートだけで段組を作る方法 - [ホームページ作成] All About![CSS段組1：スタイルシートだけで段組を作る方法 - [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/31482c59a0532bdfd65d75838f05b81f8275ed0e/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F2%2F3%2F8%2F3%2F6%2F201711261232%2Ftopimg_original.png)
http://www.designwalker.com/2010/05/css3.html
サービス終了のお知らせ