ドットインストール代表のライフハックブログ
こんな感じです。 ＞＞JavaScript を使って作る追尾サンプル iPhoneアプリやAndoroidアプリをつくれるこの他にも、JSを覚えれば、iPhoneアプリやAndoroidアプリをつくる事もできるのです！ ＞＞初心者でも２週間でiPhoneアプリが作れちゃうTitanium Mobileがすごい件 「Titanium Mobileでアプリを試しにつくってみる」というのを担当していました。 JavaScriptはあまり使ったことがないですし、そもそもMacもほとんど触ったことがなかったので苦戦するかと思いましたが、２週間ほどでとりあえず形になるところまでできました。Titanium Mobileすごいです。 超おすすめ＞＞未経験からプログラマーとして上場企業に就職できたぼくが「内定をもらうための秘訣」と「大事なこと」を教えるよ 学習する上で参考になるサイトはこちらJavaScr
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
HTMLの構文チェックをその場で できるブックマークレットです。 問題箇所の数や、問題箇所もお しえてくれます。割と便利そう だったのでご紹介してみます。 HTMLのlintです。ブックマークレットを起動させてその場で解析、問題箇所も教えてくれます。 OSSとしてGithubでも公開されてますので日本語に直しての利用も出来ますね。 ↑ 起動させるとすぐに解析してくれます。 ↑ 表示されたボックス下部のView Reportに進むと個別箇所が一覧で表示され、それぞれの問題箇所を上図のようにアイコンで教えてくれます。 errorとwarningの表示/非表示のスイッチも出来ます。なかなか便利ですね。 HTML_CodeSniffer
Webで開発をしていてたまに上がってくる問題として、テキストの改行についてあると思います。特にWebサービスのような編集者以外のユーザーがテキストを入力した任意のメッセージなどを表示する場合、改行に関して様々なトラブルが起きたりすることがあります。編集者（作り手側）の場合は適切な箇所で改行タグを入れたり、閲覧者が適切に読めるように文章を改変したりできるのですが、ユーザーにそこまで考慮させるのは難しいことです。 またWebサービスには他にもトラブルの原因となることがあります。Webは様々な環境で閲覧・使用することが可能だということです。PCや携帯、スマートフォン、タブレットなどのデバイスの差異ももちろんありますが、閲覧するソフトウェア（Webブラウザなど）によっても表示のされ方が異なってしまいます。 （できる範囲ではありますが）すべての環境でトラブルなく適切に表示するにはどうしたら良いか？
CSSを書くとき、いつもul, ol要素のデフォルトスタイルのことを忘れてて悩むので、デフォルトだとどういう感じで表示されるかメモしておきます。 確認したブラウザは以下。 Internet Explorer 6, 7, 8Opera 9.6Firefox 3.0Google Chrome 2.0SafariはChromeと同じ表示になるので省略。 ul要素にmarginとpaddingを指定したりして試しました。 他には何も指定しなくてもよかったんだけど、やってみたら分かりづらかったので ul要素に1pxのボーダー、それを囲むdiv要素に背景色とpadding:5pxを指定。 margin，paddingどちらも指定なしの場合の場合margin-left:0を指定し、paddingは指定なしの場合margin指定なし、padding-left:0を指定した場合margin-left:0とp
同僚の Ted Kaehler さんのアイデアをヒントに、HTML のコメントを表示するブックマークレットを作ってみました。 http://metatoys.org/unveil/ にある Unveil というリンクをブックマークバーにドラッグして使います。一度押すとコメントが表示され、もう一度押すと元に戻ります。サイトによっては、なかなか味わい深いコメントを見る事があります(Chrome, Safari, Firefox で確認済)。例えば、 asahi.com のように高校野球速報の指示が書いてあったり、 楽天トラベルのようにコメントの中に隠されたバナーや選択肢を見ることが出来ます。 コメントのような舞台裏を見るとなかなか背徳的な気分になるものです。HTML の開発時にも役に立つかもしれません。面白いコメントを見つけたら教えて下さい。
【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。 【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
デザインが先にあって XHTML を書こうとすると、論理的な文章構造殻から見たときにおかしなことになることがあります。 コーディングに慣れないうちはこういう失敗もよくありますねー。 正しい文章構造でマークアップをすれば SEO的にもいいかもしれません。 今更なんですけど、Webサイトって XHTML で書かれていて、スタイルシートで装飾されていますよね。Webデザイナーから見ると、Webサイトってとかく見た目、デザインの部分、スタイルシートばかりに目がいきがちですが、Webサイトで大事な部分ってXHTMLの文章の論理構造だったりします。まずは XHTML があっての Webサイトだと思うんです。 Webサイトを作るときに、多くの Webデザイナーさんがそうしてると思いますが、私もまず Photoshop や Fireworks をつかって Webサイトのデザインを作ります（みんな違うのかな
カッコいい管理画面のHTMLテンプレート総まとめ。 これまで紹介したエントリや、新しく発見したエントリで紹介されているものを全てマージしてみました。 有償のものも混じってますが、カッコいい管理画面を作りたいといった際にカタログ的に使ってみてもいいかも。 独断ですが、クオリティ順に並べ替えてます。 Simpla Admin Boxie Admin Complete Liquid Admin InAdmin Admin (FREE) Adminizio Lite – Admin Template Admin Templates - Professional XHTML Back-end Template Spring Time – Simple Admin Template Internet Dreams Admin Skin Visual Admin ThePixelDeveloper Ad
iframeを更新させるためにこんな処理が書いてあって、 <iframe id="foo" name="foo" src="/bar.html"></iframe> <a target="foo">更新</a> 一応動くには動くんだけど、a要素の使い方がなんだかなーと。 軽く調べても出てこなかったので、ちょいと試してみたら document.getElementById("foo").contentWindow.location.reload(); でいけたっぽい。JavaScriptだけど。（ちなみにreload(true)とすればスーパーリロードになるよ） "contentWindow.location.reload()"で調べ直したら色々出てきた。
情報をわかりやすく整理する 前回の授業では、見出し、段落、改行、インライン画像をWebページで使用するための要素を紹介しました。これらの要素を組み合せて、文章を中心にしたWebページを作成することが可能となりました。 今日の授業では、より情報をわかりやすく表現するための手段として、「箇条書き」によって情報を表現する「リスト」と、表を作成する「テーブル」に関係する要素について紹介したいと思います。これらの要素を正しく効果的に用いることで、文章だけで説明するよりも、よりわかり易く情報を表現するためのバリエーションになるでしょう。 情報の整理 1 – リスト リストの効果 まず、リストに関係する要素について解説します。リストとは箇条書きで情報を表現する手段です。リストは短い文字量でも、表現したい論旨を的確にわかり易く表現することが可能となります。また、視覚的にも読み易くなるという効果も期待できま
先週の復習 先週は、HTMLの導入としてHTML(= Hyper Text Markup Language)の重要な概念である「マークアップ」について解説しました。またその上で、HTMLのマークアップの基礎、要素と、開始タグ・終了タグについて学び、基本的な要素をいくつか紹介しました。 まず始めに先週学んだ要素について復習してみましょう。 HTMLの骨組みを構成する要素 html要素：HTML文書のルート要素、全てのHTML書類の土台となる head要素：HTML文書自身に関する情報（例：タイトル、要約、言語、文字コードなど）を指定する body要素：HTML文書の本体部分、Webブラウザに表示される部分 頻出する、基本的な要素 title要素：文書のタイトルを指定する要素、head要素内に記入する p要素：段落を構成する h1 – h6要素：見出し、h1から順番に大きな見出しから小さな見出
先週の復習：Webを支える重要な3つの仕組み まず先週の最後にまとめた、Webを支える重要な3つの仕組みについて簡単におさらいします。 URL Uniform Resource Locator ネットワーク上の情報を一意に特定するアドレスの指定方法 HTTP HyperText Transfer Protocol コンピュータ同士が情報をやりとりするルール HTML HyperText Markup Language 環境にかかわりなく、WWWを記述するための文書記述言語 これからこの授業でWebのページを作成していくということは、この3つの仕組みのなかのHTML(Hyper Text Markup Language)を記述するという作業になります。 では、HTMLとは何なのか、より詳細について考えていきます。 HTML = ハイパーテキスト(Hyper Text) + マークアップ(Ma
当サイトでも何回か紹介したことのあるプロのウェブデザイナーが作成した、高品質なHTMLメールのテンプレートを配布しているサイトを紹介します。 100+ free HTML email templates Campaign Monitor [ad#ad-2] ダウンロードできるファイルには、下記のものがセットになっています。 HTMLメール用のHTML・画像一式 PSDファイル HTMLメール、PSDファイルともにレイアウトは、width=100%、サイドバーが左、サイドバーが右、の3パターンが揃っています（異なるものもあります）。 各HTMLメールは、Outlook2010, Gmail, Lotus Notes, Apple Mail, iPhoneなど人気の高い20のメールソフトでテスト済み、とのことです。 下記に、各デザイナーごとのHTMLメールを紹介します。括弧内は各デザイナーのサ
# 最初にちょっと余談を。Chromium-Extensions-JapanのほうにChrome6 Betaの変更点を書きました。どうぞよろしく。 さて、scriptタグ内をHTMLコメントで括ってからJavaScript書くのって意味あるの? - Togetterの件に関して、関連ネタをいくつか書いておきます。。 まず前提として、scriptタグの中に直にコードを書くというのはできる限り避けたほうが良いです。とはいえ、ちょっとしたコードをいちいち外部ファイルにしていると読み込みのコストも馬鹿にならないので、インラインで書く事もよくあります。なので、以下は主に数行程度のコードをインラインに書く場合の話です。 scriptタグの中に直にコードを書くときはscriptタグに非対応なブラウザのために<！--で始め*1 // -->で閉じるというノウハウは今でも結構使われているみたいです。 しかし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
