HTML5リファレンス
HTML5とCSS3の技法を使うことで、表現、装飾の幅は拡がります。しかしブラウザによって対応状況に差があるため、使うポイントについては注意が必要です。意図したとおりに見えない状況でも重要な情報は伝わるように使いどころを工夫しないといけません。 属…
HTML5とCSS3を使うことで実現できる事 画像を使わずに背景に角丸を作れる 背景をグラデーションにできる 背景を透過にできる 背景の角度を調整できる before、afterの指定ができて、指定の前に(後に)何か置く事ができる 奇数番目、偶数番目に対して指定が…
ソースコードの掲載時に行番号出るの、いいな♪ 出したいな♪ とスタイルシートとフッターをいじって挑戦してみましたが、だめだった・・。
ASCII 「西畑一馬のjQuery Mobileデザイン入門」に沿ってスマートフォンサイトのデザインを作成 「お問合せ」ページからPHPで作成したチェック画面、サンキュー画面へ遷移させます。 サンキュー画面ではレンタルサーバーのデータベースに入力データ格納、入…
Facebookいいねボタン Facebookの「いいね」誘導用には「いいね」ボックスと「いいね」ボタンがあります。 ボックスは大きい、ボタンは小さい。大きいのは気恥ずかしいな・・ボタンにしよう。はてなダイアリーにいいねボタンを設置するのはややこしいそうな…
スマートフォンサイト動作テスト用ブラウザ「Safari」 Windows safariで検索してインストールする 設定で開発メニューが表示されるよう設定する iphone、iPadなどタブレット、スマートフォンなどの各種ユーザーエージェントに対応している jQuery mobileでの…
ポイント ビルボード画像の表示にNivoSlliderを使う Nivosliderのjs、画像、CSS、htmlのファイル構造を保ったままカズタマイズする (ファイル構造を保つために、NivoSliderのディレクトリの中に、BIZINのファイルをマージする形にしました。) 修正、カスタ…
ポイント yuga.jsを使い、ナビゲーションのロールオーバー smoothscroll.jsを使い、ページ上部へ戻る機能をゆっくり動作させる 来訪するたびに違うビルボード画像を見せる(4種類) tableを使わずに横並び(ulまたはdlで) アップしたサイトはこちら 「企業活…
WordPressレッスンブックの通りにサンプルページを作成 トップページを作成 ヘッダーを表示 スタイルシートでデザインを表示 記事のタイトルと本文を表示 記事のデザインを表示 記事の投稿日時とカテゴリーを表示 画像を使ってデザイン トップページの記事を…
Webmastertoolに自分のサイトを登録します WebmastertoolはGoogleのサービスです。 Webmastertoolの画面上でURLを入力して「サイトを追加」をクリックします サイトマップがありませんと表示されますので、サイトマップを作って送信しましょう。 無償ツール…
140×140、300×300、140×300、300×140の画像だけでレイアウトを作る練習をしました。 完成形 html5形式で作ります。 作成のコツ まず、pタグを使ってすべての画像を並べます。 html5ではpタグの代わりにを使うので、に打ち替えます。 html5ではdivタグの代わ…
地図の中心となる緯度経度を指定し、地図の拡大レベルを指定します。 緯度経度情報は下記のサイトで取得することができます。 座標として提示される35.710208, 139.812734という数字が緯度経度情報です。 Geocoding 池袋駅を中心とした地図を取得してみます…
iPhoneが持っているGPS機能を活用して位置情報を取得するプログラムです。 html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>iPhone位置情報取得</title> <script> //正常に緯度経度情報が取得できた時に呼ばれる関数 function successFunc(e){ var gps = document.getElementById("…</meta></meta></head></html>
html <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Mapsルート検索</title> <style> #map_canvas{ width:700px; height:500px; } #container{ width:700px; margin:auto; } </style> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script src="mapdrow.js"></meta></head></html>
東京駅から埼玉県の長瀞駅まで車を運転して行くルートマップを表示します。 APIの指定項目を詳細に指定するだけで、きめ細かいドライブルートの指示が得られます。 こんな情報が自動的に出てくるなんてすごいですね。 html <html lang="ja"> <head> <meta charset="UTF-8"> <title>ルート検索マップGoogle Maps </title></meta></head></html>…
池袋駅からフェリカまでのルートマップを表示します。 html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>ルートマップ</title> <style> html, body { margin:0; padding:0; } div#map_canvas { width:330px; height:370px; }…</meta></meta></head></html>
TwitterのSearch APIを利用して「池袋駅から半径3km」のつぶやきを自動で連続取得・表示します。 用意するファイル index.html style.css js/modernizr.js js/geo.js ファイルの内容 index.html <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <title>GPS機能とTwitterの連携</title> </meta></meta></head></html>
Twitterとはてなのアプリ連携で実現 はてなダイアリー管理画面の設定から外部サービス連携を選択 Twitter連携設定で自分のTwitterアカウントを入力して有効にします Twitter側で見てみると自分のツイートにはてなの記事が表示されました。 参考はてな記事公…
RSS配信用のxmlファイルを設置しているブログの情報は自動取得して表示することができます。 自動取得できるかどうかの見分け方 このオレンジのアイコンが出ていれば可能 (これはChromeでRSSワンタッチ登録拡張機能をインストールしている場合に表示されま…
Google APIを活用します。 Google Developersのグラフ作成用API「Google Chart Tools」の中にあるInfographicsにQRコード作成機能があります。 入力フォーム qrcode.html <html> <head> <meta charset="UTF-8"> <title>QRコード入力画面</title> <style> body{ text-align:center; } </style> </head> <body> <p>QRコードにしたい文字を入力し</p></body></html>…
Google Analytics(無料)を活用するとサイトのアクセス解析ができます。 Google Analyticsと検索してサイトを表示、Googleアカウントを使ってアカウントを作成します。 はてなダイアリーをトラッキングする 設定-外部サービス連携-Google Analytics連携にト…
Twitterのウィジェットを作成し、はてなダイアリーのサイドバーに表示します 自分のタイムラインを表示することもできますが、テーマを決めて検索、収集した記事を表示することもできます。 設定からウィジェット-新規作成 ウィジェット作成画面で、タイムラ…
Youtube側でデータ形式の変換をすべて実行してくれるので、用意した動画をそのままYoutubeにアップロードするだけで見せる事ができます。F4V形式:MPEG4を伴ったFlashビデオ アノテーション:指定のタイミングで文字を吹き出しなどで表示させることができま…
授業でWordpressの導入について学習しましたので、自宅でも同様にインストールしてみます。 Wordpress公式サイトよりwordpress-3-5-1-ja.zipをダウンロード。 回答したwordpressフォルダをxampp\htdocsフォルダに格納。 Xamppを起動し、Mysqlをstartさせてダ…
はてなのデザインをカスタマイズして見栄えを整える事により、ブログを書くモチベーションを高めようと目論見、カスタマイズにチャレンジしました。 しかし、h4に見出し画像を出そうと、何度スタイルシートを更新してもうまくいかない。どうやらはてなのデザ…
●PHPの教科書にそって、データベースをさらに勉強する。 <PHPの教科書のページ:Part5 実用的なプログラムの作成 P.187> 昨日作成したmydb2にPHPAdmin管理画面からフィールドを3つ追加する。(sales, created, modified) テキストのダブルクォーテーショ…
有料レンタルサーバー「ドメインキング」でデータベースを動作させる Dreamweaverで作成しておいた下記の4つのファイルをドメインキングのサーバーにFFFTPを使ってアップロードします。 この際、ドメインキング側でデータベースの設定、PHPの設定が必要にな…
安さで評判のロリポップとドメインキングを比較検討の結果、現時点での初期費用の安さにつられてドメインキングに申し込み。 ドメインを指定しないと申し込みが先に進まないようだったので、ドメインも即効でドメイン名を決めて申し込みした! ドメインキン…
テストサーバーXamppでデータベース動作させる Xamppを起動してstartさせた、MySqlのAdminをダブルクリックする。何も開かなければApacheの方のAdminをダブルクリックする。 と、Xamppの管理画面が開く。 左下のほうにあるphpMyAdminをクリックする。 と、ph…