HTML5でWebページをマークアップするための基礎知識
最近よく目にする「HTML5」という言葉。JavaScriptのAPIやCSS3、SVGなどを含め、急速な広がりを見せつつある「HTML5」の基礎を学べる入門連載です。「HTML5を使うと、何ができるのか」「それを実現するには、どのようなプログラムを書いたらいいのか」をお届けします 5からHTMLの“文法”が変わるって知ってた？ 連載第1回の「Webの3つの問題を解決する「HTML5」とは何なのか」では、HTML5という技術革新の意義、そして本連載の大まかな流れについてお話ししました。連載第2回である今回は、HTML5のマークアップを行うための基礎知識についてお話しします。 HTML5では、その文法が大きく変化しました。「HTMLが、どれほど普及しているか」「根底となる“文法”が変わってしまったら、どれほどの影響があるか」に想像が及ぶ方であれば、非常な驚きと不安を抱かれるかもしれません。
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
ワイヤーフレーム制作の５つのアプローチ
ワイヤーフレームを作るときに、とりあえず「どのソフト・道具を使って作ろうか」という考えが先に来てしまいますが、どのようなワイヤーフレームを作るのかのほうが重要です。情報をどれだけ見せるのか、何を表現したいかによってワイヤーフレームの見せ方が異なります。つまり、サイトの属性や目的に応じてワイヤーフレームの作り方を調整するとより効果的になります。また、予算や時間に合わせてワイヤーフレームを作成する目安にもなり、制作チームやクライアントとの情報共有がしやすくなる可能性があります。 ワイヤーフレーム制作は、主に５つのアプローチが考えられます。それぞれメリット・デメリットがあり、得意分野も異なります。複数を組み合わせたり、アレンジすることで目的にあったワイヤーフレームを作ることが可能になるでしょう。 コンテンツブロック型 内容や記載せず、おおまかなブロックで枠組みするワイヤーフレーム。サイト制作の早
手っ取り早く携帯サイトを作成する時のhtmlテンプレート - webの人 @ryryo
最近phpをいじるがてら、ひさびさに携帯サイトに触れているためメモメモ。 携帯サイトで装飾を入れるとなるとi-cssが云々って話があったりしますが、正直テストサイトでそんな面倒なことをしていられないので、だいたい以下のようなhtmlで作成しています。 とりあえず携帯サイト作りたい時テンプレート <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.3) 1.0//EN" "i-xhtml_4ja_10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Co
作って学ぶスマートフォン対応サイトの基本 (1/4)
iPhone/Android向けサイト制作の基本を学ぶために、今回は実際に手を動かしながら非常に簡単なWebページを作ってみましょう。あわせて、スマートフォンサイト制作に最低限必要な制作環境（エディターとWebサーバー）についても紹介します。 用意するもの1：エディター HTMLを編集するのに必要です。使い慣れたソフトで構いませんが、もしなければ次のようなものを使うとよいでしょう。 ・Em Editor / Windows / 4000円（税込） http://jp.emeditor.com/ ・秀丸エディタ / Windows / 4200円（税込） http://hide.maruo.co.jp/ ・TeraPad / Windows / 無料 http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html ・JEdit X / Mac /
Visualize Website Structure – Sitemap
2014年8月17日 Webサイト制作, 便利ツール Webサイト制作の準備編２：Webサイトの構成図（サイトマップ）。どのページがどこへリンクするのか、ページの重要度など、Webサイトの構成を図にまとめておくと製作途中で変更があった場合でも整理しやすくなります。Webサイトの構成図を作るときのポイントと便利なオンラインツールをまとめてみました。 ↑私が10年以上利用している会計ソフト！ 実践で学ぶWebサイト制作ガイド：その2 目標：Webサイトの構成を明確にする 必要なもの：紙とペン 対象レベル：超初心者OK！ 目次 誰のため？何のため？Webサイトを作り始める前に。 Webサイトの構成図を簡単に作れる便利ツール ←今ここ Webサイト設計図 – ワイヤーフレームの作り方 PhotoshopでWebサイトのデザインをしよう Photoshopでスライスし、パーツ画像を作成するコツと方法
CSSの@importを動的に1ファイルにまとめて圧縮するPHPのクラス「CSS_DynamicCompressor」 - Rewish
CSSを小分けにして@importで読み込んで管理している方も多いかと思いますが、これではHTTPリクエストがファイルの数だけ発生して、パフォーマンス的に良くありません。 Googleがページの表示速度を検索結果に反映するとか言い出したりもしているので、これはもうリクエスト数を減らすしか無いですね！ でも手動でファイルを一つ一つ連結するのはとても面倒です！と言うわけで、そんな面倒な作業を自動でやってくれるPHPのクラスを書いてみました。 ライブラリについて @importで複数のファイルを読み込んでいるCSSを、動的に解析し、連結・圧縮を行います。また、表示する際にLast-ModifiedやExpiresなどのHTTPヘッダーを送出したり、gzip圧縮を行うなど、リクエストを出来るだけ軽減できるようにしています。 ダウンロード CSS_DynamicCompressor ライセンス MI
携帯サイトを作る時に役立ちそうな情報まとめ - かちびと.net
Tips携帯サイト構築 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 ちょっと必要に迫られたのでメモ。 どうもTwitterやってるとiPhoneや Androidなどのスマートフォンの 話題ばかりなので忘れそうですが、 携帯サイトはビジネスには必須 ですので備忘録として記事に。 以前にも何度かまとめ記事が話題に上がっているので今更感も否めませんが自分のブログにあったほうが探しやすいのでメモします。 予備知識モバイルサイト構築前に知っておきたいユーザビリティ10のポイント ファーストビューの重要性、色の大事さ、リンク操作に関して記載されています。 モバイルサイト構築前に知っておきたいユーザビリティ10のポイント 携帯サイト（html）の制作に入る前に確認してお
ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」:phpspot開発日誌
Lumzy ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」というのが公開されているみたい。 デザイナーさんであれば、Photoshopでまずデザインを作るより、顧客にどういうサイトを作るか、イメージしてもらうためにモックを作るわけですが、それがブラウザ上で高速にできちゃいます。 ネットブック片手にブラウザさえインストールしてネット環境さえあれば、顧客と相談しながらサイトのレイアウトを作っていっちゃえますね。 サインアップとか無しにすぐに使えるところもGoodで、Flashを使った直感的なUIでモックアップをサクサク作れちゃいます。 ツールを立ち上げると、まずプロジェクト作成画面がでるので適当にいれて「Create Project」します。 作成すると、ボタンとかメニューバー、リスト、データグリッド、コンボボックスなどのありとあらゆるUIパーツが最初からそろっていて
あのサイトを作りたい！オープンソースのクローンCMSまとめ
「自分であんなサイトを作りたい」と、思う Webサービスは結構多いかと思います。 いくつかの有名なWebサービスは クローンのCMSがオープンソースとして 提供されているものがあります。そんな クローンタイプのCMSをいくつかご紹介します。 既出のCMSばかりですが、個人的も一度まとめておきたいのでメモも兼ねて。 Diggクローン 海外でもかなりの人気ソーシャルサイト、Diggのようにユーザーが投稿、Vote（投票）を行えるCMSです。以前SEOカスタマイズ法も書いたので宜しければ合わせてご覧下さい。Pliggが相性悪いなと思うようならPHPDugもいいかも。 Pligg / デモ Deliciousクローン ソーシャルブックマークサイトとして有名なサイトがDeliciousです。タグを付けてWebサイトへのリンクを簡単に追加、共有できるオーップンソースのCMSがscuttleです。僕もこ
ユーザーインターフェイスを設計するための素材集「50 Free UI and Web Design Wireframing Kits, Resources and Source Files」
ユーザーインターフェイスを設計するための素材集「50 Free UI and Web Design Wireframing Kits, Resources and Source Files」 タブやフォーム、ラジオボタンにチェックボックス、ページングとWEB特有のデザインや昨日はいくつもありますが、WEBデザインを起こす時、それを一つ一つデータを起こしているとかなり大変です。今日紹介するのはユーザーインターフェイスを設計するための素材集「50 Free UI and Web Design Wireframing Kits, Resources and Source Files」です。 Flex Stencil Kit 様々なインターフェイスに対応した素材がまとめられています。今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■Free Sketching & W
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブプロジェクトに必要なファイル群を一括生成！『Instant CSS Code』 | 100SHIKI
わずか8KBのjQuery用カレンダープラグイン「CalendarPicker」 | Web活メモ帳
