【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方
「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド リボーテ -Re:beaute-様のサイトもありがたいことに、このまとめ記事に取り上げて頂いています。 いろいろなメディアに取り上げていただく中でのフィードバックとして、「twitter bootstrapがレスポンシブWEBデザインに便利なのはわかっているけど、どうやったらbootstrapっぽくないデザインにできるのかわからない」という声をよく聞きます。 僕も最初はそう思っていました。 一回触ってしまえば、
Sasha
Marsactu.fr vous l’a déjà raconté, les créatifs qui avaient travaillé pendant plusieurs semaines sur l’appel d’offre pour la création du logo et de l’identité v isuelle de Marseille 2013 avaient très, très mal pris son annulation. Lors d’un conseil d’administration, en Avril dernier, Bernard Latarget, le patron de 2013 avait purement et simplement déclaré l’appel d’offre « infructueux », sans aucu
RedLine Magazine : 印刷用CSSのお話
印刷用CSSのお話 最近担当したサイトでは印刷用CSSをたいがいセットにしてます。同業者の方だと経験あるかもしれないですが、昔の鬼級テーブルレイアウトの頃は言われた事なかったんですがCSSを使い始めてから「背景が印刷できない」と、よく言われました。「ブラウザの設定で『背景も印刷する』にチェック入れると出てきますよー。デフォルトではインク節約仕様になってるんすねー（嘘かホントかは知らない）あはははー」とか返してました。 デフォルトの状態で印刷できないってのは問題あるだろってのはもちろんちゃんと分かってたんですよ。ここは背景扱いにしたらデフォ状態で印刷したらエラい事になるぞ、とか使い所の選別はしてましたし。まぁでも「あなた、なんでもかんでも画像化するの大好きなクセに検索対策っ！検索対策っ！さっさと検索対策～！って言うじゃん」とか鬱憤も溜まってました。 印刷用のCSSを用意するようになってからは
[CSS]実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティス
実用的なものからマニアックなものまでリスト要素をスタイルするベストプラクティスをDev Snippetsから紹介します。 Styling your Lists: 20+ Brilliant How to's and Best Practices
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="
100%ピュアCSSのレイアウトサンプルが見られる『750 pixel Pure CSS Layouts』 – creamu
CSSのサンプルから簡単にサイトが作りたい。 そんなあなたにおすすめなのが、『750 pixel Pure CSS Layouts』。100%ピュアCSSのレイアウトサンプルが見られるサイトだ。 このサイトでは、750px、900px、および100%（ブラウザいっぱい）のサイズのCSSレイアウトがたくさん紹介されている。 サイドバーも左だけのもの、右だけのものや、3カラム、4カラムなどがあってとても参考になる。 CSSはリンク先のソースを見ればOKだ。 100%ピュアCSSのレイアウトサンプルが見られるサイト、チェックしてぜひ使ってみてはいかがだろうか。 いろいろとインテリアショップを見に行って部屋のレイアウトを変えてみた。すごくよくなって気持ちいい☆
今回のmixiのリニューアルについて - 専門家に聞く [All About プロファイル]
Web制作・クリエイティブ どこがどう良くなったんでしょうか？ 一見のパッと見た目は印象が良くなったかもしれませんが、長時間使い続けるユーザーからすると、見づらく疲れるデザインで、メリハリがないため、エリア視認性がとても悪く、情報把握が非常にしづらいのですが。 専門的にどうなのか詳しく解説していただきたいです。 質問者│サリエル・東京都・男性・35歳 はじめまして クロスウェーブの鈴木です 最初に画面が公開された時は期待したのですが、確かに見づらいものがありますよね。 CSSでのコーディングが中心になり、今後の機能追加でのデザイン追加等が容易になるなどのメリットが運営者側にはあったと思いますが、これではユーザー側のメリットがわかりづらいものがありますよね。 今後の修正に期待していますが・・・ 私の環境でも崩れる場面があり使いづらいです。 評価ありがとうございます 「CS
ふつうに横三角 - ぼくはまちちゃん！(Hatena)
ＣＳＳで横三角。「半キャラずらし」 (インターネット帳面) 今回はお題の通りインターネット帳面でもやってる「ＣＳＳで横三角をやる方法」。２バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。 ↑こんな記事があって、ちょっと面白かったので、 参考までに、ふつうの横三角のコードも書いておきますね！ » (») « («) ▷ (▷) ▶ (▶) ◁ (◁) ◀ (◀) そうそう、この中でも » って結構使えるよ！ よくサイドのメニューとかで、CSS を使って <li> の背景左端に、三角っぽい画像を設定したりするよね！ でも » をつかえば、画像がなくてもこんな感じ！ » Diary » Bookmark » Fotolife »
フリーの超クールCSSグラフまとめ１０個:phpspot開発日誌
DHTML Site - Free CSS Graph Resources Generators Often in web-based applications, developers want to be able to display on the fly graphs. フリーのCSSグラフまとめ１０個が紹介されてました。 CSSでいろいろとできるものですね。 Ajax MGraph PlotKit CSS Javascript Bar Charts Vertical Bar Graphs with CSS and PHP CSS For Bar Graphs CSS Vertical Bar Graphs Displaying Percentages with CSS Dynamic Pie Chart with CSS Real World Bar Graphs (with so
class属性とid属性に関する議論リンク集 - 徒委記
class属性とid属性に関する議論リンク集 発端 過去の経緯や参考情報 2007年3月18日 2007年3月21日 2007年3月22日 2007年3月23日 2007年3月25日 2007年3月28日 「私はheaderやfooterはidじゃなくてclassだと思うけど、皆さんはどう思います？」 (CSS Nite公式ブログでのレポートより) 発端 CSS Nite Vol.18交流会「HTMLへの回帰」 CSS Nite Vol.18 謝恩会「HTMLへの回帰」の資料公開 過去の経緯や参考情報 CSS Nite Vol.3の企画「木達さんに聞いてみよう」 id属性とclass属性 | Web標準Blog | ミツエーリンクス Tips/WebPage/class と id の違いとは？ - outsider reflex idとclassの違い 2007年3月18日 WEBTECH
第1回 ひきついだサイトはdivでいっぱい！
私は制作会社に身を置きながら、テクニカルライターとして執筆をしています。おそらく制作だけやっていたら、日々の仕事に追われてしまっているところですが、リファレンスやチュートリアルなどの執筆を通して細かい機能を探る中で「これって、あれをするときに使えるじゃん！」と、ひらめき、今までのローテクな方法にうんざりすることがあります。 今回から数回にわたり、それらの中からピックアップして「日々の作業効率を高めるDreamweaverの小技」と題してご紹介します。 いわゆる「Webオーサリングソフト」としては圧倒的なシェアを誇るDreamweaverですが、その一方、まだまだ「ハンド・コーディング派」も根強く、、ある意味、ハンドコーディングの方がエライ……みたいな“幅を効かせて”いるところがありますよね。最終的には、Dreamweaverまかせでなく、ソースをきっちりチェックするのは当然ですが、テキスト
CSSと一枚の画像だけで透明感のある角丸パーツをつくる方法 | S i M P L E * S i M P L E
※ 下記の記事に誤りがありました。謝罪＆修正記事はこちらへ。 あいかわらず流行っている角丸系パーツですが、新しいテクニックが紹介されていたのでエントリー。 » Even More Rounded Corners With CSS – Schillmania.com 一つの透過処理されたPNG画像とCSSだけで下のようなパーツを作れてしまいます。 PNG画像を縮小したりしているみたいですね。もちょっと複雑なデモページはこちら。スクリプトのダウンロードもできます。 » Even More Rounded Corners (Fluid, Alpha-transparent, Single Image Approach) Using CSS 透過処理もされていてなかなかきれいですが、一長一短があるアプローチなので用途に合わせてお使いください。
そろそろCSSハックの良し悪しについて考えてみる（書式編） | Blog hamashun.com
関連リンク そろそろCSSハックの良し悪しについて考えてみる（書式編） そろそろCSSハックの良し悪しについて考えてみる（管理編） おまけ付き Re:CSS の用途をわざわざ (X)HTML に限ることはない スターハックに端を発するアレコレ スターハックに端を発するアレコレ まとめ編 フルCSSでサイトを制作する際に、まだまだ避けては通れないのがCSSハックです。 巷には色んなハックが溢れていますが、今回は良いハックと悪いハックを『書式』をキーにして考えてみたいと思います。 なお、ハックはあくまで最終手段であり、使わないにこした事は無いという事を、事前に書いておきたいと思います。 また、一部CSSハックと呼ぶには語弊があるテクニックもありますが、ブラウザ実装の差異に対する技術、といった意味合いで、この記事ではハックで統一しています。 バリデータに通るか否か まず最低条件として、バリデータ
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
もう、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
スタイルシートを分けて管理する方法をまとめる - 2xup.org
comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日本語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Internet Explorer 7 running side by side with IE6. (standalone)
Scriptを使わないCSSエフェクト、Tipsいろいろ - DesignWalker
HTML2CSS：HTMLを解析して空のCSSを生成するブクマ | oitake blog
電脳狂想曲 レイアウトの小技