今更聞けないWebサイト構築〜脱テーブルレイアウト〜【前編】 - 今日学んだこと
SIの現場では、未だにテーブルでのレイアウトが多勢を占めてる気がします。フォントの色とかサイズとかも、CSS使わず書くことが多い気もしてます。 そんな訳で、少なくとも僕はモダンなHTMLやCSSがわかりません。で、お勉強しつつ、ここにアウトプットを残そうというのが今回の趣旨です。 HTMLの種類 昨今のメジャーどころでは、以下の様になるのかな と。HTML5がすでに主流と言っても良い気がするので、お勉強もHTML5に則ってやっていこうと思ってます。 HTML4.01 ちょっと前までの主流。yahooはまだHTML4.01。Windows XP使い続けてるおじーちゃんおばーちゃんもターゲットだからなのかな？古いブラウザでも観れるように配慮するなら、このバージョンを選ぶことになる XHTML 若干空気。古いブラウザでもそれなりに対応している。XMLのように厳格に書きましょ という企画。利用して
impress.jsでド派手なスライドをつくろうぜ！
“HTML5アプリ作ろうぜ！”連載がスタートしました！ デジタルハリウッドの現役アプリクリクリエイター専攻講師が、最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していきます。 最近、セミナーでこの「impress.js」を利用する機会が多いのですが、その際に参加者から評判が良いので、まずはこれを紹介します。 impress.jsとは？ CSS3を活用したオープンソース（ライセンスMIT）のプレゼンテーションJavaScriptライブラリです。 対象ブラウザ Safariブラウザが現状では最もスムーズに動作します。一応、Chromeも推奨ブラウザです。 特徴 【1】ド派手なスライド動作 最大の特徴は派手でイケイケなスライド。始めてみた人は必ず見入ること間違いありません。シンプ
初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
- このブログは非公開に設定されています。
ブログ このブログは非公開に設定されています。 (Access forbidden) 他のブログを探す ブログランキング（共通のジャンル） 1 ちゃんねるZ 2 裏ピク 3 えっちなお姉さん。 4 マブい女画像集 女優・モデル・アイドル 5 AV女優2chまとめ ヘルプ インフォメーション リクエスト 利用規約 障害情報 FC2ブログについて FC２の豊富な機能 スマホからもブログ投稿 有料プラン アルバム機能 おすすめブログ テンプレート一覧 マガブロ マガブロとは？ マガブロランキング マガブロの書き方 マガブロアフィリエイト サポート ヘルプ インフォメーション リクエスト 利用規約 障害情報 アプリでもブログ投稿 FC2トップ お問い合わせ 会社概要 プライバシーポリシー 著作権ガイドライン 広告掲載 Copyright(c)1999 FC2, Inc. All Rights Re
HTML5のスゴさが一目で分かる「HTML5で遊んでみたクエスト」が面白い
ブラウザがゲーム機になる日も近いのかもしれません 現在、ブラウザ上でゲームなどを遊ぶ場合にはFlashなどの外部プラグインがほぼ必須となっていますが、次期HTML（HTML5）ではこれが不要になるかもしれません。 あまりピンと来ない人は、こちらの「HTML5であそんでみたクエスト」をぜひ遊んでみてください。どこかで見たようなタイトル画面、名前入力画面に続いて、やっぱりどこかで見たような戦闘画面が表示されますが、面白いのはここから。なんとコマンドを入力するかわりに、ローカルの画像をブラウザに直接ドラッグ＆ドロップすることで戦うんです。 画像がJPEGなら「たたかう」、GIFなら「まほう」、PNGなら「かいふく」といった具合に、ドロップした画像の拡張子によってコマンドが変化。画像はデカければデカいほど強く、あまり小さいとはね返されてしまってダメージを与えられません。ドロップした画像がそのまま戦
画像を一切使わずにCSS3だけでドラえもんを描画したよ！ ブラウザ毎に見え方が全く違って面白い|ガジェット通信 GetNews
昨日紹介したCSS3だけで制作されたウェブサイト『NetaGear』に続き面白いサイトを紹介。今度はCSS3のみを使ってドラえもんを描画したという物だ。もちろん今回も前回同様にブラウザ毎に見え方が全く異なってくる。正常に描画されているのは、『Google Chorome』と『Firefox』『Opera』だ。『Internet Explorer』のみは丸みのないカクカクなドラえもんになってしまう。 さて、このドラえもんを画像として表示した場合はどのくらいの容量になるのだろうか？ サイトに検証した結果かが掲載されている。結果は以下の通りだ。 GIF …… 33.5KB JPEG …… 96.5 KB PNG …… 60.2KB 以上のように画像系はどれも数十KBは行ってしまうみたいだ。ではHTMLとCSS3のみで構成した容量となると…… html 2.05KB CSS 14.2KB 計 16
URLの終りに「/」(スラッシュ)は必要?、不要?
http://www.suzukikenichi.com と http://www.suzukikenichi.com/ URLの終りに「/」(スラッシュ)を付けた方がいいのか、付けない方がいいのか、付いたときと付かないときでは何か違いがあるのか。 誰もが1度は疑問に思ったことがあるはずです。 URLの末尾に付ける「/」のことを「トレイリングスラッシュ(trailing slash)」と技術的に呼びます。 トレイリングスラッシュのあり・なしについて、ウェブマスター向け公式ブログでGoogleが説明しました。 補足を交えながら要点をまとめて解説します。 まず、トレイリングスラッシュのあり・なしによるウェブサーバーの一般的な振る舞いの違いです。 http://example.com/foo/ （トレイリングスラッシュあり） http://example.com/foo （トレイリングスラッシュ
youtubeの埋め込みタグ、そのまま使っていませんか！？
youtubeの埋め込みタグ なにも考えずにホームページやブログに はり付けているのではないでしょうか？ そこでAnother HTML-lint gateway というHTMLチェックサイトでチェックしてみました。 すると、下記のエラーがみつかると思います。 この時点での点数は「-10点」でした そこでyoutubeの埋め込みタグ <object width="425" height="355"> <param name="movie" value="http:⁄⁄www.youtube.com/v/test"></param> <param name="wmode" value="transparent"></param> <embed src="http:⁄⁄www.youtube.com/v/test" type="application/x-shockwave-flash" wm
かっこいいメニューバーが簡単に作れちゃうジェネレータ「MenuBuilder」*二十歳街道まっしぐら（FC2ブログ時代）
「MenuBuilder」はメニューバーを作ってくれるジェネレータです。 グラデーションやマウスオーバーも実装できます。 色を選んで、パターンを指定したらおしまい！ 簡単すぎ！ 画像およびHTML（CSS）もダウンロードできるので、使い回ししやすいです。 以下に使ってみた様子を載せておきます。 まず「MenuBuilder」にアクセスします。 メニューはグラデーションになります。 上側がデフォルトで下側がマウスオーバーのときです。 そしてお次は、メニューのパターンを指定します。 あと、横に並べるのか、縦に並べるのかも選択しましょう。 「Generate&Preview」すると、最上部で仕上がりを確認できます。 「Download」ボタンをクリックすると、画像とHTML（CSS）を一括でダウンロードできます。 HTMLファイルを開くと、このように先ほど作ったメニューが実装されています。 HT
知らない人は損してる？コーディングが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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 BIZ -
HTML5 Coding assessment test - jsdo.it - Share JavaScript, HTML5 and CSS
色見本大辞典
HTMLは狂っている ：アルファルファモザイク
http://www.hinoki.sakura.ne.jp/~okada/table/guest-c.html
GWT Quake
HTML5とjQueryを使って作られたToDoリストツール・FridgeList
gnegg - Field intentionally left blank
HTML5 + jQuery + PHPで実装するオープンソースの動画プレイヤー・Open Standard Media Player
iPadを含むスマートフォン用のアプリをRubyで開発できるRhodes 1.5
