新しい CSS レイアウトモジュール
新聞や雑誌の記事のようにコンテンツを複数のカラムに分けて、テキストがカラム幅に応じて隣の列に折り返し整列していく段組みレイアウトです。 下記の例は、画面幅を 300px で分割してカラムコンテンツを折り返し表示するように指定しています。カラム列の境目の間隔は 30px で線幅 2px の破線で区切られます。 【CSS 】 #columns { max-width: 1000px; /* 画面幅は％か、最大幅を指定*/ column-width: 300px;/* カラム幅（％値は不可）*/ column-gap: 30px; /* カラムの間隔*/ column-rule: 2px dotted #333; } /* カラム間の区切線（border と同じ書式)*/ 【HTML】 <article id="columns"> <p>カラム・・・・</p> </article> サンプル表示
Webでの文字のレイアウトについて - 2011年に試してみたこと - - くらげだらけ
2011年の後半あたりから文字や文字組に興味を持ち始めました。元々、大学時代に文字についての勉強をちゃんとできていなかったことが、ある種のコンプレックスのように感じていました（今もそうです）。そのうえで「デザイナー」という肩書きを持っていることを嫌って、名刺にデザイナーではなく「制作」とわざわざ入れたこともありました。 そんなこんなで過ごしながら今年読んだ本が「文字をつくる―9人の書体デザイナー」と「文字講座」という本でした。どちらの本にも文字がどんなふうにできたのか、どんな想いでできたのかといったことが書かれていて、非常に面白かったです。それから書体や文字組に関する本を読んだりして少しずつですが勉強している毎日です。 最近では電子書籍が少しずつ読めるようになって来ました。私もiPhoneで読んだり、iPadで読んでみたりしています。私もWebに関する仕事をしているので、最近ではWebの文
40 Cool CSS Animation Examples – Bashooka
Gif Style CSS3 Animation By Jascha Goltermann Pure CSS One Div Weather Animated Icons By Fabrizio Bianchi Solar System animation – Pure CSS By Malik Dellidj Gif animation + CSS animation + Blend modes By yoksel Indatus CSS Animation By Patrick Hill Material Design Hamburger By Chris Wheatley Stats animation By Jonas Badalic CSS+SVG Pacman By buschidos Cubes CSS3 Animation By Nate Wiley Delightful
CSSでのフォント指定について考える（2014年）｜DTP Transit
結論1：アルファベットでウエイトなしだけでも、すべてのモダンブラウザに対応可能です。ただし、旧バージョンのSafariやFirefoxでは対応がまちまちであったため、それらに対応するには併記します。 游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。 疑問2：「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」のどちらを記述すればいいのでしょうか。 「ヒラギノ明朝 Pro」を改訂し、JIS X 0213:2004の例示字体に対応させたものが「ヒラギノ明朝 ProN」です。 参考： ウィキペディア - ヒラギノ 「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い CSSのfont-family指定はこれで決まり！（2013春） 結論2：新しい字形に対応をしている「ヒ
DIVERSE SYSTEM - JAPAN - C84 三日目 西2 あ41a -
DVSP-0097 | Price: 1,000円 / 1,200円 (shop) | 委託店舗: メロンブックス | 通信販売: Diverse Direct
「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点 - エンジニアtype
「今のレスポンシブWebデザインは誤解されている」英の著名デザイナーAndy Clarke氏が話す3つの修正点 2013/05/31公開 《Fashionably Flexible ワークショップレポート》 2013年4月6日に、Web Directions East主催による、Andy Clarke氏のワークショップが東京ミッドタウンで開催された。その内容を、主催であり通訳をした菊池崇がレポートをする。 ■ Andy Clarkeって誰？ 世界的に著名であるものの、日本では一部のコアなWebデザイナーでないとその名を知らない人がいるので、まずはAndy Clarke氏について紹介したい。 Andy Clarke はイギリスのウェールズ地方在住のWebデザイナーである。1990年代後半より、Webサイトの制作をはじめ、そのデザインセンスとCSSの先進性を活かしたデザインの取り組みで注目を浴
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック：ズルいデザイン（1）（1/2 ページ） デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。 この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 ズルいデザインはSassとCompassを利用し
なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | ゴリミー
今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3コラムベースのウェブサイト。 少し幅を狭めると、下にあったコンテンツが右サイドバーに移動し、右サイドバーにあったコンテンツが下に移動した。 さらに狭めてみると、右のサイドバーが完全に無くなった。 さらに狭めると今度は左のサイドバーが消えた。 ブラウザの限界まで狭めてみると、各パーツの幅も狭まってこのような形に落ち着いた。 これを試している時、各要素の動きがあまりにも滑らかでものすごく感動した。皆さ
Gorgeous Implementations of CSS3 in Web Design | Top Design Magazine - Web Design and Digital Content
Writen by Bogdan+ / Comments Off on Gorgeous Implementations of CSS3 in Web Design Thanks to the designer’s need to always create more sophisticated and gorgeous designs, their tools had to evolve with them, and between these tools, CSS3 is one of the most important. Using CSS3, the web designer is able to create virtually anything from responsive websites and all the way to websites that looks li
[CSS3] 100+Best CSS3 Tutorials and Tricks for Design Beautiful Websites - 美しいWebサイト制作のための、CSS3を使ったチュートリアル100個
[CSS3] 100+Best CSS3 Tutorials and Tricks for Design Beautiful Websites – 美しいWebサイト制作のための、CSS3を使ったチュートリアル100個 Pocket Tweet 美しいWebサイト制作のためのCSS3チュートリアルまとめ記事。よくあるまとめではありますが、紹介されてる件数が100件オーバーという点がなかなかホットです。よくこれだけの数集めたなぁと。特にカテゴリ分けはされておらず、ズラーっと並んでます。見てるだけでも疲れますが、コレ系のまとめ記事は数＝有用性ですからね。参考にさせてもらいます。 100+Best CSS3 Tutorials and Tricks for Design Beautiful Websites
[CSS]この発想はなかった！inputとlabelを使って実装する美しいデザインのアコーディオン
パネルが開いた+ホバー時 パネルが開いている時のアローは上向きに変わります。 デモでは上記のチェックボックス版だけでなく、ラジオボタン版などもあります。 デモページ：チェックボックス版 デモページ：ラジオボタン版 デモページ：チェックボックス版・デフォルトオープン 実装 HTML 一つのアイテムに含まれるのは、チェックボックス、ラベル、コンテンツの3つです。それらをdiv要素で内包します。 <section class="ac-container"> <div> <input id="ac-1" name="accordion-1" type="checkbox" /> <label for="ac-1">About us</label> <article class="ac-small"> <p>Some content... </p> </article> </div> <div> <
[CSS]CSS3を使って美しい検索フォームを実装するチュートリアル
CSS3の角丸やグラデーションを少しだけ使って、美しい3種類（ライトグレー・ダークグレー・グレー）の検索フォームを実装するチュートリアルを紹介します。 デモページ 実装 HTML デモ3種類のHTMLは基本的に全て同じで、親のdiv要素のclassが異なるだけです。 <div class="lighter"> <form> <span><input type="text" class="search rounded" placeholder="Search..."></span> <span><input type="text" class="search square"><input type="button" value="Search"></span> </form> </div> <div class="dark"> <form> <span><input type="text"
[CSS3] CSS3 Facebook Buttons - CSS3で作ったFacebookっぽい汎用ボタン
[CSS3] CSS3 Facebook Buttons – CSS3で作ったFacebookっぽい汎用ボタン Pocket Tweet CSS3で作られたFacebookっぽいボタン。ダウンロードはGitHubから。複数ボタンのグルーピングやアイコン付与もできるようで、なかなか汎用的に作ってあるようです。なんかこう、技術的に特にスゴいとかソレ系のアレではないんだけど、最近どのWeb屋さんもFacebook関連の案件多いだろうから、こういうの意外と重宝するかと思って紹介。ボタンとは全然関係ないけど、Facebook関連のMeta情報入力とかなんつーか面倒っすよねー。 CSS3 Facebook Buttons
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Button Styles Inspiration
CSS Winner - Web Design Awards - CSS Award Gallery for Website Design Inspiration - Website Awards
Robby Leonardi | hey@rleonardi.com
xpressive.org
[CSS3] CSS3 Pictogram Button - ピクトグラムを使ったイメージレスボタン