html/css 参考サイト総まとめ
作成：2013/10/15 更新：2014/11/01 Web制作 > 先週、WordPressとEC-CUBEのレイアウトを変更しなければいけなくて、久しぶりにいじっておりましたが、忘れていたり知らなかったことが沢山ありました。レイアウトはSEOやUIにも深く関係しているのもあり、ここらへんでCSSやHTML５を触るときに参考にすると捗る記事を一回まとめようと思います。今回はCMSやオリジナルサイトを作るうえで「知っておくと必ず役立つ」ものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 定番まとめ １．勉強になるテクニック／サンプルまとめ 基本知識 ２．セレクタ ３．メディア クエリ ４．コーディング規約 ５．フォント ６．CSSスプライト ７．アニメーション ８．正確なHTML使用方法 ９．CSSハック １０．書き方／読み方 定番まとめ
達人出版会
探検! Python Flask Robert Picard, 濱野 司(訳) BareMetalで遊ぶ Raspberry Pi 西永俊文 なるほどUnixプロセス ― Rubyで学ぶUnixの基礎 Jesse Storimer, 島田浩二(翻訳), 角谷信太郎(翻訳) 知る、読む、使う！ オープンソースライセンス 可知豊 きつねさんでもわかるLLVM 柏木餅子, 風薬 ブランドスイッチの法則 田中 宏樹 Blenderでアニメ絵キャラクターを作ろう！モデリングの巻 夏森轄 R／RStudioでやさしく学ぶプログラミングとデータ分析 掌田津耶乃 データサイエンティストのための特徴量エンジニアリング Soledad Galli(著), 松田晃一(訳) 実践力をアップする Pythonによるアルゴリズムの教科書 クジラ飛行机 スッキリわかるサーブレット＆JSP入門 第4版 国本 大悟(著),
Pinterest風グリッドレイアウトを作ってみよう (1/4) - ＠IT
Pinterest風グリッドレイアウトを作ってみよう：jQuery×HTML5×CSS3を真面目に勉強（3）（1/4 ページ） はじめに 一口にSNSというと、読者の皆さんはまず、TwitterやFacebook、LINEなどのサービスを思い浮かべることでしょう。しかし、こういったデファクトスタンダードなサービスだけでなく、世の中にはさまざまなジャンルに特化したSNSがいくつも登場してきています。 特に写真共有に特化したSNSのUIというのは、その特性のためか画像を画面いっぱいに敷き詰めたものがよく見受けられます。基本的な操作性はもちろんのこと、いかに美しく、ユニークに画像を並べるかによって他サービスとの差別化を図るかが、デザイナーならびにフロントエンドエンジニアの腕の見せ所といっても過言ではありません。 Pinterestは、そうした写真共有SNSの1つです。高さが均一のグリッドが整然と
「第１回 渋谷 HTML5+CSS3+JS de ゲーム勉強会 html5技術講座 x コロプラ事例発表」に行って来ました - 強火で進め
【即日満員／増員400名】第１回 渋谷 HTML5+CSS3+JS de ゲーム勉強会 html5技術講座 x コロプラ事例発表 : ATND http://atnd.org/events/25251 ソーシャル時代に見るWeb系エンジニア生き残り戦略 - mochrom クロカワ リュートさん なぜ戦略が必要なのか ターゲットユーザを明確にし ターゲットユーザーに響く方法で告知をし 長く愛されるサービス/アプリを目指す 集客の方法・事例 「MacBook Airは中華包丁としてつかえるのか。」 「これ、中華包丁みたいだ。」から始まった 関連動画も含めた総再生数は100万再生超 国内ではGIZMODO JAPAN、デイリーポータルZ、ねとらぼ、秒刊サンデー。海外ではGIZMODO、CNN、Yahoo!香港、ディスカバリーチャンネルなどで取り上げられた 気をつけている事 ティザーは打たない
光から移動まで、すべてCSSで作る光るアニメーション
ゲーム型キャンペーンサイト「URBAN RESEARCH Christmas 2011」 意匠部ME課あらため、HTMLファイ部所属となった比留間です。 今回は、先日リリースした「アーバンリサーチ」のキャンペーンで 「アーバンサンタ」からのプレゼント、というサイト制作に携わりました。 簡単にキャンペーンの概要を説明すると、Webとアーバンリサーチの店舗が連動して先着でクリスマス限定のキャンドルをもらえるというキャンペーンです。 内容はサイト内に隠されたプレゼントボックスを見つけ出して、それをアーバンサンタにおねだりする、 というとてもシンプルなゲーム型キャンペーンサイトになっています。 さらに抽選でおねだりした商品がもらえるので、ぜひぜひ参加してみてください。 さて、今回この記事でご紹介したいのは、 このキャンペーンサイトで使用した「CSSで作る光のアニメーション」の作り方を 簡単に説明し
『第１回 HTML5,CSS3を舐めまわす会 レポート<後半>』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは。 サイバーエージェントでスマートフォン向けのデザイナーをしております、新卒の阿部です。 前回に引き続き、9月下旬に行われた「HTML5,CSS3を舐めまわす会」についてのレポートを お届けします！ 午前中はHTML5についての話題でしたが、 午後はCSS3についてのセッションが開催されました。 ３ CSSセレクタについて ①属性セレクタ CSS3からは、属性の一部を抜き出してくれるセレクタが一気に追加されました。以下一覧です。 E[foo^="bar"] 属性fooの値が「bar」で始まる場合に適用 E[foo*="bar"
『第1回 HTML5,CSS3を舐めまわす会 レポート<前半>』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 みなさんこんにちは。 サイバーエージェントでスマートフォン向けのデザイナーをしております、新卒の阿部です。 記事を書いた弊社原 (@herablog)を中心としてはじまった自主勉強会で、社内でHTML5を使って開発をしているデベロッパー・デザイナーの情報共有や交流を目的としています。 場所はお台場にある弊社のミーティングルーム。業務から離れ、渋谷からも離れた場所で合宿を行うことでまとまった時間がとれ集中して勉強できます。 第1回目の今回は「vol1 -マークアップ編-」と題して、HTML5とCSS3にどっぷりと浸かった濃密な１日になりました！ １ ま
スマートフォン時代のWebサイト制作 第4回 画像の扱いと最適化 | デベロッパーセンター
スマートフォン向けサイトでは、デスクトップに及ばないスペックや接続回線を考慮し、いかに「軽い、表示が速い」サイトを作るかが重要です。一方で、様々な画面解像度の端末があり、高解像度の画面を搭載した端末向けには、そのサイズに対応した大きな画像が必要となる場合もあります。画像の扱いひとつをとっても、「パフォーマンス」と「見栄え」の双方を考慮しなければいけない難しさがあります。そこで今回は、前回のサンプルサイトを元に、画像関係の扱いや最適化などを解説します。 スマートフォンブラウザーはPNGに対応しています。デスクトップブラウザーでPNGを使う場合、Internet Explorer 6などの古いブラウザーに気をつける必要がありますが、スマートフォンブラウザーの場合は気にする必要がありません。 PNGは圧縮率が高く、容量を抑えることができます。また、アルファチャンネル（透過機能）を持つので、半透明
HTML5+CSS3の導入時に役立つ7つの設定
こんにちは、鴨田です。 個人的に仕事の大半はスマートフォン関連なので、 最近のマークアップはほとんど全てHTML5+CSS3で行っています。 とはいえ、PC向けのサイトではまだまだHTML4.01、XHTML1.0、CSS2.1を使用している場合が多いと思います。 ですので、今回はHTML5+CSS3を導入するにあたって、役立つと思う7つの設定について、書きたいと思います。 １．HTML5の初期テンプレート案 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>HTML5 初期テンプレート</title> <!-- reset.cssの設定 --> <link rel="stylesheet" media="screen" href="reset.css" /> <!-- Viewportの設定 --> <meta nam
第21回 HTML5とか勉強会「HTML5+ゲーム」 - 車輪を再発明 / koba04の日記
http://atnd.org/events/20007 という面白そうな勉強会があり、Canvas以外での実装方法やフレームワークについても知っておきたかったので参加してきました。 CanvasでFlashゲームを移植してみた経験から、これはフレームワーク化して面倒なところを吸収しないとツラいなぁと思っていて、他の会社ではどんな方法を使っているのかを知りたいというのもあって、、 Smartphone 向け HTML5 ゲームの作り方 @sou さん DeNAでの既存タイトルのスマートフォン対応についての話でした。 その方法としてDeNAでは、「HTML5+CSS3」、「Canvas」、「ExGameを使ったSWF->HTML5への変換」の３つあるとのことでした。今回はその中でもHTML5+CSS3についてが中心の発表でした。 Canvasについては先日のJavaScript勉強会では公開
HTML5 花火大会
HTML5の花火大会が始まりました。 JavaScriptやCSS3で書かれたコードが美しい花火となって 夏の夜空を鮮やかに彩ります。 START
【スマートフォン向け】新規でサイトを作るのに使えそうなの一式。 - CSS HappyLife
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
【スマホ集中連載 第4回】 "HTML5とCSS3で何ができる？" 〜メリット・デメリットを徹底研究！ : LINE Corporation ディレクターブログ
※この記事はChromeで見るのがおすすめです。 こんにちは。新規開発グループ ディレクター兼マークアップエンジニアの浜です。 スマホ連載の第4回目は、HTML5とCSS3という実装寄りの内容になります。とは言っても難しいコードはあまり出てきません。「HTML5とCSS3で何ができるのか」という事をメインに、知っておくと、構成書を作る時のアイディアベースになったりデザイナー・マークアップエンジニア（コーダー）と打ち合わせをする際に話しやすくなる内容をお送りします。 記事のアウトラインは以下です。 そもそも、HTML5とCSS3ってもう使えるの？ HTML5とCSS3を使うメリットは？ HTML5とCSS3で何ができるの？ そもそも、HTML5とCSS3ってもう使えるの？ 使えます。 （※ここから先は、その根拠について説明します。必要ない方は、次の章に飛んでしまっても構いません） 現在のスマ
[書評]HTML5/CSS3で作るiPhone+Androidなどのスマホ向けサイト制作の入門書
ASCII様よりご献本頂きました。この場 を借りて御礼申し上げます。最近では 各所で話題になりややすいiPhoneや Androidのようなスマートフォン向けの サイトの作成・最適化の指南書籍です。 内容は、HTML5/CSS3による作成方法。 スマートフォンサイト制作に関する情報は、日々非常にソーシャルサイト等で大量に見かけますが、何から始めればいいか分からない、という方も多い印象です。 基本的にスマートフォンはPCとほぼ同等の状態で見ることが出来ますので、まずは「スマートフォン向けのサイトの作成」よりも「現状運営しているサイトを最適化する」という事からスタートするのも一つの手だと思います。 iPhone+Androidスマートフォンサイト制作入門 かわいい表紙すな・・マカロンが目印です。 以下ざっと目次。 第1章 – サイト制作の前に知りたい基礎知識スマートフォンサイトとはiPhone
![[書評]HTML5/CSS3で作るiPhone+Androidなどのスマホ向けサイト制作の入門書](https://cdn-ak-scissors.b.st-hatena.com/image/square/011c0c6cd7a45354487654a96f305fd57b285944/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2011%2F02%2Fsmf011.jpg)
iPhone向けサイトを作る前に必読な書籍『HTML5+CSS3で作る 魅せるiPhoneサイト』
『HTML5＋CSS3で作る 魅せるiPhoneサイト』 今年は、サイトをiPhoneやiPadに対応させられない？というような案件を担当したりもしました。ところが、初めての挑戦だったため、かなり戸惑うことがおおく。iPhone向けの設定やデザインの構成、コーディングのしかたなどなど、いろいろと躓くことが多かった記憶が・・・ この先も、iPhoneなどのスマートフォンに対応させてほしい！という案件も増えていくことも予想されるので、ちゃんと勉強をしよう！と思ったときに発売されたのがこの本。 HTML5＋CSS3の解説もたっぷり 買ってからスラスラ～って読めてしまったこの本。札幌→東京への移動中だけでほとんどが読めてしまったという（笑） iPhone向けサイトの制作方法についてだけじゃなくて、HTML5やCSS3についての解説もたくさん入っていました。便利なCSS3のセレクタについての説明など
CSS Nite 4周年記念イベント（Vol.40 reprise）参加レポート
2024年2月1日 拙作プラグインの譲渡について 拙作のMovable Typeのプラグインを、株式会社ワールドイズマインに譲渡いたしました。 長きにわたり拙作のプラグインをご愛顧いただき、ありがとうございました。 昨日（11月10日）に、東京・御茶ノ水のデジタルハリウッド本校にて、「CSS Nite 4周年記念イベント（Vol.40 reprise）」が開催されました。 HTML5についての特集で、非常に有意義なイベントでした。 HTML5は、仕様策定中の新しいHTMLの規格です。 canvasやsectionなどの新しい要素等が追加され、WebページやWebアプリケーションをより製作しやすくなると思われます。 ただ、現在ではまだ仕様策定中なだけに、情報が錯綜していて、分かりづらい面があります。 このような中で、今回のイベントは、HTML5の現状を整理するのに役立ちました。 HTML5、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
グリーに学ぶ、スマートフォン開発向けWebアプリ要素の最新技術 ～HTML5、CSS3を採用したポイントとは
「スマートフォン版GREE HTML5+JavaScript & Android」講演資料公開いたしました | GREE Engineering
HTML5 & CSS3
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
