2014-09-01から1ヶ月間の記事一覧

HTML全体の構造

DOCTYPE宣言 本来HTML5からは、DTDがなくなりました ところが現在のブラウザでは、DTDをつけなければ「HTMLで表示している旧式のページ」と認識してそのページを扱います(正しい表示結果が得られなくなります) htm要素 DTD以外のすべての要素は、この中に…

Shift Layout

Shift Layout 例 《index.html》 <html lang="ja"> <head> </head></html>

Fluid &amp; Fixed Layout

Fluid & Fixed Layout 例 《index.html》 …

透過を保ちつつPNGを高圧縮する

PunyPNG オンラインでPNG画像を圧縮するWebサービス メタデータなどの情報消して容量を軽くするので画質が劣化しません PNGGauntlet Windows ImageAlpha Mac IE6でもこの圧縮透過PNGは適用され透明になります 447KBの透過PNGデータが「126KB」になりました W…

ロールオーバー

仮の画像を置く 画像の仮置きのスペースを確保する image placeholder CSS3でロールオーバー ロールオーバーで大きくする割合に注意!(アニメーションを見せたいわけではなく、商品を見せたい) 基本構造 クラスdetailにロールオーバー時にフェードインさせ…

アニメーション

CSS3アニメーション CSS3 Tutorial CSS3アニメーションの基礎(Animation編) CSS3リファレンス:アニメーション MOZILLA DEVELOPER NETWORK:CSS アニメーション ねこだまのCSSリファレンス&デモ マーキー 左右や上下にスクロールする文字や画像を表示します <html lang="ja"></html>…

グラデーション

CSS3 グラデーション background に指定することで、ボックスの背景色を線形にグラデーションに指定する値です。 (※ブラウザによって記述方法が変わりますので注意が必要です。 mozilla系ブラウザ -moz-linear-gradient(方向, 開始色, 終了色;) background:…

角丸をつける

角丸(かどまる)をつける border-radius CSS3代表的なプロパティ 角丸 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS3 角丸</title> <style> #radius1, #radius2, #radius3, #radius4 { border: 4px solid #F90; width: 200px; height: 100px; margin: 30px 50px; } #radius1 { border-radius: 20px; } #radius2</meta></head></html>…

CSS3シャドウ

CSS3 ボックスシャドウ ボックスシャドウはボックスモデルの外側・内側に影を作ることができ、 「X軸・Y軸・ぼかし具合・色」を設定することができます。 また、カンマ(,)で区切ることによって複数の影を作れます。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>CSS3 ボックスシャドウ</title> <style> #bShadow1,</meta></head></html>…

予約システム

時間単位で予約できる予約ページを作成 プラグイン「MTS Simple Booking予約システム」をインストールする 予約システムの設定 各種設定 詳細設定をしておく 予約パラメータ カレンダーを表示する 受付を作成直後からにする 予約受付期間 当日から何ヶ月先ま…

Like Boxといいねボタンを設置

Like Box いいねを設置 いいね(Facebook)ボタン:コード生成ページ http://developers.facebook.com/docs/reference/plugins/like/ ※アカウントが認証されていない場合は、以下の画面が表示されます。 ボタンのオプション URL to Like 「いいね!」ボタンの…

ツイートボタンを設置

ツイートボタンを設置 アカウント→「素材」 ツイートボタン:コード生成ページ http://twitter.com/about/resources/buttons#tweet ボタンの選択 表示名(指定項目) 説明 リンクを共有する ツイートボタンと呼ばれるボタンを作成する。 特定のWebページから…

CSS Framework

Object-Oriented CSS OOCSS(オブジェクト指向CSS)のススメ STUDY OOCSS OOCSS(Object-Oriented CSS)の考え方 Bootstrap Scaffolding Twitter Bootstrapのデザインを簡単に変更出来るWebサービス・StyleBootstrap Jetstrap BootstrapのUIがドラッグアンドド…

.htaccessまとめ

拡張子「.php」を「.html」に変換 「.htaccess」に記述する # 全ての拡張子「.php」を「.html」に変換する AddType application/x-httpd-php .php .html index.htmlとindex.phpを混在させる方法 通常WordPressをインストールするとindex.phpにアクセスしても…

掲示板を作成

トップページ 掲示板へのリンクを作る 《index.php》 <html lang="ja"> <head> <meta charset="UTF-8"> <title>テニスサークル交流サイト</title> </head> <body> <h1>テニスサークル交流サイト</h1> <p><a href="album.php">アルバム</a></p> <p><a href="bbs.php">掲示板</a></p> <h2>お知らせ</h2> </body> </html> 入力フォームの作成 《bbs.php》

MySQLデータベースの作成

MySQLデータベースの作成 MySQLに接続してデータベースを作成する CREATE DATABASE(データベース作成) USE(データベース選択) CREATE TABLE(テーブル作成) GRANT(ユーザー作成) コマンドプロンプト XAMPPコントロールパネルの「Shell」ボタンをクリ…

データベース設計:掲示板

掲示板概要 BBS(Bulletin Board System) 作りたい機能をもとにデータベース設計をする必要があります 図式化して考える どのようなデータをどのようなデータ型で保存するのかということを決めるのがデータベースの設計です 掲示板利用者の役割(ロール) …

CSS3 ジェネレーター

多機能型 CSS3プロパティジェネレーター CSS3.0 Maker | CSS3.0 Generator | CSS 3.0 Generator | css3 generator CSS3 GENERATOR CSS3 Playground by Mike Plate CSS3 Generator ボタン特化型 CSS Button Generator for your pleasure CSS GRADIENT BUTTON …