Web制作者はおさらいしたい！CSSの勉強になる実用的な基本テクニックまとめ | コムテブログ
TL;DR 実務で意外と使う基本的なものやトリッキーな小技。少ない記述で済む CSS テクニックなどをまとめました。今回は Web 制作に関わるなら、必ずおさえておきたいものや今後使っていきたいテクニック中心です。 画像 １．画像の下にできる隙間をなくす 画像の下に色などを配置すると、わずかに隙間が出来ることがあります。そんな時は親ブロックにline-height: 0;で OK。他には画像に直接vertical-align: bottom;かdisplay:block;を使えます。 css 画像の下にできる隙間をなくす方法 ２．画像の下にテキストが回り込まないようにする 回り込み解除は親要素か以下の例だとテキストにoverflow: hidden;かoverflow: auto;を指定します。IE 対策で zoom 属性 zoom:1;も同時に設定します。 css ３．float を使わ
次々とセンスある配色パターンを提案してくれるサイト「Coolors」 | ライフハッカー・ジャパン
Nintendo Switchの純正プロコンを異次元レベルの操作性に!使わない理由がない革新的アダプター
ますます高まるデザインの重要性！デザイナーが立ち上げたWebサービスまとめ | Goodpatch Blog
エンジニアが立ち上げた会社と言えば、GoogleやAmazon、Facebookなどが有名ですが、デザイナーが立ち上げた会社と聞いて皆さんはどんな会社を思い浮かべますか？その優れたデザインで話題になったPinterestやPathなどのサービスは、デザイナーが共同創業者として名を連ねており、デザイナーが会社を立ち上げることは珍しくなくなってきました。そこで今回のMEMOPATCHでは、創業者（または共同創業者）がデザイナーのWebサービスを8つ紹介します！ Pinterest https://pinterest.com/ デザイナーEvan Sharpは友人二人とサイドプロジェクトとしてPinterestを作りました。とはいえあくまでサイドプロジェクトであったため、その後Facebookでデザイナーとして働きはじめます。EvanはPinterestが気になっていたものの、当時のPinte
Webで生きていくなら絶対にあった方が良い道具のまとめ[改訂版]
こんにちは。enjiです。 Web屋として７年程生き抜いているのですが、その中で「本当にこれは便利だ！もし、環境が変わっても、もう一度買ってしまう。」と断言できる道具やサービスをご紹介致します！ほんの少しでも、役に立つ情報があれば幸いです。 photo credit: Grafix Guru via photopin cc 書類を全てデータ化するScanSnap S1500 これはもう、絶対にに買うべき商品です。 紙をスキャンしてPDFや画像データに変換します。 今まで、どんどん溜まっていた紙の資料等が スキャンしてポイなので散らかっていた紙が無くなり、デスクを綺麗に保てます。 EverNoteやDropboxに自動で送る機能もあるので 大事な契約書、説明書、名刺などなんでもホイホイデータにしておけば いつでも確認できて便利です。 迷っているなら即、買いです。本の自炊もできますよ。 htt
![Webで生きていくなら絶対にあった方が良い道具のまとめ[改訂版]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b792ceab25163d511322e761b62b3251283ef3a6/height=288;version=1;width=512/http%3A%2F%2Frentalhomepage.com%2Fwp-content%2Fuploads%2F2013%2F06%2Fmedium_322458462-e1373186659782.jpg)
デザインセンスが壊滅的な私が良い感じの配色を実現させている方法 - あなたのスイッチを押すブログ
資料の出来栄えを大きく左右する「色」。資料を作り込むほどのめり込み、抜け出せなくなってしまう。何が正解か分からず、全く抜け出せない泥沼。 「もうちょっと青みを…」「いや、赤みが強すぎるから、彩度を落として…」「この色の組み合わせはないなぁ。何色を差し色にしよう…」 色は無限大。限りある知識と経験だけでは、なかなか正解の配色を手に入れられないことでしょう。 そんな時に私が役立てている、配色に関するお話しを致します。 カラーパレットは自作しない そもそも私は美術的なセンスがありません。美術の成績も、彫刻などの造形ものはそこそこでしたが、絵画的な課題はてんでダメでした。 そんな私が自分で配色を作ろうと思ったら、時間がいくらあっても足りません。そしてクオリティは、かけた時間に反比例していくでしょう。 ですので私は、自分で作りません。他の色んな物を利用します。 それは時に写真や画像であったり、人が作
【配色・色見本 Webサイト紹介】 - 10個のweb配色ツール【色の見本】
ポスターやWebサイトのデザインをする際の配色は奥が深く、デザイナーであっても毎回悩む問題の1つ。 ただ、デザインにおいて配色の役割は大きく、たった1つの色でそのサイトやモノの印象がガラっとかわることはよくあります。 ベースカラーやアクセントカラーの組み合わせが決定しても、その色で本当に正しいのかどうか不安になることもあるかと思います。 今回ご紹介するのは、そんな悩みを一発で解決する、配色を決定する際に役立つ便利なWebツールです。デザイナーの方はもちろん、ディレクター、エンジニアの方でも、覚えておくと使えるものばかりなのでぜひ利用してみてください。 Web配色ツールのご紹介 それでは、Web配色ツールを10個ほどご紹介します。求める色がすぐに見つかったり、色を組み合わせる時の見本となるサイトばかりなのでぜひ訪れてみてください。 HUE/360 HUE/360は、1つのキーカラーと調和する
「根拠のないリニューアルは悪」- 株式会社ネコメシ 山本郁也氏が語る、UXを考える上で大切なこと｜U-NOTE【ユーノート】-イベントまとめプラットフォーム
2006年4月19日 ... マーケティングの世界で古くから使われている格言に「ドリルを買いに来た人が欲しいの はドリルではなく穴である」というものがある。ソリューションを売る難しさの本質を表現し ている言葉だが、これが未だに理解されていない。 2. Break the bias 「確証バイアス」 ⇒自分に都合の良いものを信じてしまいやすくなるというもの。 起業家というのは中立的な立場になりにくい。 「生存者バイアス」 ⇒成功者の意見を聞いてみたいということはよくあること。 ただ、成功している人の言っていることが全て正しい訳ではない。 成功している理由を分かっている人はあまり多くない。 「リニューアルすれば、良くなる症候群」 ⇒ビジュアルのリニューアルは、根本的な設計が間違っているという論理の上で、少し気に入らないから直すくらいのレベル。 自分が気に入らないという理由だけで行うと、たいて
HugeDomains.com
design-journey.com is for sale Please prove you're not a robot
「Webサイトの配色で困った！」→「HUE/360使えば良いじゃない」
Webサイト制作で避けて通れない配色の決定。芸術的素養が絶望的にないのでいつも泣いてるゴロドクさんです、どうも。 所詮素人には理論に基づいた配色など無理ゲーです。先日もちょっとしたデザイン的なゴニョゴニョという場面に出くわしましていつものように悩みつつ、なんか配色決定のためのWebサービスないかなーと思って探してたらこういうのを見つけました。 webでの色指定は基本的にRGB値での指定となりますがこれって光の三原色の混色なんですよね。 実際にCSSなんかで数値いじりつつデザインしてると「なんか違うなー」というときにもっと明るくしようとか、もっと彩度上げようってのが感覚的にどの数値をどんだけいじって良いのかってわからないんですよ。 RGB値直接いじって彩度上げようと思ったらくすんじゃった上に色みかわっちゃってオヤオヤ残念なんて日常茶飯事ですよ（いやそのまえにフォトショなりなんなりでデザインカ
配色に悩んだときに使える最近の便利なWebサービス
Colllor任意の色を指定すると、トーン表や同... / 配色の見本帳色をクリックすると、どんどん新しい色... / iWantHue簡単操作のカラーパレットジェネレ...他...全8件
WordPressでアイキャッチ画像に任意のデフォルト画像を設定する方法 * prasm（プラズム）
これがずっとやりたかったんだよ！すべてのソリューションはかちびとで問題ない。@shintarowfreshです。 もうとにかくWordPressでアイキャッチ画像を用意するのが面倒極まりない。とはいえ設定しないとみっともない。という2重苦を抱えていたのですが、これからは開放されます、気持ちいい！！ WordPressのアイキャッチ画像に任意のデフォルト画像を登録する方法 – かちびと.netWordPressのアイキャッチ画像に任意のデフォルト画像を登録する方法 – かちびと.net 設定に必要なIDの調べ方はコチラに。 Quick Tip: Saving a Default Post Thumbnail | Wptuts+ 後はもう書いているコードをコピペして終わり、イッツダン！ すると こんなかんじで、新規投稿の際、指定のデフォルトの画像がハマっているわけで。 上書きしたかったら、新し
【保存版】Webエンジニアが見るべきテックブログ一覧
皆さんはどのような方法で最新の技術や、コードのTipsを収集していますか？ はてなブックマークやTwitter, GitHubなど様々あると思います。 私はテックブログを使った情報収集をしています。今回はエンジニアが見るべきおすすめのテックブログをいっきにご紹介します。 テックブログとは？ ご存知の方も多いと思いますが、テックブログとはWEBサービスやゲーム等を提供している企業が、自社で使っている技術や開発手法を紹介するブログです。デベロッパーブログとも呼ばれます。 エンジニアが持ち回りで書くことが多いので、そこで働いている人のこともわかっちゃいます。 普段使っているサービスがどのような言語でできていて、どのようなフレームワークを使っているか、どんなツールを利用して開発しているのかが載っているのでとても刺激的な内容ばかりです。 転職、新卒の会社選びにも役立つ!? 転職する際に気になるどんな
デザイナーの視点から見たオシャレ&面白いバナーを30個集めてみました。
こんにちは。花崎です。 アシアルでは、積極的にセミナー開催やイベントごとに出展をしています。 その際にバナー広告を作成するのですが、どのようにあの狭いスペースに載せたい情報を盛り込みクリックしたくなるようなデザインにするのかいつも頭を悩ませます。 一番訴求したい情報に目をひかせるか腕の見せ所でもあります。 そこで今回は、 デザイナーの視点から見たオシャレ&面白いバナーを30個集めてみました。 1. 芸人さんにかかっているモザイクと、このキャッチでついついリンクを押してしまいそうなデザインです。リンク先への誘導がうまいなと感じます。 2. 色使いと伝えたい内容がわかりやすくまとまっていて目を引きます。 黄色×赤は目立ちますね。 3. 前回書かせて頂いたブログでもあった、グレー×カラフルな色の組合せですね。 オシャレにまとまっています。 4. すっきりまとまっていて商品の味のイメージとマッチし
全素材ロイヤリティフリーのプロカメラマンが撮影した国内の写真素材が満載！ -パプリカ イメージズ
個人でも商用でも無料で利用でき、加工も自由、クレジット表記も必要無しの写真・イラスト素材がダウンロードできるサイトを紹介します。 パプリカ イメージズ ※2015/4/15: サイトは閉鎖してしまったようです。 中の人に伺ったところ、素材はプロカメラマンが撮影したもので、素材数は現在200点！ ストックは膨大にあるそうなので、「ありそうでなかった、こんな素材が欲しかった」と思う写真を毎日10～20点ずつアップしていく予定だそうです。 無料で利用できる素材は、サイズSの640×480pxのものだけですが、登録も必要無しでさくっと利用できるので重宝するのではないでしょうか。 利用に関しては、下記ページをご覧ください。 ご利用ガイド 素材は現在、6つのカテゴリになっています。
20 Creative Design Galleries to Submit Your Website
2013年3月25日 Web Design Web design gallery websites are very useful to get inspiration. When you had created great works, show off your creative design which you are really proud of! All of the ones featured in this post are free to submit to. I will share some Japanese web design galleries as well. [adA-en] You can submit your website from “Submit” page. People who are managing those gallery websit
[ HUE / 360 ] The Color Scheme Application
Circle Controller HUE/360 Ver.0.1.3 © 2012 SAUCER.JP
ここまで小さくなるの!? PNGをほとんど劣化なく圧縮する｢TinyPNG｣がスゲェ!!
こいつぁスゲェ! PNG画像を非可逆圧縮するブラウザアプリ「TinyPNG」というのを試してみたんですが、とんでもないですねコレ。 画像自体はほぼ変わらんのに、驚異的なサイズダウン。まるで禁断のダイエット法にも見えるんですが、どんな仕組みなんだろ･･･。 TinyPNG – Compress PNG images while preserving transparency 使い方はすごくかんたん。 「TinyPNG」にアクセスしたら、画面の[Drop your .png files here!]というスペースに、圧縮したいPNGファイルをドラッグ&ドロップするだけです。 圧縮のタスクが完了すると、ダウンロードリンクが表示されるので、それをクリックしてローカルに保存すればOK。 画面遷移は一切ありません。 すげーサイズダウンします これは実際にサイズダウンしてみた結果。 左が元画像で右がTi
ウェブサイト高速化勉強会に参加してきた #tnmk0929 - Diary of absj31
ウェブサイト高速化勉強会 : ATND 2012/09/29 ウェブサイト高速化勉強会 #tnmk0929 - Togetter さくらのVPSにてサーバ＆ドメイン取得を行った流れもあり、個人用鯖にも何らかのWebコンテンツを配備・公開して行く事になるだろう(てかそういう風にして行きたい)と言うのもあり、ちょうど目にしたこちらの勉強会に目が留まり、参加して来ました。 なので現状のWebサイトを高速化させるために、ってのではなくて今後のために、という意味合いが強いですね。 会場は横浜タネマキ。最近は個人的にはYokohama.groovy等で2週間に一遍は使ってる感じですね。 タネマキ 【コワーキング ＆ シェアオフィススペース】 開始間際、ディスプレイ接続で調整が上手く行かず10分程押した後スタート。 Web Site Optimization for Beginners こもり まさあき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
とっさのデザイン〜ボタン編〜
デザインも豊富、カスタマイズも可、ローディング用のGIFアニメーションをさくっと作成できる -Loader Generator