[B! webdesign][css] YUKI14のブックマーク

YUKI14 id:YUKI14

webdesignとcssに関するYUKI14のブックマーク (53)

少ない手間と知識でそれなりに見せる、ズルいデザインテクニック
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック‥ズルいデザイン︵1︶︵1/2 ページ︶デザインが自分でイイ感じに作れたらいいなあというプログラマのみなさん。少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します Webプログラマ、Webエンジニアの皆さんが、個人で作るWebサービスやハッカソンなどで、短期間に集中してサービス開発してローンチしたいときに、もうちょっと自分でイイ感じにデザインできるといいなあという声をよく聞きます。この企画は、そんなプログラマが、少ない手間で簡単に、ちょっといい感じのデザインに見せるための、ちょっとした小ズルいTipsを紹介します。︵注︶このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。ズルいデザインはSassとCompassを利用し
YUKI14 2012/12/08
CSS

web

Webサイト

web制作

webデザイン

design

webdesign

デザイン
リンク
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみるこのリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
YUKI14 2012/03/28
webデザイン

design

webdesign

css

html
リンク
CSS Frameworkを持つ - ゆーすけべー日記
例えば、Webサービスのフロントエンドのコードを書き始める時にまず何をするでしょうか？デザインスケッチや画像を元にHTMLとCSSを記述していくことになると思います。少なくとも僕はそうですね。理論的にはHTMLだけでもWebサービスを作ることはもちろんできますが、見た目を少しでも調整したいとなるとCSSが必要になります。例えばCSSを使わないHTMLの場合、いくら単純なレイアウトだとしても、デフォルトのリンクの色を変えたかったり、フォントを変更したかったり、要素ごとの余白をどうにかしかったりと最低限の要望が出てきます。こうした最低限のCSSに対するニーズは共通化して自分なりのCSS Frameworkとして持っておくとよいと思います。近頃、一からCSSを記述しなくなったのもこうした考え方のおかげです。今Web上で配布されて利用可能なCSS Framworkが非常に増えて
YUKI14 2012/03/17
framework

CSS

Web制作

webデザイン

webdesign

Development

CSS Framework

デザイン
リンク
Components · Twitter Bootstrap
Sleek, intuitive, and powerful front-end framework for faster and easier web development. Download Bootstrap GitHub project Examples Extend Version 2.3.2
YUKI14 2012/03/05
CSS

Development

twitter

html

web

design

webdesign
リンク
0 から始めるHTMLとCSSの基本・基礎-webデザイン入門-
私の周りでwebデザインが出来る人ってあんまりいません。でも﹁webデザインってどうやるのー？﹂とか﹁私もやってみたいんだけど…﹂とかの声はよく聞きます。皆興味はあるのに”webデザインは難しい”と思って始められないんじゃないでしょうか。そんなこれからwebデザインを始めたいビギナーさんに向けてHTMLの基本・基礎をまとめてみます。真新しいことは特にないほんとに基礎です〜＞＜ by‥fweez まずはじめにとりあえず用意するもの2つ HTMLの基本 HTMLとは？ 1.DOCTYPEの宣言 2.基本的なタグ 3.<body>の文書構造 CSSの基本 CSSとは？ 1.CSSの読み込み方法 2.指定パターン 3.marginとpaddingの違い 4.ブロック要素とインライン要素応用してwebページを作ってみるまずはじめに一口にwebデザインといっても色々なことがあると思うのですが大
YUKI14 2012/02/14
html

web

webdesign

Webデザイン

css

web制作

デザイン
リンク
犯してはいけないHTMLタグの過ち10個
︻追記︼ HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。︻追記︼ HTML5では﹁Images whose contents are not known(どのような内容かわからない画像)﹂に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
YUKI14 2011/04/20
html

PHP

CSS

webデザイン

web

webdesign

web制作
リンク
[CSS]コピペで使える、テキスト周りをかっこよくするCSS3のエフェクト集
CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste [ad#ad-2] 対応ブラウザはCSS3を使用しているため、CSS3をサポートしているブラウザのみで、一部のものはWebkit系（Chrome, Safari）のみとなっています。 Letterpress（レタープレス） Small Caps（スモールキャピタル） CSS Coupon（クーポン券） Stitched（ステッチ） Gloss（グロス） Stroked Text & @font-face（@font-faceを使ったストローク） Double Stroked Text（二重のストローク） Letterpress（レタープレス）レタープレスのエフェクトには、3つのカラーが必要です、背景のbackground、テキストのcolor、テキストの影のtext-sha
YUKI14 2010/10/26
font

CSS

ブラウザ

color

webdesign

チュートリアル

サンプル

CSS3

css3

まとめ
リンク
http://www.designwalker.com/2009/01/table.html
YUKI14 2010/09/04
table

webデザイン

まとめ

webdesign

html

css

web制作
リンク
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ︵Safari︶のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。それを下記のように美しく適用されるようにします。角丸とボックスシャドウをこういう風にしたい左‥角丸と外側にシャドウ、右‥角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
YUKI14 2010/07/04
角丸

css3

CSS

webデザイン

webdesign

web制作
リンク
長い文字列が続いて文字がはみ出してしまうのを防止するCSS:phpspot開発日誌
Wrapping Long URLs and Text Content withCSS ? Perishable Press 長い文字列が続いて文字がはみ出してしまうのを防止するCSSが公開されてます。 CSS2/3, Opera4-7, Mozilla, IE5+ 用にクロスブラウザで動作するようにCSS例が示されていて参考になります。通常だと文字がはみ出してしまうのを、はみ出さないようにしてくれるCSSです。ハミ出しを防いでくれます。対応したつもりが実は特定ブラウザだけっていうことがよくありそうなこの現象、この対策で簡単に対応出来そうです。関連エントリ JavaScript使ってないのに使ってる風のピュアCSSなテクニック集便利なＣＳＳテクニック30選 CSSリストに関する5つのテクニック集
YUKI14 2010/06/08
CSS

テクニック

webデザイン

tips

webdesign

web制作
リンク
[CSS]実例から学ぶCSS3の効果的な使い方
CSS3の角丸、テキストシャドウ、ボックスシャドウ、RGBA、グラデーションなどを効果的に使用したサイトをSix Revisionsから紹介します。
YUKI14 2010/06/08
*あとで読む

グラデーション

角丸

webデザイン

webdesign

CSS3

tips

CSS

Web制作
リンク
テーブルやリストを使用した価格表のデザイン集
プロダクトやサービスを販売しているサイトにとって非常に重要な価格表のデザイン集を1st Web Designerから紹介します。 40 Fantastic Pricing Tables for Your Inspiration 価格表はその設計を決しておろそかにするものではなく、直観的で使いやすく、ユーザーに最も重要な情報を提供する非常に重要なコンテンツです。上記サイトでは、シンプルなテーブルからフューチャーリストなど優れた手段で価格表を提供しているサイトが多数紹介されています。その中から、下記にいくつかピックアップしました。傾向としては、ページ幅いっぱいに配置し、お勧めを目立つようにしています。
YUKI14 2010/05/31
デザイン

webデザイン

design

webdesign

CSS

table

テーブル

料金表
リンク
http://www.designwalker.com/2010/05/css3.html
YUKI14 2010/05/19
*あとで読む

CSS

css3

まとめ

webデザイン

webdesign

web制作
リンク
[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3
<textarea name="code" class="css" cols="60" rows="5"> .box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari and Chrome */ border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ box-shadow: 10px 10px 20
YUKI14 2010/04/14
css3

*あとで読む

CSS

webデザイン

webdesign

web制作
リンク
CSSでマルチカラムレイアウト
はじめに本連載では、﹁クロスブラウザに対応したデザインテクニック﹂をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト︵段組レイアウト︶を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した﹁floatプロパティ﹂および﹁positionプロパティ﹂を利用した、﹁フロート型﹂と﹁ポジショニング型﹂のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。対象読者XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。必要な環境︵X︶HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
YUKI14 2010/03/20
CSS

*あとで読む

webデザイン

webdesign

html

web制作
リンク
iPhone向けサイト構築基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、﹁iPhoneとツイッターで会社は儲かる﹂の出版記念と、巷で話題の﹁基礎文法最速マスター﹂ブームに便乗して、iPhone︵iPod Touch︶向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記‥ iPhone向けサイト制作の書籍を執筆しました！既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介とコードの解説をしています。 iPhone向けサイト制作の入門書に最適です。﹁HTML5＋CSS3で作る魅せるiPhoneサイト﹂基礎編対象ブラウザはMobileSafariですレンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張︵CSS︶があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
YUKI14 2010/02/15
*あとで読む

iPhone

基礎文法最速マスター

tips

webデザイン

webdesign

CSS

html

web制作
リンク
[CSS]CSS3で何ができるの？　という時にみておきたいサイト集
角丸、ドロップシャドウ、グラデーションなど多彩で面白いスタイルをCSS3では簡単な記述で実装できます。 CSS3でいったい何ができるのか、どのように記述するのかなど、ベーシックなものから実践的なテクニックまでサンプルやコードなど実装例が掲載されているサイトを紹介します。
YUKI14 2010/02/10
CSS

サンプル

まとめ

webデザイン

webdesign

参考

*あとで読む
リンク
フッタをブラウザ下部に固定配置するCSSテクニック – creamu
フッタをブラウザ下部に固定配置したい。そんなときにおすすめなのが、﹃cleanstickyfooter﹄。フッタをブラウザ下部に固定配置するCSSテクニックです。 IE6とそれ以前のブラウザ用に、ハックは1つしか使っていないとのこと。min-heightの部分のハックのようですね。ほかには同様のテクニックに以下のものがありますが、前者はwidth:100%のフッタには対応していないようです。 CSS Sticky Footer ブラウザの下部にフッターを固定表示する﹃CSS Sticky Footer﹄対応ブラウザは以下の通り。・Firefox (2, 3, 3.5) ・Internet Explorer (6, 7, 8) ・Safari ・Opera ・Google Crome ぜひ使ってみてはいかがでしょうか？ cleanstickyfooter 今日もいい天気ですね〜。タス
YUKI14 2010/02/08
CSS

webデザイン

design

webdesign

web制作

フッター

Tips
リンク
直感でWebサイトを作成できる6つのフリーWebサービス
気になって調べたのでメモします。 HTMLやCSSの知識を必要とせず、ドラッグ&ドロップで作成するなど直感操作でWebサイトを作成できるフリーのオンラインサイトビルダーをいくつかご紹介致します。基本的に、作成したサイトはそのサービスのサブドメインまたは独自ドメインを登録して運営します。使用して気が付いた点をメモしておきますが全ての情報ではありません。 yola ネタ帳さんの記事︵有料ソフトとデザイン作業を無力化させる30のブックマークまとめ︶で知ったサービス。直感で操作、独自ドメイン︵yulaで取得、年19$程度︶の利用も可能。日本語も文字化けしません。 yola Moonfruitドラッグ&ドロップで作成。HTMLもCSSの知識も不要。日本語は使えませんが、上記のように、画像や特殊なテキスト部分も変更できる。 Moonfruit weebly独自ドメインの利用も可能。メール
YUKI14 2010/01/28
サービス

web

html

CSS

webdesign

WEB制作
リンク
cssの情報・まとめ
cssの情報まとめです。ローカル環境にストックしていた情報を開放してみますのでシェアして頂ければ幸いです。内容は結構偏っていると思いますので参考程度になさってください。全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。ツールオンラインのcssツール。 CSS Validation Service / W3C検証サービス日本語版RoundedCornr / 角丸のHTML・CSSコードを生成してくれるCSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できるCSS Builder / オンラインでスタイルを生成可能Spiffy Box / cssによる角丸を簡単に生成The Box Of
YUKI14 2010/01/20
CSS

まとめ

web

webデザイン

webdesign

お役立ち

これは便利

web制作
リンク
1 2 3 次のページ