This is a Headline ブラウザはChrome, SafariのWebkit系でご覧ください。 各スタイルとともに、スタイルシートを紹介します。 とその前に、HTMLはごくシンプルです。 <h1 class="vintage">美しい日本語</h1> ヴィンテージ風にスタイルします。 .vintage{ background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat; text-shadow: 5px -5px black, 4px -4px white; font-weight: bold; -webkit
ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 ※追記6/24 HTMLのマークアップをpからh3に置き換えました。 見出し(Headline)のサンプル集 色やボーダーサイズ等の装飾部分は お好みで編集してください。 見出しサンプル01 .selector01{ border-left:7px solid #e3297d; padding:.6em .8em } 見出しサンプル02 .selector02{ border-left:7px solid #ccc; border-bottom:1px solid #ccc; padding:.6em .8em } 見出しサンプル03 .selector03{ bor
【第27回 HTML5とか勉強会レポート】 LESSやTwitter Bootstrapで簡単デザイン：D89クリップ（42） LESSやTwitter Bootstrapなどのツールを利用した、スマートなデザイン方法など、デザイン面にフォーカスされたHTML5とか勉強会レポート LESS、Twitter Bootstrap！ 2012年3月13日、ニフティで「第27回 HTML5とか勉強会」が開催されました。HTML5とか勉強会は、HTML5に関心のあるエンジニアやデザイナー向けの勉強会です。今回のテーマは「リッチクライアントをデザインする」でした。 HTML5やCSS3を利用することで、インタラクティブなコンテンツを作れるようになりました。その代わりにコンテンツをどうデザインするか、どうアプローチするかといったことを、デザイナーだけでなくデベロッパーも意識する必要があります。セッション
こんなエントリーは去年末か年明けに書いておけ！って思いますが、blogを書く練習としてまとめます。 これから列挙するツールを使う事により、去年は手を動かす事の楽しさを再確認。 いままでダルかった作業が楽になるだけではなく、HTMLをキレイに書けたり構造を考えるようになったりと一石二鳥。 SASS and Compass 全俺が感動し、咽び泣くほど無くてはならない存在となったHtmlコーディングの革命児。 なぜすぐに導入しなかったのかと過去の自分に言いたいぐらい！ いまさら解説はいらないと思いますので、お世話になったサイトをご紹介いたします。 CSS書くならCompass使った方がいいよ。SASS使ってる人なら特に。 Sprite画像でもう悩まない？！SassとCompassで速攻Sprite画像を作る方法に感動！ | バンクーバーのうぇぶ屋 CompassでCSSスプライト[to-R] C
先日のプログラマ向けデザイン勉強会で発表された「少ない手間と知識で”それなり”に見せる、ズルいデザインテクニック」（by 赤塚さん）の中に書かれていたSassのMixinをRailsで使えるGemにしてみました。 zurui-sass-rails: https://github.com/mahm/zurui-sass-rails sample: http://zurui-sample.herokuapp.com/ うおおずるい！ｗ RT @mah_lab: .@ken_c_lo さんのズルいデザインをGemにしてみました。 github.com/mahm/zurui-sas… サンプルはこちら zurui-sample.herokuapp.com (based on github.com/machida/Custom…) — TAEさん (@ken_c_lo) 11月 7, 2012 @m
深津さんの記事で取り上げられていて、Google Mapsアプリで使われているという、iOSのNimbusフレームワークをざっくり調べた。ソースコードを眺めて、何やってるのかなぁ？！使えるのかなぁ？！という日本語メモを書いています。ソースコードとオフィシャルドキュメントの構造に対応しています。 文章の中身は個人的なものなので適当ですいません。 テーブル生成を簡単にしてくれたり、外部アプリ連携コードを楽できたり、画像ビューワー機能の下地を提供してくれたりします。特定ユースケースに依存してる感があって、若干クセがありますが、うまくハマったら良いと思います。 Attributed Label 【特徴】 UILabelのサブクラス 【何に使うと美味しいの？】 自動リンク対応のリッチテキストViewが実現できる 【評価ポイント、雑感】 英語向けかもしれないので日本語で役に立つか Badge 【特徴】
CSS3初心者でも簡単に利用でき、上級者でも実装のヒントになる、ページでよく使うパネルやボックス、ボタン、バーなどをbox-shadowを使って実装するスタイルシートのスニペットを紹介します。 10 Creative Techniques Using CSS3 Box Shadow 10個のスニペットは、Apple, Pinterest, Facebookなどで使用されているエレメントのHTML/CSSを簡略化したものです。 1. スクロールしてもバーを常に最上部に表示 2. サブナビゲーションのドロップダウン 3. シャドウを使った光沢が美しいボタン 4. 吹き出しスタイルの通知パネル 5. Appleのページラッパー 6. Appleのコンテンツボックス 7. Appleのフィーチャーリンク 8. 画像にさりげなくシャドウを添える 9. フォームの入力を目立たせる 10. エラステック
作成：2013/02/4 更新：2014/11/01 Web制作 > 基本的なところを簡単に、楽しく覚えたい 自分でサービス作ったり、会社や違う職種でも 色々と「基本」はおさえておきたい 今回はサイト制作に必要な「基本的な知識・情報」を、分かりやすいサイトを中心にまとめました。必ずおさえておきたいスキル・知識です。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．HTML5 ２．CSS ３．レスポンシブ ４．配色 ５．視線誘導 / 心理学 ６．インターフェース / ユーザビリティ ７．SEO ８．ディレクション ９．アクセス解析 １０．WEBマーケティング １１．コピーライティング １２．ソーシャル １．HTML5 HTML5って何？ HTML5とは何かを簡単にまとめてみた - Yahoo! JAPAN Tech Blog Canvasについて知っておく
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
