2010-01-01から1年間の記事一覧

ポートフォリオサイトを作る際のまとめ方

ポートフォリオ作成に際して、どのようにまとめていくか。 見せる技術 http://news.mynavi.jp/column/photologue/042/index.html 自分のためには、自分を客観的にみるためにつくる 自分のできる範囲でコントロールして、ポートフォリオの形を決めていく。 身…

WORDPRESSのリモートホストへのインストール ロリポップサーバーの場合

WORDPRESSとはなんですか ブログが作れるウェブアプリケーション。phpで作られてる。サーバーに置く。 または、wordpressのブログサービス。 リモートホストへのインストール レンタルサーバーに、WORDPRESSをインストールしました。 必要条件はphpとデータ…

APIとは

API(application programming interface) 広義では、OSがウィンドウの描画といったプログラムを、アプリケーション向けに公開し、ソフトウェアが開発される間口をひろげることが出来る。 ウェブサイト制作では、企業で開発したデータベースなどをWeb経由で利…

SVG形式とは

XMLベースで記述された、ベクトル画像の形式。 XHTMLに埋め込んで、webページでベクトル画像を表示出来る。 ※ ベクトルデータのビットマップとの違いは、テキストエディタで開く事のできる、文字列のデータ。 ※IllustratorからXMLベースのデータに書き出すこ…

html5で日本語の縦書き・ルビを表示する

ルビ(ふりがな) ruby ルビをふる語句や、ふりがなを含む rt ふりがな部分 rp ルビ対応ではないとき表示される(カッコ)など <h2>ルビ</h2> <p><ruby> 山路<rp>(</rp><rt>やまみち</rt><rp>)</rp> </ruby>を登りながら、こう考えた。 <ruby> 智<rp>(</rp><rt>ち</rt><rp>)</rp> </ruby>に働けば<ruby> 角<rp>(</rp><rt>かど</rt><rp>)</rp> </ruby>が立つ。<ruby> 情<rp>(</rp><rt>じょう</rt><rp>)</rp> </ruby>に</p>

html5でテキストに意味を定義する

マイクロデータの付加 htmlにメタデータを埋め込むための記述方法 itemscope属性で、アイテムの範囲を示す itemtype属性でアイテムのボキャブラリの所在を示す(名前空間) temprop属性を指定して、その要素内のテキストが何を意味しているのか示す <table itemscope itemtype="ボキャプラリのURL"> <tr> <td>チーム</td> <td itemprop="team">H</td></tr></table>…

html5で図版を扱うfigure要素

図とキャプションをまとめる キャプションをあらわす要素 figcaption 動画やリストも入れることができる <html> <head> <meta charset="UTF-8"> <title>img要素の扱い figure要素 | HTML5</title> </head> <body> <section> <h1>figureについて</h1> <p>figureは図とキャプションをまとめる。動画やリストも入れることが可能</p> <figure> </figure></section></body></html>

html5のテキストの意味を表す要素

機械は文脈から情報・意味を読み取る訳ではなく、文字列として認識している。 テキストにマークアップすることで、その要素部分に意味付けをする 時間 time要素 <h2>time要素</h2> <ul> <li>日付や時間をマークアップ</li> <li>datatime属性に「年-月-日T時:分:秒」</li> </ul> <h3>time要素使用例</h3> <time></time>…

IE8以下にhtml5の新しいタグを認識させる

IE9は含まないと条件をつける DOMによる http://www.html5-memo.com/first-html5/html5-003/ 新しい要素を作っていく。 このあと、cssでdisplay: blockを指定していく…

html5で構築する論理構造

見た目の判断ではなく、論理構造で読んでも意味が通じる(CSSオフで読める構造) 音声ブラウザで読み上げても意味が通じる構造 セマンティックWeb コンピュータに情報を判別させる。データから、情報へ。 提唱はWWWの創始者ティム・バーナーズ・リーによって19…

html5で文書のアウトラインを構成する5

らしきもの headerとooter ヘッダーとフッターを扱う <header> <p>ページの解説等</p> <nav> <ul> <li><a href=”#”>メニュー1</a></li> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー3</a></li> <li><a href=”#”>メニュー4</a></li> <li><a href=”#”>メニュー…</a></li></ul></nav></header>

html5で文書のアウトラインを構成する4

nav要素ナビゲーションも要素になった ナビゲーション群を扱う <nav> <ul> <li><a href=”#”>メニュー1</a></li> <li><a href=”#”>メニュー2</a></li> <li><a href=”#”>メニュー3</a></li> <li><a href=”#”>メニュー4</a></li> <li><a href=”#”>メニュー5</a></li> </ul> </nav> <section> <h1>セクションの見出し<…</h1></section>

html5で文書のアウトラインを構成する3

aside要素は付加情報 補足コンテンツを扱う <section> <h1>セクション見出し</h1> <p>主要コンテンツ</p> <aside> <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> </aside> </section>

html5で文書のアウトラインを構成する2

article要素は記事単位 独立した記事群を扱う <section> <h1>新着記事</h1> <article> <h1>記事その1</h1> <p>記事の本文</p> </article> <article> <h1>記事その1</h1> <p>記事の本文</p> </article> </section> <article> <h1>記事その1</h1> <p>記事の本文</p> <article> <h1>関連記事</h1> <p>記事の本文</p> </article> </article>

html5で文書のアウトラインを構成する1

文書を構造化するsection <html> <head> <meta charset=”UTF-8″> <title></title> </head> <body> <section> <h1>大見出し</h1> <section> <h2>節見出し</h2> <section> <h3>項目見出し</h3> <p>本文はここに書きます</p> <div> デザインの都合でsection要素は使用しない </div> </section> <section> <h3>項目見出し</h3> <p>本文はここに書きます</p> <div> デザインの都合でsect…</div></section></section></section></body></html>

divを使用した基本構造からコンテンツモデルに

div自体はアウトラインの意味を持っていない。見出しで推し量るのみ。 <html> <head> <meta charset=”UTF-8″> <title></title> </head> <body> <div id=”header”> <p>ホームページ</p> </div> <div id=”nav”> <ul> <li>メニュー1</li> <li>メニュー2</li> <li>メニュー3</li> </ul> </div> <div id=”content”> <h1>大見出し</h1> <p>本文</p> </div> </body></html>

html5といままでのものをどうしよう?

HTML5きちんと html・xhtmlとの違い DTDが不要 以前の型 文字コードはcharset属性のみ <meta charset=”UTF-8″> 以前の型 <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″> xhtmlとhtml5の関係 xhtmlは機械処理しやすくするためルールがあった xmlで定義し直したhtml タグを自由に定義出来る HTMLよりもルールが厳密 XML宣言が必</meta></meta>…

html5で新規・変更・廃止になった要素と属性

新しい要素elemantと属性attribute 文書構造 section header nav テキストの意味 time mark 動画と音楽の再生 video audio フォーム input datalist webアプリ canvas progress 特定言語rubyなど ruby bdi 変更された要素・属性 small i b address menu 非推…

ウェブアプリってなに?

Chorome webストアを覗いてみるとなじみのものがある。 追加するとブラウザに出てくるものもある。 Webアプリケーションの特徴 実体はサーバー側で管理され、ユーザーは必要に応じてそれにアクセスする形になるため、多くのWebアプリケーションはWebサービス…

html5のブラウザ対応

What's My IP Address - Find my IP Address | BestVPN.org 非対応ブラウザへの対策 閲覧させない 最低限閲覧出来るようにする 同じように閲覧出来るページを作る カテゴリごとの対応 CSS3 Properties CSS3 Selectors HTML5 Web Applications HTML5 Embedded…

html5とはなにか

htmlのテキストマークアップ <html> <head> <meta charset=”UTF-8″> <title>タイトル</title> </head> <body> <h1>見出し</h1> <p>本文本文(!&#8211;paragraph&#8211;) <a href=”link.html”>リンク</a> 本文</p> </body> </html> html5の持つ機能 いままでのバージョン機能を含む→機能が高度 OSブラウザヘの非依存…

html5のページ構造

<html> <head> <meta charset=”UTF-8″> <title>霧の工房について</title> <link rel=”stylesheet” href=”style.css”> <script type=”text/javascript” src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script&gt; <![endif]&#8211;>