CSS(スタイルシート)の基本、小技、テクニック総まとめ
CSSの基本や使える小技テクニックなどを幅広くまとめました。以前書いて今もそこそこアクセスがある「CSSの知識をもっと深める30+2の小技テクニック集｜Webpark」という記事があるのですが、2年近く前の記事ですしパワーアップさせて作り直しました。 恐らく過去最長の記事ですので目次を作りました。クリックするとするりと移動します。基本的な内容が多いですが、お役に立つ項目があればうれしいです。 ということで順番に説明していきます。 1. 全般的なこと 1-1. CSSリセット ブラウザごとでデフォルトのスタイルは異なっています。その違いをそのままにしておくと、後でブラウザ間の表示の違いに悩むことになり、どこが原因か分からないとイライラしてしまいます。 そんなことのないように、いったんデフォルトのスタイルをリセットしてしまおうというのがリセットCSSです。 方法は色々ありますが、個人的には一番
Front-end CSS Frameworks
UI is the vocabulary of the web. Semantic empowers designers and developers by creating a language for sharing UI. Lose the Hieroglyphics: Semantic is structured around natural language conventions to make development more intuitive. Have a conversation with your components: Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.
色彩センスのない人がそれなりのWebサイトを作るための秘訣3つ | 高橋文樹.com | デザイン
この投稿は 11年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 前回の記事に続き、僕と同じくデザイン力のない人のためのサバイブハウツーです。Webサイトを作っていると、デザインをしなくてはならないのですが、その際にとても困るのが色の決定です。 色使いというのはとても大事なもので、「ダサいなー」と思われる理由のトップクラスに位置するものです。デザインというのは上手くいっている場合は気づかれず、失敗したときに目立ちます。 みんな大好き愛生会病院 僕はいままで某大手企業の研修や某デジハリなどで沢山の初心者を見てきましたが、確実に言えることは99%の人に色彩センスはないということです。「好きな色決めてね」というと、99%の人がクソのような色を使ってきます。これは当人がダサいかダサくないかにかかわらず、99%色彩センスがありません。 Webで色彩セ
Webデザインの評価項目をつくる
Webデザインの評価項目というのを、ディレクターやデザイナーの方々はつくっているでしょうか？ 評価項目があると、デザイナーやディレクターだけでなく、クライアントにとってもデザインの基準がわかりやすくなり、目標地点が明確になります。 今までつくったことがなかったという方は、この機会につくってみてはどうでしょうか。 改めて、Webデザインの評価項目をつくるメリットです。 デザイナー、ディレクター、クライアントにとって、デザインを評価する共通認識を持つことができ、三者間で認識のブレが少なくなる デザインの優先すべき項目（もっと企業の色を出したい、など）がわかりやすくなり、それをデザインに反映させることができる デザイナーは、すでに満たされている要素にそれ以上時間をかけることがなくなり、足りない要素に注力できる デザインの評価項目とデザインエレメント一覧表 私はWebデザインの評価項目を、以下のよ
ホーム - ウェブパッケージ
整理され、シンプルで、使い勝手が良い。メトロスタイル（カードスタイル）は、すべてのメインコンテンツが配置されたセクション（カード）を使ってサイト構造を構築するという原則に基づいています。
これがあればWebアプリケーションのデザインがすいすいできる·Bootstrap MOONGIFT
Bootstrapは今風のWebアプリケーションを開発するのに最適なデザインパーツを提供するCSSテンプレート。 BootstrapはCSS製のオープンソース・ソフトウェア。ITエンジニアが苦手にするのがWebデザインだ。作るのは良いが、それを奇麗に配置していくのがとても難しい。Webサービスが流行るか否かに技術が及ぼす影響は良くて半分だろう。残りの半分以上は見た目にかかっている。 グリッド それもあって奇麗な画像を生成したり、何かのサービスを模したデザインに人気が集まったりする。Appleの作るデザインのような、今風なWebサイトを作る際にはBootstrapが便利そうだ。 BootstrapはTwitterの開発チームが作成したWebデザインテンプレートだ。単なるHTMLのみならず、色々な機能がおり混ざっている。複数カラムのグリッド、高さの揃った複数カラムのレイアウト、基本的なHTML
[CSS]ブラウザの表示領域いっぱいにボーダーを配置するスタイルシートのテクニックいろいろ
Simplified page borders in pure CSS デモページ（当方作成） [ad#ad-2] 下記に、元記事で紹介されている方法（その1）をはじめ、コメントに掲載されている方法を含めて紹介します。 対応ブラウザは基本的に:before, :after疑似要素を使用するため、IE 8+, Firefox, Chrome, Safari, Operaとなります。 ブラウザの表示領域いっぱいにボーダーを配置する方法：その1 元記事で紹介されている方法です。 デモページ：その1（当方作成） HTML HTMLは、divなど特別な要素は配置しません。 以下に紹介する全ての方法で共通です。 <html> <body> </body> </html> /*------------------------------------*\ BORDERS \*---------------
国産のWebデザインギャラリーサイトが一番参考になるのでまとめた - かちびと.net
Webデザインのギャラリーは沢山 ありますが、結局感性の近い国産 のギャラリーが一番参考になるの でまとめました。探してみると結構 いろいろあるんですね。助かります。 やはりギャラリーは国産がいいですね。沢山あるので、ある程度厳選しています。 io3000 最近知りました。すごくいいですね、ここ。見やすいし、使いやすいです。おすすめ。 io3000 straightline bookmark とにかくクールでクオリティの高いサイトをブックマークしているギャラリー。 straightline bookmark Web Design Clip こちらも個人的にオススメのギャラリーサイトです。目的のデザインも直ぐに見つかりますよ。 Web Design Clip Good Design Web こちらは他ではあまり見かけない良デザインのサイトを紹介してる貴重なギャラリーです。 Good Desi
IE6、7でも動いてくれる&実用性の高そうなjQueryプラグイン30個まとめ
cssやプログラミングIE6でも動くjQuery 使いやすそうなjqueryプラグイン をまとめました。最低でもIE6でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 使いやすそうなjqueryプラグイン をまとめました。最低でもIE6,7でも 動いてくれる事を前提にしています。 他サイトでよく見かけるプラグインで、 個人的に実用性のあるプラグインと 思ったものをまとめます。 IE6、7でも動いてくれて、実用性のあるjQueryいろいろ。確認したブラウザはIE6,7とChromeです。他は大抵動くんじゃないかな（適当）。 デモで画像が透過されていないのもありますが、他のjsライブラリでIE6でも透過可能（DD_belatedPNG.jsとか）なのでそこは抜きにして動作する事を条件に挙げています。主観入
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
