2013-04-01から1ヶ月間の記事一覧
記事画面を作成 「topic.php」を作成 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>記事画…</meta></head></html>
トップの一覧と詳細を作成 サイトトップページ「index.php」を作成します 基本構造のみとします <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> </head></html>
更新機能を作成 更新機能を搭載します 「edit.php」を編集 値送信元：formMain 接続：MyBlogDatabase 更新するテーブル：entry_tabale 「更新後の移動先」→「index.php」 ブラウザで確認 「更新」ボタンを押すと、記事一覧に戻ると変更が確認できます 削除機…
一覧画面と接続する 編集画面に移動する場合、URLを手作業で書き換えるは手間がかかります クリックだけで表示できるようにします 「index.php」を編集 編集の文字にリンクを設定します 「edit.php」へのアンカーを入力 Dreamweaverの機能を使ってみます（必…
編集画面を作る 記事を投稿後に編集したい場合に使用する画面です 「edit.php」を作成 「admin」フォルダーに「edit.php」を作成します フォームは、「input.php」と同じ内容です <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> </head></html>
一覧画面を作る 「admin」フォルダーの中に、「index.php」を作成 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> </head></html>
登録画面を作る 「admin」フォルダーを作成 新規PHPファイル作成 ファイル名を「input.php」とする <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> </head></html>
オリジナルブログシステム データベースとWordPressの関係を理解する データベースを準備 phpMyAdminを起動（1）新規データベース作成 データベース名「my_blog」 照合順序「utf8_general_ci」 （2）新規テーブルを作成 テーブル名「entry_table」 フィール…
Emmet 参考サイト
Sass 参考サイト 参考サイト 参考サイト
normalize.css 参考サイト
Maxmert 参考サイト
Sass 参考サイト 参考サイト 参考サイト
Buttons Default buttons Button sizes <p> <button class="btn btn-large btn-primary" type="button">Large button</button> <button class="btn btn-large" type="button">Large button</button> </p> <p> <button class="btn btn-primary" type="button">Default button</button> <button class="btn" type="button">De…</button></p>
Forms Default styles <form> <legend>Legend</legend> <label>Label name</label> <input type="text" placeholder="Type something…"> <span class="help-block">Example block-level help text here.</span> <label class="checkbox"> <input type="checkbox"> Check me out </label> </form>
Base CSS Typography Emphasis classes <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p> <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p> <p class="text-info">Aenean…</p>
Twitter Bootstrapとは Twitter社が作った、CSSフレームワーク iQueryに依存している Twitter Bootstrapを導入 解凍したファイルを管理フォルダーに入れる 新規ドキュメント作成 「index.html」を作成する <html lang="ja"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap の導入</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> </body></html>
Fluid Image <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="style.css"> <title>Fluid Image sample</title> <style> header,figure,footer,section,article { display:block; margin: 0; padding: 0; } body { widt…</link></meta></meta></head></html>
参考サイト ゼロから始めるレスポンシブWebデザイン入門 (ASCII.jp) 「可変グリッドレイアウト」機能の使い方 (Adobe Developer) Adobe HTML5 特設サイト Responsive Design with Mockups 実例 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサ…
メディアクエリとスタイルシート 横幅をいくつかの範囲にわけてデザインを切り替えます 「CSS3メディアクエリ」を利用します 特定の画面サイズで表示したときに適用するスタイルシート 外部スタイルシートを読み込む CSS内に設定を記述 @media only メディア…
CSS3アニメーション CSS3 Tutorial CSS3アニメーションの基礎(Animation編) CSS3リファレンス：アニメーション MOZILLA DEVELOPER NETWORK：CSS アニメーション ねこだまのCSSリファレンス&デモ マーキー 左右や上下にスクロールする文字や画像を表示します <html lang="ja"></html>…
HTML5+CSS3範囲 HTML5リファレンス aside要素の使い方の中で不適切なものをひとつ選びなさい 細目（注釈）を表記するとき 注意事項ページなどで複数の文章を囲むとき メールアドレスを表記するとき 文字を小さくしたいとき a要素が内包できる要素を次の中か…
CSS Selectors 属性セレクタ class属性やid属性も含め、属性の値を使うセレクタ <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>属性セレクタ</title> <style> [class] { color: hotpink; } </style> </head> <body> <h2>SANDWICHES</h2> <ul> <li class="ham">ハム＆チーズサンド</li></ul></body></html>
解説 nav要素 nav要素はページ上のナビゲーションを表します サイトマップページのサイト内リンクは、サイトマップページ上ではメインコンテンツなので、nav要素を用いるのは不適切です 参考 section要素 section 要素はページ上のセクションを表し、セクシ…
Ui Parade - Live Tools Live Tools - Button Builder Live Tools - Form Builder Live Tools - Icon Builder Live Tools - Ribbon Builder
Object-Oriented CSS OOCSS（オブジェクト指向CSS）のススメ STUDY OOCSS OOCSS(Object-Oriented CSS)の考え方 Bootstrap Scaffolding Twitter Bootstrapのデザインを簡単に変更出来るWebサービス・StyleBootstrap Jetstrap BootstrapのUIがドラッグアンドド…
PunyPNG オンラインでPNG画像を圧縮するWebサービス メタデータなどの情報消して容量を軽くするので画質が劣化しません PNGGauntlet Windows ImageAlpha Mac IE6でもこの圧縮透過PNGは適用され透明になります 447KBの透過PNGデータが「126KB」になりました W…
レスポンシブ主要レイアウトパターン プロトタイプを作る 可変レイアウト 可変レイアウトによるレスポンシブWebデザイン 最も利用頻度の高いレイアウトパターン Sサイズ 599px以下 Mサイズ 600px〜979px Lサイズ 980px以上 固定レイアウト 各画面サイズで固…
ゼロから始めるレスポンシブWebデザイン入門 ASCII.jp 日本のスマホサイトは2年間でこんなに変わった WebサイトのRetina対応は必要か？ 流行期を過ぎたレスポンシブ・Webデザインのこれから レスポンシブWebデザインのメリット、デメリット比較まとめ 一個覚…
スマートフォン＆タブレットの歴史 iPhoneの登場 初期のスマートフォンは、1990年代に登場 iPhoneに最適化したWebページ制作の誕生 Androidの登場 2008年にAndroidを搭載したデバイスが登場 タブレットの登場 2010年、Apple社がiPadをリリース 多様なデバイ…
