レスポンシブデザインを制作するなら頭に入れておくべき基本事項7つ | 株式会社LIG
どうも〜こんにちはぁ！ 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね！」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
[CSS]水平に配置したセクションを分けるスタイルのさまざまな素敵なテクニック
1ページに複数のセクションを水平に配置した際に、それらの区切りとなるさまざまなスタイルを紹介します。 縦長の1ページで構成されたプロモーションサイトやポートフォリオなどで見かけるものだけでなく、こんなこともできるのかとアイデアが素晴らしいものもたくさん！ デモページ 各デモと共にそのスタイルを紹介します。 まずはHTMLから。基本となるのは、2パターンです。 1つ目は、section要素にclassをつけるだけ。 <section class="ss-style-hogehoge"> コンテンツ </section> 2つ目は、svg要素を使用します。 <section> コンテンツ </section> <svg id="hoge"> SVGの中身 </svg> sctionだけの場合はclass、svgを使用するものはidになっています。 以下、各デモとそのスタイルです。 HTML/C
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
スマホ用サイトの読み込み速度を改善し、1秒以内の表示を目指そう
携帯端末向けページのレンダリングを高速化するためのガイドラインができたことを紹介する内容です。ガイドラインは英語ですがなかなか勉強になります。 日本語版は準備中だそうです。 最初に見える部分は1秒以内に表示する ここでは1秒以内にページ（スクロールなしで表示される部分）を見ることができる状態にすることが重要だといわれています。1秒を超えると我慢できなくなり離脱する人が増えるようです。1秒で諦めるのもちょっと短気な気もしますが、読込みは早いに越したことはないですね。 まず、3G環境では一般的にDNSルックアップ、TCP接続、HTTPリクエストにそれぞれ0.2秒かかるそうです。この辺のことはあまり詳しくないですが、とにかくこれらにかかる計0.6秒はこちらでどうしようもありません。 ですので1秒で表示しようと思うと残り0.4秒しかありません。ということで、サーバーのレスポンスとユーザー側のレンダ
CSS3で立体的なボタンを表現するチュートリアルまとめ「40 CSS3 Animated Button Tutorials And Experiments」
TOP > Design > CSS3で立体的なボタンを表現するチュートリアルまとめ「40 CSS3 Animated Button Tutorials And Experiments」 HTMLに装飾を加えるためのCSSは、2011年頃から登場したCSS3によって表現力が劇的に向上。しかし、新しい機能や表現方法をフル活用できていないという方もいらっしゃるのではないでしょうか？そんな中今回紹介するのが、CSS3で立体的なボタンを表現するチュートリアルをまとめた「40 CSS3 Animated Button Tutorials And Experiments」です。 （CSS Buttons with Pseudo-elements | Codrops） シンプルなボタンはもちろん、デザインソフトでの制作でも時間がかかりそうなリアリティのあるボタンまで、多彩なCSSデザインが紹介さ
CSS3 でふわふわナビゲーション - 一角獣は夜に啼く
『超次元ゲイム ネプテューヌmk2』 の公式サイト を見てたら、ナビゲーションリンクがふわふわしてておしゃれな感じだったので、似たような動きをするものを CSS3 で実装してみた。 (元は Flash ぽい。) ↑ こんなの デモ 実際のコード JSFiddle にあるので興味があればどうぞ。 ふわふわナビゲーション - jsFiddle 使ってるもの 以下のような CSS の機能を使ってみた。 CSS Animations : CSS Animations CSS アニメーション - Web developer guide | MDN CSS Transitions : CSS Transitions transition - CSS | MDN CSS Transforms Level 1 *1 : CSS Transforms transform - CSS | MDN メモ ふわふ
スマホ用サイトに便利！ リンクを表す矢印をCSSだけで作る方法
去年地元のイベントのホームページを作ったのですが、Google Analyticsで調べてみると、スマホからのアクセスが全体の3/4もありました。 スマホでも問題なく見れたのですが、小さくて見にくいので、スマホで見た場合に1カラムになるなど若干スマホに対応しました。 その際にリンクであることを表す矢印をCSSだけで作りました。スマホはマウスを乗せるという行為がないので、リンクであるということがすぐに分かるようにするのは大切ですね。 Webフォントでもいいのですが、矢印１つのためにWebフォントを読み込むのはパフォーマンス的にどうなのかと思うのでCSSにしました。 他のサイトでもよく紹介されていますが、とても便利なので解説します。 サンプルを用意していますのでご覧ください。 では解説していきます。 HTML まず、HTMLです。 <ul id="menu01"> <li><a href="#
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
CSSだけ！クリックでスムーズに開閉するアコーディオンメニュー
この前「CSSだけで作る動きのあるドロップダウンメニュー｜Webpark」という記事を書きました。jQueryでしそうなことをCSSのみで作ったのですが、これはマウスを乗せたとき動くようにしたいのでhoverを使いました。 今回はクリックで開閉するということで、hoverは使えません。では何を使うのか。 ラジオボタンを使います。ある項目にチェックするとそれまでチェックされていた項目のチェックが外れる。アコーディオンメニューと仕組みが一緒です。 今回もサンプルを用意していますのでご覧ください。 IE8以下の場合「:checked」が非対応なのでうまく表示されません。しかし、CSS3セレクタはSelectivizrを使えば簡単に対応できます。使い方は「CSS3を使うにあたって知っておきたいIE対策のまとめ｜Webpark」をご参考に。 それではHTMLから紹介します。 HTML <div id
quusookagaku.com - quusookagaku リソースおよび情報
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 constitute or imply its association, endorsement or recommendation.
CSS3(transition)で円の中心を基準に拡大する丸いボタンが並んだメニュー
最近丸いデザインが流行っているらしいので、丸いボタンが並んだメニューを作ってみました。CSS3のtransitionでスムーズに拡大します。円の中心を基準に拡大するところが今回のポイントです。 そもそもこいうのはメニューと呼ばないのかな。検索エンジンのことを考えると色々キーワードを入れたいけど、入れすぎると何をいっているのか分からなくなる。ほんとタイトルって難しい。。 ということで、今回もサンプルを用意していますのでこちら見ていただければと思います。 ではHTMLから解説していきます。 HTML まずはHTMLから。リンク先のURLは省略しています。 <div id="box"> <div class="boxin"> <a href="#" id="circle1">CSS</a> </div> <div class="boxin"> <a href="#" id="circle2">C
HTML5/CSS3を使った多機能デザインフレームワーク·HTML KickStart MOONGIFT
HTML KickStartはBootstrapライクなデザインテンプレートフレームワークです。 最近ではWebサイトのベースにBootstrapを利用することが多いのですが、今回はその類似ソフトウェアとしてHTML KickStartを紹介します。こちらもかなり高機能です。 Typography。 リストとメニュー。 メニューは階層対応。 テーブル。 ツールチップ。上下左右自在です。 アイコン。 プログラミングコード。 ボタン。 タブ。 パン屑。 グリッド。 画像。 スライドショー。 動画、地図、カレンダー。 フォーム。 入力フィールドのサイズ。 その他色々。 極力シンプルなHTML構造設計、jQuery利用、HTML5、モーダルウィンドウなどが特徴に挙がっています。唯一残念なのは現状はレスポンシブWebデザインでないことかも知れません。しかし全てのデバイスへの対応を考えないならむしろ手
最近のCSS実装でベンダー接頭辞の外れたもの 2012年11月
Firefox 16、Opera 12.10、そしてInternet Explorer 10がリリースされました（Windows 7のIE 10はまだですが）。 その中で、CSSのベンダー接頭辞が外れたものをまとめてみます。 CSS Gradientsliner-gradient(), repeating-linear-gradient(), radial-gradient(), repeating-radial-gradient()の4つ。 IE 10から。標準構文。IE 9以下はCSSグラデーションに対応していない。Firefox 16から。標準構文。-moz-付きのは古い構文扱い。Opera 12.10から。標準構文。-o-付きのは古い構文扱い。Chrome、Safari は-webkit-が必要。古い構文。CSS Transformstransform, transform-sty
CSSのみ画像不要の吹き出しの作り方を若干丁寧に解説してみる
WEBページの演出で吹き出しの中にテキストが入ってるのをよく見かけますが、あれのやり方をかなり最近まで知らなかったゴロドクさんです、どうも。 CSSのbefore/after擬似要素の説明で吹き出しのサンプル紹介してるんですけど、今回はそれについてもうちょっと詳しく書いておこうかな、と。 吹き出しの矢はボックスのボーダーで描画します ベースとなるHTMLは以下の1行のみです。 <p class="balloon">ゴロドクさんイケメン過ぎて泣けた！</p> クラス指定なので１つCSS定義しておくと同じ演出を繰り返し使えますね。 divタグネストとかでも同様のこと出来るんですが、HTMLソースがスッキリするのでbefore/after擬似要素を利用します。ご存じない方は事前に 劇的！（でもない）before after 擬似要素の使い方まとめ | 56docブログ を読んでおくと分かり良いと
リストに1pxのラインを追加するだけで、印象がぐっとよくなる
#sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; border-bottom:1px solid #84b2e0; } 1. 下に薄いラインを追加してみる このリストに1本ラインを加えるだけで全然印象が変わってきます。試しに下に白いラインを追加してみます。 #sample { width:500px; font-size: 16px; color:#333333; background:#d6e5f5; padding:20px; } #sample li { list-style-type : none; padding:5px 10px; bord
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
アイデアの宝庫！CSS3を使ったUI表現・テクニック集
ボタン作りの手間を削減！CSSボタンデザインジェネレーターまとめ
まとめて書くことができるCSSプロパティの8つのパターン