サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
www.oikawa-sekkei.com
CSS の疑似要素 :before や :after の content プロパティの値にコードを入れて、特殊文字を表示することができる。 ただ、特殊文字のコードをそのまま記述するのではなく、コードは16進数に書き換えてからcontentプロパティの値に記述する必要がある。 また、改行や空白は少し注意が必要。 content で改行や空白を表示する方法についてはこちら » content用の書式 特殊文字のコードを、content プロパティの値にするには、下記のように書き換える。 「&#△△△;」→「¥0▲▲▲」 (△△△は十進数の数値、▲▲▲は十六進数の数値) 記号「»」の場合…「»」→「¥0bb」 書き換える内容は下記。 ・「&」→「¥」 ・「#」→「0」(←数字のゼロ) ・数字は「10進数」→「16進数」 ・最後のセミコロン「;」は省略。 サンプル(例) :before
画像文字のフォントサイズについてのテスト このページをスマートフォンでご覧になってみてください。 レスポンシブWEBデザインの画像文字の、文字サイズの違いによる文字の見え方のサンプルにどうぞ。 以下に表示する画像文字の画像の実際の横幅のサイズは 640px です。 今お使いのスマートフォンの画面サイズに縮小されて見えています。 画像の形式はPNGです。 画像内の文字について↓ フォント: 小塚ゴシック Pr6N 太さ: R アンチエイリアス: シャープ(鮮明) 幅640pxの画像文字サンプル ※今お使いのスマートフォンの画面サイズに縮小されて見えています。 (お使いのスマートフォンの画面の横幅サイズが320pxの場合、画像幅は320px(50%)に縮小されて表示されます。) ※画像の中のピクセル表示( px )は、画像を640px(100%)のサイズで表示したときのフォントサイズです。 結
↑この時計は、画像でもFlashでもありません。 HTML5の、Canvas を使って、アナログ時計を描いています。 現在の時間を示しています。 1秒ごとに関数を呼び出して、針が動くアニメーションとなるようにしています。 金属っぽく色をつけてみました。 文字盤に数字も付けました。 下記のサイトを参考にさせていただきました。ありがとうございます。 local MDC: 基本的なアニメーション [HTML5] Canvasを使ってアナログ時計を作成してみた - YoheiM.NET ソースコード Javascript // ページ読み込み時に init関数を実行 window.onload = function() { init(); }; // clock関数を1秒周期で繰り返す function init(){ clock(); setInterval('clock();',1000);
[いいね!]ボタン(Like Button)を、ウェブサイトに設置する時、URLを指定する必要がある。 複数のページに[いいね!]ボタンを設置する時、それぞれのページのURLを記述する必要があるが、それは面倒。 Javascript でURLを取得して、それを[いいね!]ボタンのソースコードに設定すれば、いちいちURLを入力する手間が省ける。 サンプルサイト:及川治建築設計室 このサイトは全ページに[いいね!]ボタンを設置しています。 各ページのURLを「いいね!」出来るようになっています。 ※「いいね!」ボタンのカスタマイズ方法はこちら Facebook[いいね!]ボタン設置・カスタマイズ 設置方法 1.準備。「JavaScript SDK」コードを設置 Facebook の[いいね!]ボタンプラグインのページで「Like Buttonのプラグインコード」を取得する。 ニュースフィードの
テキストエリアに入力した住所から緯度・経度を取得、地図上にマーカーと情報ウィンドウを表示。 また、地図をクリックするとクリックした場所にマーカーと情報ウィンドウが表示され、 情報ウィンドウの中に緯度と経度が表示されます。 下の「◆lat(緯度):Lat ◆lng(経度):Lng」の赤い文字の箇所にも表示されます。 参考サイト: ジオコーディング|Google Maps JavaScript API v3|Ajax|PHP & JavaScript Room Google Maps JavaScript API V3 - Google Maps API — Google Developers 住所から緯度・経度を取得する、Googleマップの表示の仕方 Google Maps JavaScript API バージョン 3(V3) での、Googleマップの埋め込み方法をご紹介。 テキストエリ
ライセンスが商用利用OKのフリーフォントを掲載しているサイトの一部をご紹介 (2013年8月21日現在の情報です)。 ↓ WEBフォントの設定方法はこちら WEBフォントの設定方法 ライセンス体型は変わる場合もありますので、フォントファイルを使用の際は、 念のために、各サイトでライセンスを確認してください。 ※サンプルテキストを表示しておりますが、環境によりフォントファイルのロードに時間がかかるため、フォントが反映されるまで時間がかかります。ご了承ください。 (Internet Explorer 7 以下の古いIEではサンプルテキストは表示されず、画像(スクリーンショット)のみの表示となります。) 明朝体 梅フォント
viewport の設定のため、head に下記のタグを入れていた。<meta name="viewport" content="width=device-width,user-scalable=yes" /> すると、スマートフォンの画面で表示すると、 横幅を画面いっぱいに設定していたヘッダー部分やフッター部分の背景が途切れていた。 具体的には下図のような感じ。 背景が途切れた原因 viewport に width=device-width を設定していると背景が途切れるようだ。 viewport に width=device-width を設定していると [ body の横幅 ] = [スマートフォンの画面の横幅] と、解釈されるよう。 今回不具合が出たページのコンテンツの横幅は 940px に設定しており、 スマートフォンの画面の横幅は 320px 。 コンテンツの横幅は940pxな
Googleカスタム検索(検索窓)を自分のホームページに設置する 自分のホームページに検索窓をつけて、サイト内検索を可能にする方法をご紹介。 Googleの、「カスタム検索」という機能を使います。無料です。 検索窓を表示するページと、検索結果ページを分ける方法でご紹介。 Googleカスタム検索 【設置例】 ●検索窓 :及川治建築設計室 (←このページの右下に検索窓を設置。) ●検索結果:及川治建築設計室 サイト内検索 Googleカスタム検索(検索窓)の設置方法 検索窓と検索結果ページを分ける方法で設置します。 【設置例】 まず「カスタム検索エンジンの作成」をしてから、 自分のウェブサイトにGoogleカスタム検索(検索窓)を設置します。 ※Googleカスタム検索エンジンの設定の際の管理画面は、IE10で作業したらフリーズしてしまったので、私は Firefox でGoogleカスタム
本サイトはさくらインターネット(プラン名:さくらのレンタルサーバ・スタンダード )を使用している。 ヘッダーやサイドバーやフッター部分はSSI(インクルード)を使って表示している。 SSI ご利用の手引き - CGI・PHP・SSI について|さくらのレンタルサーバ|さくらインターネット公式サポートサイト SSIを動かすには、ファイルの拡張子を「.shtml」か「.shtm」にする必要があるが 拡張子が「.html」でもSSIを動かす事ができる。 .htaccess ファイルで設定する。 拡張子が「.html」でもSSIを動かす .htaccess への記述内容 .htaccess が有る場合は、下記を .htaccess に追記する。 AddOutputFilter INCLUDES .html .htm ※注意:以前は「AddType text/x-server-parsed-html
Google カレンダーを自分のサイトに表示する事が出来る。 数人でスケジュールを共有したいときや、イベントなど大勢の人にスケジュールを告知したいときなどに便利そう。 ▼表示例[W400px * H300px]▼ Googleカレンダーの公開範囲を設定する カレンダーを一般公開する か、特定の人と共有するかを設定する。 Google のアカウントにログインし、Googleカレンダーを開く。 Googleカレンダー カレンダーの左側にあるメニューの、カレンダー名の右側の[▼]をクリック→[このカレンダーを共有]。 カレンダーの詳細ページが表示される。 誰でもカレンダーを見れるようにするには、「このカレンダーを一般公開する」にチェックを入れる。 「特定のユーザーと共有する」場合、共有するユーザーのメールアドレスは、Google アカウントを持っているユーザーのメールアドレス。 追加したユーザー
HTML5 の Video 要素は、Flashなどのようなプレーヤーを使わずに動画を再生できる。 だが、クロスブラウザに対応させるために、 3つ(3種類の形式)も動画を用意しなければならないのが面倒。 HTML5 video での動画表示サンプル videoの表示部をマウスオーバーで、再生・一時停止などのボタンが表示される。 video 要素に「autoplay」属性を追加する事で自動再生させられるが、あまり推奨されていないようなので、「autoplay」属性は入れていない。再生ボタンで動画再生スタート。 サンプルの video のソースコード <video width="320" height="304" poster="../../common/images/html5_video.jpg" controls > <source src="../../common/flash/flv/
画像を使わずに、CSSで立体的なボタンが作れます。 そのCSS(CSS3)をご紹介。 ※IE6,IE7,IE8 向け改良版も追記しました(2012/05/29)。 表示例 及川治建築設計室 Internet Explorer ではIE9しかきちんと見れていない。 IE6,IE7,IE8 ではグラデーションと影は見えていない。 (IE8 以下の対応については「IE6,IE7,IE8 向け改良版」参照。) HTMLのソースコードとCSS サンプル 及川治建築設計室 a.btn { /* 文字色、ボタンの横幅など */ color:#5F2500;padding:5px 0;display:block;width:200px;text-align:center; /* 背景のグラデーション */ background: linear-gradient(to bottom, #FFF, #CCC)
このページを最初にブックマークしてみませんか?
『及川治/一級建築士(栃木県小山市)』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く