ゼロからでも始められるスマートフォン専用サイト（iPhone＆Android）の作り方を学べるサイト集めました | HTML5でサイトをつくろう

2011/10/13 2445 users iPhone＆Android iPad iPhone 解像度

これからのWEB制作はPCサイトだけではなく、iphoneなどのスマートフォンやipadなどさまざまなデバイスでの閲覧を前提として作成しなければいけません。 iphoneサイトやAndroidサイトはHTML5やCSS3にかなり対応しているので簡単そうなイメージもありますが、縦画面、横画面など変化することを前提に構築しなければいけませんし、Androidは機種によって解像度が違う、機種によってCS... 続きを読む

一夜漬けでCSS3をマスターするために見ておくべきコードのまとめ - jsdo.it - Share JavaScript, HTML5 and CSS

2011/07/21 2061 users display 一夜漬け Box jsdo.it なか

jsdo.itに投稿されたCSS3のコードのなかから、実用的なものからネタ系のものまで厳選して集めました。 Tweet jsdo.itに投稿された800以上のコードのなかから、実用的なものからネタ系のものまで厳選して集めました。 これだけ見ておけばCSS3で何ができるのか、何を勉強したらいいのかがだいたいわかる！（はず） display:boxを使ったレイアウト CSS3の数行で作る簡単な3カラム... 続きを読む

【CSS3】これはやばい！覚えなくてもすぐに使える便利なCSS3ジェネレータまとめ。 - NAVER まとめ

2012/01/26 1583 users NAVER シャッフル コーディング ヤバイ Web制作

CSS3(29)Webデザイン(199)Web制作(38)コーディング(17) シャッフル 【CSS3】これはやばい！覚えなくてもすぐに使える便利なCSS3ジェネレータまとめ。 続きを読む

CSS脱初心者への道！疑似クラスと疑似要素を理解すると表現が広がるよ！*frasm

2013/03/28 1566 users ブロネク コト frasm 次回 かなり

疑似クラスって便利なの。 ほんと、便利なんですよ。 ぶっちゃけCSS3って最高やな！と思うんですが、ある意味それ以上に疑似クラスって奴を理解して使えるようになると、今までイライラしてたこととか、やりたかったコトとかが可能になるんですよね。 次回のブロネクがブログの見た目デザインについてなので、それに引っかけて、疑似クラス・疑似要素を理解しちゃうと、かなり捗るし、いろいろ表現が増えますので、ちこっと... 続きを読む

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE | コリス

2010/07/14 1404 users コリス padding Eee background 一行

上記デモのスタイルシート ※クリックで拡大 「CSS3 PIE」の使い方は簡単で、既存のCSS3に一行を追加するだけです。 適用前のCSS #myElement { background: #EEE; padding: 2em; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; } 「CSS3 PIE」... 続きを読む

CSS HappyLife ZERO

2010/01/17 1393 users セレクタ リファレンス プロパティ あれこれ CSS

CSS HappyLife ZEROは、CSS初心者・中級者の方を対象にしたリファレンスやレイアウト講座など、CSSに関するアレコレがつまったサイトです。CSS HappyLife ZEROは、主にCSS初心者・中級者の方を対象にしたCSSに関するアレコレがつまったサイトです。 プロパティやセレクタなどのリファレンスに加え、実践的なレイアウト講座やTips・コラムなど、それとCSS3に関してもちょ... 続きを読む

[JS]jQueryのプラグイン100選 -2011年総集編 | コリス

2011/12/11 1383 users jQuery コリス エフェクト アニメーション 影響

2011年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年はCSS3の影響もあってかアニメーションのエフェクトが目立ちました。また、Resposive Web Design用の可変ものや動画・テ [...] 続きを読む

ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました | HTML5でサイトをつくろう

2012/04/18 1364 users レスポンシブWebサイト HTML5 マルチデバイス CSS

スマートフォンサイトとPCサイトの振り分けを考える上で、 ひとつの選択肢となる「レスポンシブWebデザイン」。 スマートフォンサイトの最適化とは違い、CSS3のメディアクエリ機能を使って、デバイスのサイズごとにCSSの読み込みを変更することによって、1ソースでマルチデバイスに対応したサイトを制作することができます。 しかし、その分ソースや読み込むCSSが多くなってしまったり、構成をしっかりと考えな... 続きを読む

見出しデザインの参考にしたい CSSで作るhタグのサンプル集 | 日刊ウェブログ式

2010/06/13 1225 users CSS 日刊ウェブログ式 見出しデザイン hタグ サンプル集

ブログの記事タイトルやサイドバーのタイトルなどで使えるオーソドックスな見出し（hタグ）のデザインサンプル集です。見出しにはCSS3や画像を使っていないのでシンプルですが、一応よく使うので、メモとしてエントリーしておきました。 見出し(Headline)のサンプル集 色やボーダーのサイズ等の装飾部分をお好みで編集してください。 見出しサンプル01 .selector01 { border-left:... 続きを読む

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

2011/07/13 1188 users 注意書き iPhone Media Queries iPad

WebサイトをiPhoneやiPadに対応させるためによく使われるCSS3のMedia Queries（メディアクエリ）。CSS3 Media Queriesを使うときの注意書きなどをまとめてみました。今回このブログ、Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries（メディアクエリ）。メディアクエリの使い方や感想、... 続きを読む

ここまでできる！CSS3を使ったチュートリアルまとめ | DesignWalker

2010/05/17 1175 users ウェブデザイン DesignWalker デザイナー 皆さん

ここ数年でたくさんの情報が揃ってきたCSS3。古いブラウザでは対応されていないため、まだまだ一般に普及するまでは時間がかかってしまうのかもしれませんが…。 CSS3を使えば、ウェブデザインの可能性をさらに広げてくれることは間違いありません。 デザイナーの皆さんは、是非CSS3でどんなことができるの？って事だけでも今のうちから知っておいても損はないと思いますよ。 今回は、そんなCSS3を使えばここま... 続きを読む

HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) - ＠IT

2014/03/19 1069 users Bootstrap サンプルアプリケーション API 概要

HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介... 続きを読む

手間ひまかけずcss3だけでデザインしたい人のためのチュートリアル集22選 | Webデザインのレシピ

2011/08/02 1027 users レシピ webデザイン jQuery 溜め息 チュートリアル

最近すっかりPHPが面白くなってしまい、デザインが2の次になりがちでした。最近改めてデザインを見直す機会があり、jQueryや画像などを使わなくても、ある程度見やすくて今っぽいデザインにできるcss3の使い方を見て溜め息をついています。 そんなわけで今回は、システム作りに忙しくてデザインに時間がとれてない人のための、簡単でカッコいいデザインにできるcss3のチュートリアルです。 優秀なみなさんです... 続きを読む

HTML5とCSS3を使ってスマートフォン向けサイトを構築　－ iPhone版Yahoo!JAPANトップの開発事例紹介（1/4）：CodeZine

2010/12/15 1026 users CodeZine タッチセンサ ネイティブアプリケーション

はじめに　スマートフォン版Yahoo! JAPANトップでは、ユーザーへ高品質なユーザーエクスペリエンスを提供するために、対象端末をiOSとAndroid OSのスマートフォン端末に絞り、最新のブラウザ仕様に基づいたサイト構築を行っています。スマートフォン版Yahoo! JAPANトップ 画像の使用を抑えるためCSS3や、ネイティブアプリケーションに近づけるためCSSアニメーションや、タッチセンサ... 続きを読む

HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと

2014/01/26 1012 users Rails 備忘 コーディング Ruby フロントエンド

HTML5&CSS3&フロントエンド 何度も読み直したい資料・ツールまとめ Jan 26th, 2014 Tweet HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、幾つか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘... 続きを読む

とにかく最新のHTML5やJSを使用したサイトをたくさん見たい時に便利！国内外のWEBデザインサイトのタグリストをまとめました | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサ

2012/06/20 1009 users Webデザインクリップ まとめサ Web制作 国内外 デザ

リリースされる最新のHTML5やJavascriptを使用したサイトは常にチェックしたいですが、案件に必要な参考サイトを探している時に項目別に一気に見れたり比較ができればより便利です。 そんな時に、いつもチェックしているHTML5やCSS3、Javascriptといった国内外WEBデザインサイトのタグリスト別のデータサーチを紹介します。 先日ご紹介したWEBデザインを制作する際の参考にしているデザ... 続きを読む

いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0 － Blog on Publickey

2009/05/07 974 users 進化 Web標準 Blog on Publickey 要件

日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要... 続きを読む

float解除の決定版。clearfixを考えたら、進化した。 : Web Design KOJIKA17

2011/04/05 953 users clearfix clear float CSS 理論

現在floatを解除する方法として、"clearfix"がよく使用されていると思います。 しかしclearfixが初めて公開されたのが、2004年5月8日。 それ以来、7年間ほとんど形を変えずにclearfixが使用されてきました。 ブラウザもCSS3を多く対応してきている中で、「それで良いのか？」という疑問を新しい形を模索してみました。CSSの理論とかよくわからんので、ソースだけ見る。clear... 続きを読む

CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 - ICS MEDIA

2016/08/22 945 users float Flexbox ICS MEDIA CSS 主流

ICS MEDIA Web制作 2016/08/22 CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 « Prev ボックス要素の横並びをCSSで行う場合、これまでは float プロパティを使うのが主流でした。しかし、 CSS3の新機能「Flexbox」を使うと float よりも簡潔なコードで、ボックスの豊富なレイアウトが可能です 。本記事では... 続きを読む

HTML5、CSS3、JavaScriptがリアルタイム編集できる！軽量HTMLエディタ「Liveweave」 | Chrome Life

2012/07/10 935 users リアルタイム Chrome Life JavaScript

みなさんは、HTMLやCSSのコーディングには何を使っていますか？ デザイナーの方であればDreamweaverをメインで使っている人が多いと思います。 デベロッパーの場合は、自分の好きなテキストエディターを使いこなしているでしょう。 しかし、実際にはコーディングをしながら見た目や動きを確認するためにブラウザを横でたちあげてデバッグしながら作業を進めていくと思います。 コードを修正→ファイルの保存... 続きを読む

CSS3を使ってできる画像まわりのエフェクトやスタイリング17 | Webロケッツマガジン

2012/02/24 933 users エフェクト シャドウ CSS Webロケッツマガジン 目次

CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 目次 1. シャドウ   2. トイカメラ風トンネル効果   3. カラー調整   4. 回転   5. 角丸   6. 楕円のフレーム   7. 円のフレーム   8. 三角形フレーム   9. 重な... 続きを読む

ゼロからはじめるCSS3を勉強するために参考になるサイトや便利なツール、チュートリアルを一挙にまとめました | HTML5でサイトをつくろう

2012/08/01 918 users チュートリアル ツール 参考 チュートリアルサイト HTML5

今までCSS3を使ったパターンやスタイルの付け方などを紹介してきましたが、一言にCSS3の機能といっても、角丸やグラデーションなどの装飾だけでなく、アニメーション機能などアプリ制作をする上でも便利な機能がたくさんあります。 そこで、今回はアプリ制作をする上でも便利なCSS3のアニメーション機能等を勉強する際に参考になるサイトをまとめました。 デモページからチュートリアルサイト、便利ツールまでこれか... 続きを読む

CSS3の勉強になるかも！？画像を使わないボタンの作成手順｜Webpark

2012/04/04 886 users Webpark Firefox グラデーション 順番 動作

CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。 続きを読む

今こそ未来！CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG

2013/04/30 877 users Flexbox 初耳 レスポンシブデザイン 昨今 デモ

こんにちは、王です、デザイナーやってます。 「これからの時代はFlexboxだ！」 ということで短い動画を用意しておきましたので、初耳の方、ざっと「Flexboxで何が出来るか？」が分かるかと思います。 動画の中で使ってたデモをこちらにアップしたので、実際に確認してみたい方ご自由に。 PC、タブレット、スマホ…デジタルデバイスサイズの多様化で、昨今ではレスポンシブデザインとやらが流行っています。同... 続きを読む

初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 - paiza開発日誌

2015/03/26 848 users paiza開発日誌 谷口 CSS HTML HTML5

2015-03-26 初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 Photo by Jeff Golenski こんにちは。谷口がお送りします。HTML、CSSを習得して「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」等と思っている方は多いのではないかと思います。HTMLとは、We... 続きを読む