[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog
こんにちは。Supership デザイナーのハガです。今回はcssのお話です。 皆さんはcssで、あるデザインを実現しようとした時、あれってどうやるんだっけ？みたいな経験をしたことはありませんか？自分はよくあります。そんな時コピペするだけでokみたいなcssスニペット集があると嬉しいと思い、主に自分のためのメモ的な意味を多分に含みつつご紹介していきたいと思います。（今回紹介しているcss達は主にスマホのためのモダンなブラウザを対象としているため、ieのようなレガシーな感じはごめんなさい。） 10個のcssテクニックコアとなる部分はboldで表現しています。細字の部分はお好きに調整してください。 1.カルーセル<ul class="carousel"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
![[コピペ推奨] 最高に楽をしたい人のためのCSSテクニックまとめ | Supership Tech Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/21b346cfad597981c91042909ace96f1a78b32c2/height=288;version=1;width=512/https%3A%2F%2Fd2v9k5u4v94ulw.cloudfront.net%2Fsmall_light%28dw%3D1200%2Cdh%3D630%2Cda%3Ds%2Cds%3Ds%2Ccw%3D1200%2Cch%3D630%2Ccc%3DFFFFFF%29%2Fassets%2Fimages%2F1468299%2Foriginal%2F334f34df-ae68-4ffe-a408-12dd1d5f21fb.png%3F1490245478)
新規事業サービスのトーン＆マナーを設計するときに考えたこと - クックパッド開発者ブログ
こんにちは、ユーザーファースト推進室の坂本（@kanako29）です。 昨年12月に新規事業サービス「クックパッドおいしい健康」のトンマナをリニューアルしました。クックパッドに入社してから初めての大きなトンマナ変更を担当したので、その時に気をつけたことや考えたことなどをまとめてみました。 なぜ変えるのか？ 今回のトンマナ変更の理由として、以下がありました。 ターゲットの拡大 メッセージの伝達の明確化 それぞれについて、詳しく説明していきます。 ターゲットの拡大について これまでのターゲットは、「30代後半〜40代の病気の夫を持つ女性」だったのですが、新たに女性の悩みを解決するコンテンツの追加により、肌荒れや体の不調に悩んでいる20代〜30代前半の女性もターゲットになりました。 以前のトンマナだと新たにターゲットとなった女性たちをカバーできないので、新しいターゲットにも使ってもらえるよう変更
100種類以上のマウスホバーエフェクトを手軽に使えるCSSライブラリ「Hover.css」が便利。WordPressでも簡単利用。
Hover.cssとは Hover.cssとは、手軽にホバーエフェクトを利用できるようになるCSSライブラリです。 すべて、CSSで動作するので、AタグなどのHTML要素のクラス指定部分にクラス名を記述するだけで、100種類以上の様々なマウスホバーエフェクトを手軽に使えるようになります。 利用するときは、こんなタグで利用できます。 Font Awesomeのアイコンフォントを利用したことがある方なら、Font Awesomeを利用するように、クラスを指定するだけで使うことができるので、簡単に利用できます。 Hover.cssの主な利用手順 Hover.cssを利用するのに必要な主な手順は、以下の3手順です。 Hover.cssのダウンロード＆設置 Hover.cssを呼び出す Hover.css用のタグを記入する 利用するファイルも、hover.css（縮小版はhover-min.css）
floatボックスが親ボックスを突き破る問題 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 floatボックスが親ボックスを貫通して表示される問題について。いわゆるclearfixに関するアレコレ。 親ボックスの中に「box_A (float:left;)」と「box_B (float:right;)」があるとする。OperaやFirefox等のモダンブラウザで見てみると、中身（floatボックス）の高さが親ボックスに反映されていないことが判る。ちなみに上記のソースは以下。 <div style="width:140px; padding: 10px; border:1px solid #666; color: #333;"> <div style="flo
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
擬似要素とCSS3を使ってリストメニューを楽しくデザイン
画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから <ul class="rist-menu" id="list1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Ruby</a></li> </ul> classでリストとリンクに関することを指定して、これはすべてのサンプル共通になっています。idで擬似要素に関する内容を指定して、サンプルごとで変わっています。 1つのページに複数のサンプルを設置するためこのようにしましたが、実際設置するときは1つだと思い
【HTML5・CSS3】おしゃれなテーブルデザインのサンプルソース5点 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
地味な離島ライター内藤です。普段はコーダーとして仕事をしていますが、たまにはデザイナーさんのように人の目に触れる仕事もしてみたい！ そこで本日は、日々の業務で見かけてこれは使えるぞと思ったtableを、独自に再構築してソースコードを公開しようと思います。 table作成時に参考になるサイト 本題に入る、その前に。XPの公式サポートも終了し、HTML5＋CSS3の普及が進んでいます。今更ながら、この技術でどんなtableが実現できるのか、とてもわかりやすく説明されていたサイトをまずご紹介します。 table専門参考ページ4選 table専門の参考ページを4つほど選んでみました。 CSS3を使って美しく装飾されたテーブルの作り方｜Webpark CSS3でのtableの作り方を、見た目とソースから解説してあります。 テーブル｜CSSデザイン｜スタイルシート（CSS）｜PHP & JavaScr
サイトやアプリのユーザビリティを向上させる35のポイント | ベイジの社長ブログ
デバイスがどのように進化しようが、アプリの時代になろうが、ユーザビリティは変わらず求められるものです。Web/IT業界では「使いやすさ」という意味で気軽に使われる言葉ですが、奥は深く、原論を解説した書籍もいくつか出ています。 学術的な解説はそういった書籍に任せるとして、ここでは、経験の浅いデザイナー、あるいは非デザイナー（ディレクター、Web担当者、エンジニアなど）向けに、ユーザビリティの向上に繋がる基本的な要点をまとめてみました。 ボタン、テキスト、コピーなど ボタンやテキストのデザインは、ユーザビリティを左右する大きなポイントです。表面的な美観に流されず、ユーザ視点で考えていきましょう。 1：ボタンじゃない要素は、ボタンと似たデザインにしない ボタンのデザイン次第で、サイトやアプリの使いやすさは大きく変わります。特に、ボタンでない要素にボタンのようなデザインを施すことは、どこが押せるの
ブレないアプリデザインのすすめかた
目を惹くポートフォリオの8つのポイントと6つのコツ / 8 key points and 6 tips for portfolios
ペーパープロトタイピング入門 – 第1回 どうして紙でプロトを作るのか | fladdict
ペーパープロトタイピング講座シリーズ。第1回は導入編。 第1回はの導入編。ペーパー・プロトタイピングとは何なのか、何故必要なのか。そして導入することで、どんな利点があるのかを説明する。 ペーパー・プロトタイピングって何？ ペーパー・プロトタイピングとは、紙で実際にアプリやサイトを「実装する」ことである。 通常の開発においてコンテンツが使いやすいかどうかは、開発が終盤になるまでわからない。このため「作ってはみたが使いにくい」や「いまさら後戻りできない」という問題が発生する。UIや手触りが重要なモバイル系のアプリにおいて、これは致命的な問題になる。ペーパープロトタイピングはこの問題を低コストで解決する。 紙とペンで動作モックを作成することで、本実装を行う前に、素早く手戻なく検証を行うことができる。これにより、仕様書策定や実装前にPDCAのサイクルを実現できる。作業負荷の高い本実装を行う前に軽く
これはウェブページです｡
たいしたページではありません｡ あるのは言葉だけ｡ それをあなたは読んでいます｡ オシャレなデザインや､レスポンシブなレイアウト､魔法のようなスクリプトに私たちは魅了されてしまいました｡ でも､ウェブで一番強力な道具は､今も昔も言葉です｡ 私が書いた言葉を､あなたが読んでいる｡これこそ魔法です｡ 私はブリティッシュコロンビア州の小さな都市にいますが､あなたは別のどこかにいることでしょう｡私は2013年6月20日の早朝にこれを書きましたが､あなたは違う日時にこれを読んでいることでしょう｡私はノートパソコンでこれを書きましたが､あなたは携帯電話でこれを読んでいるかもしれないし､タブレット端末やデスクトップ端末で読んでいるかもしれません｡ 私とあなたがこうして繋がることができたのは､私が書いた言葉をあなたが読んでいるからです｡ウェブとはそういうものです｡場所や端末､タイムゾーンが違っても､このシ
【UI デザイン 練習用 - エアメール風】 - Webサイトのデザインをしよう
2014年8月17日 Photoshop, Webサイト制作, Webデザイン 「連載！実践で学ぶWebサイト制作ガイド」第四弾はAdobe Photoshopというツールを使って実寸のサイトデザインを作成します。Photoshopで説明していきますが、同様のグラフィックツールでもOK。Photoshopは体験版もあるのでぜひご利用ください。説明しやすいよう、簡単なデザインにしたつもりですが、すごく長くなってしまったような…。わかりにくくてすみません X( ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その4 目標：実際の幅にあったサイトデザインが作れる・Photoshopの基本的なツールを使った装飾ができる 必要なもの：Adobe Photoshop 対象レベル：Photoshopの基本的なツールの使い方がわかる 事前知識は以下の記事でおさらい！ これからP
How to Create Website Wireframes
2014年8月17日 Webサイト制作, 便利ツール WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。これも過去に「Webサイトの骨組み: ワイヤーフレームを素早く・手軽に・美しく制作する」という記事を書いていたのですが、私の使用するツールも変わったので、改めて記事にすることに。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その3 目標：わかりやすいワイヤーフレームを作成することができる 必要なもの：紙とペン 対象レベル：超初心者OK
サイト制作の参考にしたい！Wordpressでつくられたウェブサイト50選
WordPressでサイトを作るときに、参考になるWordpressサイトはないものかと思ったことが一度はあるはずです。 WordPressでつくられたサイトからはデザイン・機能・運営方法まで参考になることが多いのではないでしょうか。そこで今回はWordpressでつくられたサイトを有名なところから50個ピックアップしてまとめました。後から読み返しやすいようにサイトのタイプ別に分類しています。 ※2016年3月末時点でWordpressでつくられたサイトであることに注意してください。 企業サイト・組織サイト 株式会社カカクコム 価格ドットコムなどを運営する株式会社カカクコムのコーポレートサイト。 http://corporate.kakaku.com/ クックパッド株式会社 クックパッド株式会社のコーポレートサイト。 https://info.cookpad.com/ 株式会社ベクター オ
こんな企業サイトは売上に繋がらない
「ホームページが売上に繋がらない・・・」職業柄このような相談を受ける機会が多々あります。 売れる企業サイトと売れない企業サイト、その違いは何でしょうか？ 売れない企業サイトの特徴 サイト名が企業名のみ 奇をてらったデザイン 新着情報が更新されていない 商品の効果が記載されていない 「スピード対応」など言葉が抽象的 「お客様の声」に良い事しか掲載していない サイト訪問者にとってもらいたい行動が不明確 どうでもよい徒然日記的な社長ブログ Twitterの無意味なつぶやきが表示されている サイドバーにバナーが多い 「用語集」「リンク集」など無意味なページがある ヘッダ画像がスライドしたりフェードして切り替わる 画像が多く重い（ページを開くのに時間がかかる） 1.サイト名が企業名のみ Googleなどの検索エンジンは、サイト名に含まれるキーワードを一つの参考として、検索結果を表示します。 例えば、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery
なんでCSSすぐ死んでしまうん
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
吹き出し素材専門サイト「フキダシデザイン」