少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
0to255
Hex code RGB functional notation HSL functional notation Distance from base color HSL lightness value Click to copy Pre-orders now open! Color Studio transforms 0to255 into a comprehensive color tool that's ultra-efficient, inspiring to use, and delightfully unique. Available Spring 2024. Read the announcement Pre-order Color Studio 1 year at $2/month + 3 months free “A near perfect color picker”
buta.in - buta リソースおよび情報
This domain is registered at NameSilo. If you are the owner, start administering it at NameSilo.com. If this is not your domain, find similar names that work for you. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it
無駄なdiv要素やclassだらけのマークアップから卒業する方法
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク：960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
ワイヤーフレーム / モックアップを作成するためのフリーアプリ10 – creamu
ワイヤーフレーム / モックアップを作りたい。 そんなときにおすすめなのが、『10 Completely Free Wireframe and Mockup Applications』。ワイヤーフレーム / モックアップを作成するためのフリーアプリ集です。 なかなかいい感じのが揃っていますよ。 Pencil Project ワイヤーフレームが作れる有名なFirefoxアドオン Web Site Wireframe Tool オンラインでシンプルにワイヤーフレームを作って、パーマリンクで共有できるサービス Hot Gloo – The Online Wireframe App Flashベースのワイヤーフレーム作成アプリ。現在無料 DUB – DENIM Windows, Unix, Mac OS Xで利用できるデスクトップアプリ Mockingbird UIの綺麗なMockingbird
2010年に備えて、知っておきたいウェブデザインのトレンド
2010年に向けて押さえておきたいウェブデザインのトレンドの14のポイントをWeb Design Ledgerから紹介します。 Web Design Trends for 2010 下記は、その意訳です。 また、同著者の別エントリーに対応したものもあります。 これはもう使用しない方がいいウェブデザインのトレンド はじめに 1. 特大のヘッダとロゴ 2. 手描き風のデザイン 3. 大胆で大きなフォント 4. タイポロジー 5. 1ページ レイアウト 6. インパクトがある画像 7. パースの活用 8. インタラクティブで直感的なデザイン 9. モーダルボックス 10. ミニマリズム 11. オーバーサイズのフッタ 12. レトロ 13. イントロボックス 14. 雑誌風のレイアウト はじめに このリストは、2009年に人気が高かったものからさらに発展するであろうトレンドを紹介しています。 ト
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
いろいろなサイトのナビゲーションを集めた -Navigation Design Showcase
Navigation Design Showcase Navigation Design Showcaseは現在49個登録されており、Elements of Designには他にもウェブサイトでよく使うエレメントのデザインが収集されています。 コメントの入力欄のデザイン集 コメントのデザイン集 カレンダーのデザイン集 打ち出しエリアのデザイン集 コード表示のデザイン集 動画プレイヤーのデザイン集 フッタのデザイン集 アイコンのデザイン集 画像のキャプションのデザイン集 ログインフォームのデザイン集 ナビゲーションのデザイン集 価格表のデザイン集 登録フォームのデザイン集 引用箇所のデザイン集 検索フォームのデザイン集 見出しのデザイン集
[CSS]ネガティブマージンの理解を深め、活用するテクニック集
スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。
ウェブデザインにおいてすべきこと、すべきでないことをまとめた『Web Do’s and Don’ts』 | 100SHIKI
ウェブデザインにおいてのベストプラクティスと、逆に一般的にやるべきでないことを簡潔にまとめたのがWeb Do’s and Don’tsだ。 わかりやすいようにDo’s and Don’tsが左右に並べられているので、ウェブ系の人はざっと眺めてみるといいだろう。 もちろんデザインに絶対はないので「そりゃ、逆じゃね？」という主張もあるが、多くの人の主張を眺めるのは勉強になるものだ。 なお、それぞれの項目には参考リンクがつけられているので「む、どういうこと？」というときは原文をあたるといいだろう。 ここらへんを仕事にしている人はたまに覗いてみるといいですね。
I ♥ wireframes
Tumblelog managed by Ivana Jurcic, Web Developer from Belgrade, Serbia. If you want to contribute contact me via email, twitter or post your wireframe in this flickr group. Facebook page Submit wireframes Archive RSS feed Adobe Proto Adobe® Proto, a new Adobe Touch App, lets you create interactive wireframes and prototypes of websites and mobile apps on your tablet. Communicate and share ideas wit
シンプルデザインだけど見やすい黒ベースのWEBレイアウト集:phpspot開発日誌
20 Examples Of Dark & Minimalist Website Designs With Great Typography?|?Spyre Studios シンプルデザインだけど見やすい黒ベースのWEBレイアウト集。 次のような、シンプルなのに、ちゃんとデザインされた感が出ているサイトが色々と紹介されていました。 The 99 Percent Conference 黒とdeepピンクを使ったクールなレイアウト。この色合い、合いますね。 Stefan Velthuys シンプルだけど作るのが大変そうでなかなかこったレイアウトのサイト Tic Toc シンプルな中に動きが取り入れられており、なかなかのクールさが出ています Tweet CC Couch Creative 全部見る ブログなんかの場合は、毎日見るようなサイトだと、飽きない、主張しすぎないなんていうデザインが求めら
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
サイトデザイン時に有効なチートシート集:phpspot開発日誌
14 Most Useful Web Design Cheat Sheets | Web Design Ledger サイトデザイン時に有効なチートシート集。 AdobeのペンツールやJavaScript、Flashにいたるまで様々なチートシートが紹介されています。 Adobe Pen Tool Cheatsheet ペンツールのチートシート Mac OS X CSS Cheat Sheet Mac OS X用のチートシートウィジェット jQuery 1.3 Cheat Sheet jQuery1.3用のチートシート Adobe Flash CS4 OS X Keyboard Shortcuts 最新版CS4のきーぼーどしょーと 全部見る 色々とあるものですね。 関連エントリ CS4用など歴代Photoshop用、キーボードショートカットのチートシート集 Photoshop/illustr
1stWebDesigner • Helping You Build a Better Web - For Web Professionals
Learn Web Design Retro CSS Text Effect: A Step-by-Step TutorialCSS offers an array of tools that, when used correctly, can improve the visual experience on your website. In this tutorial, we’ll explore a straightforward way to design a retro text effect with pure CSS. The approach, while not overly complex, yields a visually appealing result and serves as a… UX surveys can be pivotal tools for des
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
WEBサイト企画時に便利なモックアップツール
アイテムの件数をアニメーションで絞り込むクールな仕組み:phpspot開発日誌
主要ブラウザの各バージョンでのサポート状況の一覧表