Webデザインを「もっとかっこよくして！」と言われた時に試したいCSS小技5つ
2017年10月11日 CSS, Webデザイン Webデザイン・制作を教えている時に、担当していた生徒さんからこんな悲痛なメッセージをいただきました。「Webサイトのデザインを出してみたものの、本気を出して作ってくださいと言われてしまいました…」。デザインを見てみると、とても美しく整ったものだったのですが、「テンプレートとしてありがち」なレイアウトに見えました。この辺を指摘されたのかな、と。自分でコーディングをすることを考えると、どうしても自分の力で実現できそうなデザインにしてしまうんですね。私も駆け出しの頃はよくありました。そこで今回はちょっとした工夫で少し差がつくCSSの小技をいくつか紹介します。簡単にできるとわかれば、デザインに反映できそうですね！ ↑私が10年以上利用している会計ソフト！ 1. 要素を斜めに配置 通常CSSでレイアウトを組んでいくと、垂直平行のボックスが並んでいく
Web制作者は要ブックマーク！制作時にいろいろと役立つ便利サイトのまとめ
Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I Use...Support tables for HTML5, CSS3 Can I Useは先月くらいにUIを刷新し、より使いやすくなりました。デスクトップ・モバイル用の各ブラウザでのバージョンごとのHTML5, CSS3のサポート状況がそれぞれ詳しく分かります。
CSSを書く時、絶対に参考にしておきたいCSSガイドラインのまとめ
CSSはどちらかと言えばやさしく、雑にコードを書いてもなんとかなってしまう言語です。 しかし、雑にコードを書いてしまうと、昨日書いたこのコードなんだっけ？ とか、新しくスタイルを増やすと別のスタイルがおかしくなってしまうことはありませんか？ 大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分も使える、メンテナンス性に優れた一覧性のある美しいCSSを書くのに役立つガイドラインを紹介します。 CSS Guidelines 2 CSS WizardryのHigh-level guidelinesの最新版（2014年8月リリース）。 大規模で長期に渡るプロジェクト向けのメンテナンス性に重点をおいたスタイルシートのガイドラインです。スキルの異なる制作者、新規で加わる制作者などでも、統一されたコードでの制作が可能になるのを目的としています。
uifaces.com
uifaces.com cancelled Why? We have no resources to address the excessive hotlinking driving up our hosting costs I still have ideas or questions
デザインモックアップ作業で役立つ機能が詰まった·RoughDraft.js MOONGIFT
RoughDraft.jsはモックアップ構築中のデザインを高速化するためのライブラリです。 Webサイトのデザインをしていて、同じ表現を繰り返し入力するのはとても面倒です。そこでRoughDraft.jsを使って楽をしましょう。 例です。繰り返し部分の処理が簡単になります。 JavaScriptの記述もいらず簡単に使えます。 data-draft-repeatで繰り返す回数が指定できます。さらにdata-draft-imageでplacehold.itの画像を埋め込めます。その他data-draft-textで適当な文字、data-draft-dateで適当な日付を埋め込んでくれます。一つのブロックを作れば良いだけなので変更も簡単で便利に使えるでしょう。 RoughDraft.jsはJavaScript製、MIT License/GPLのオープンソース・ソフトウェアです。 MOONGIFT
ウェブ配色ツール Ver2.0
基本的な使い方 左上のカラーピッカーを使って、任意の1色を作れば、それに合わせた配色が作れるツールです。またロゴの文字や色は任意の物を指定できるようになっています（ただしフォントは変更出来ません）。 カラーピッカーの下のスライダーを利用すれば、メイングラフィックの変更や色相幅も変えることが出来ます。動きが必要な配色の場合には、2つめのスライダーを右に動かしてください。補色配色に近い配色が出来上がります。 色の一覧を押すことで、出来上がった色の一覧を表示しますので、コピー&ペーストしてお使いください。 この配色ツールについて この配色ツールはフォルトゥナによって提供されています。リンク等は当然のことながら自由にしていただいて構いませんが、無断で複製・転載するのはおやめください。 取材・執筆等のお申し込み このツールに関してのご質問、あるいはその他の色に関する取材・業務や講演などは、フォルトゥ
ウェブサイトの制作に必ず役立つブックマークレットのまとめ
ウェブサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなるのがイヤな人にぴったりです。 レスポンシブの確認はこれが一番便利 コードとアクセシビリティをチェック ページに柔軟なグリッドを表示 デザインの確認がピクセル単位でできる CSSの変更をリフレッシュ無しで確認 要素のスタイルを確認 CSSのセレクタを確認 ページで使用しているカラーを抽出 CSS3をサポートしていないブラウザでの見え方 ページの見出しを抽出 ページの構造が正しいか確認 ページをワイヤーフレーム化 コードをシンタックス化して読みやすく スマフォやタブレットでもコードが見たい レスポンシブの確認はこれが一番便利
Webデザイナー（私）によるWeb制作のときに気をつけてることや制作フローとかいろいろ
私はフリーランスの Web デザイナーとして、クライアントさんの Web サイトを作成するお手伝いをさせていただいています。今回は、私が仕事でデザインするときに気をつけている事や、Web 制作のフローをまとめてみました ...。 Webサイトを作るとき、みなさんはどんな制作フローをたどって作ってますか？私はフリーランスで仕事をしていて、最初から最後までひとりで作ることが多いです。今回はふだんデザインする時に気をつけてる事や、いつもしている Webサイトの作成フローをまとめてみました。もっと効率化できることがあるはずだなーと思いつつ、最初から最後までを書いてみました。 また、Webデザイナーってどんな仕事なのっていう質問をときどきいただくので … こんなことしてます … みたいな紹介です。これはあくまで私が Webサイトを作る時にしているフローで、他の Webデザイナーさんや制作会社さんと違
https://footballpanthershops.com/
Liebe Besucher von FootballPantherShops.com, Wir möchten Sie darüber informieren, dass die Webseite FootballPantherShops.com nicht mehr weitergeführt wird. Diese Entscheidung wurde getroffen, um Ihnen eine noch bessere Nutzererfahrung zu bieten und Sie auf neue, spannende Inhalte aufmerksam zu machen. Während die Seite nicht mehr aktiv ist, empfehlen wir Ihnen zwei hervorragende Alternativen, die
duree dpe
Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe logement tous les cas à par
【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
WEBデザイナーが作った超シンプル素材集 | WEB素材 ボタン 背景画像 矢印アイコン
Count per Day 8004225総閲覧数:3636539総訪問者数:22今日の訪問者数:14昨日の訪問者数:1現在オンライン中の人数: 「超シンプル素材集」へようこそ！ 商用利用OK・加工OK・許可不要・ALL無料のホームページ用素材をご用意しております。かなり自由にご利用いただけますが、ご利用の際は一応「利用規約」をご覧ください。
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
フリーのベクターグラフィックが見つかるサイト10 – creamu
Tutorial Blogでフリーのベクターグラフィックが見つかるサイトが紹介されています。 ざっといくつかご紹介。 » QVectors 世界中のフリーのベクター画像が集まっている。投稿も可能。EPSフォーマットで配布されていて、ライセンスはCreative Commons » 123 Free Vectors 動物やビンテージといったカテゴリーでベクター画像を配布 » Free Vector Graphics.Net 抽象系やアイコン、自然系のグラフィックを配布。インタラクティブ性のあるサイトで、コメントやTips、ヒントを残せる » Vector Valley EPS,AI,CDR,SVGといった複数のフォーマットでグラフィックを配布しているサイト » Dezignus 22ページ以上にわたってクオリティーの高いベクターグラフィックを配布。壁紙やテクスチャ、Photoshopのブラシ
Fireworks texture gallery
Fireworksで使えるテクスチャファイル300種類を無料で配布しています。商用利用も可能です。ライセンス Fireworks texture galleryで配布してるテクスチャ画像（png形式）は、以下のルールを守ってダウンロードをしてください。 商用利用も問題ありません。Webサイトだけではなく、印刷物などに利用していただいても構いません。 Fireworksなどの画像加工ソフトで加工していただいても構いません。 著作権は放棄してません。許可なく素材として再配布することは禁止してます。 更新履歴 2009年5月21日 Fireworks texture galleryをリリースしました。 「水平線」「垂直線」「円」「斜線」「星」「和風」「チェック」「花」「ハート」「ダイヤモンド」「モザイク」「雪」からなる12のカテゴリ、300種類のテクスチャを公開しました。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger
Statuspage | Atlassian
タブレット向けWebデザインのノウハウ40選 ―― 第1章 タブレットの機能を知る | タブレット向けWebデザインのノウハウ40選
GraphicBurger
Victor Coulon : Mon blog High Tech