東京・小金井市のWEB制作会社の豆知識

コンテンツのテキスト部分より目立つようにしたい場合に、画像を作成して表現することの多かった見出しやキャッチコピー。「Google Web Font」を使うと、簡単に豊かなフォント表現が可能。日本語フォントも増えてきたので使い方をメモ。 「Google Web Font」を使った文字の実装方法 「Google Web Font」のサイト内に用意されているCSSファイルにリンク方法でも実装は可能ですが、追加の度に全てのHTMLファイルを変更するのは大変なので、インポート（@iｍport）を使った方法で実装。 使いたいフォントを検索して、フォントのソースを確認。 サイト内の検索フォームからイメージに近い文字を検索。希望フォントの詳細ページで「SELECT THIS FONT」をクリック。 下部に表示された「Family Selected」を開き「EMBED」を「@IMPORT」に切り替えて「ソースコード」を確認。 Google Fonts CSSを編集してアップロード 文字を変更したいクラスに、前の工程で確認した「ソースコード」を記載。 ※下記の参考例は「 Noto Sans JP 」というフォントを使用。 CSS @import url('https://fonts.googleapis.com/cssfamily=Noto+Sans+JP&display=swap'); .jpn-font{ font-family: 'Noto Sans JP'; }

オンマウス時に表示されるカーソルの形を変更したいとの依頼があったので内容をメモ。知っておくとなかなか便利。 CSS a { cursor: pointer; } アンカータグでなくても有効です。 スタイルシート［CSS］/ページ全般/カーソルの形を変更する - TAG index

携帯で撮影した写真をブログに投稿する人も多いですが、どんなにきれいに撮影しても色味が微妙な場合も多いはず。そんな時に便利な自動で写真を美味しそうに変換してくれるサイトを発見したのでメモ。料理と同じく、一手間加えることで、料理がの写真が一層美味しそうになります。 参考サイト 超!美味しく変換 - 料理の写真をおいしそうにするよ♪

サイトのURLが変更になったとかで見かける「○秒後にページが切り替わります」という表記。タグを入れるだけで簡単に実装できるのでメモ。※この方法の場合、〜秒後に移動させる〜秒の部分をできる限り短くすることがSEOにおいては効果的であるようです。 HTML <meta http-equiv="refresh" content="転送されるまでの秒数; URL=http://移転先ページ"> SEO で失敗しないためのリダイレクト設定

商用サイトでも無料で利用できる、ひらがな・カタカナ・漢字などが含まれている日本語のフリーフォントが一度に紹介されているサイトを見つけたのでメモ。 特に手書き風の文字はロゴやポイントに使えて非常に便利。 参考サイト 商用サイトでも無料で利用できる日本語のフリーフォント集

PHPで、ユーザーエージェントを取得して各キャリアとPCに振り分ける方法をメモ。スマートフォン、 DOCOMO、 SOFTBANK、 AU、 WILLCOMの振り分けをします。 PHP function ketai_class() { // キャリアの種類を取得 $ua = $_SERVER['HTTP_USER_AGENT']; // 取得した種類によって判別 switch (true) { case (preg_match('/iPhone|iPad/', $ua)): echo 'ios'; break; case (preg_match('/Android/', $ua)): echo 'Android'; break; case (preg_match("/^DoCoMo/i", $ua)): echo 'DoCoMo'; break; case(preg_match("/^(J-PHONE|Vodafone|MOT-[CV]|SoftBank)/i", $ua)): echo 'SoftBank'; break; case(preg_match("/^KDDI-/i|/UP.Browser/i", $ua)): echo 'au'; break; case(preg_match("/^WILLCOM/i", $ua)): echo 'WILLCOM'; break; } }

求人サイトやECサイトなどカートを何度も使う必要のあるサイトの場合、カートに入れるや検索フォームなど、よく使う項目は常に表示されているほうが便利。サイドメニューを固定する方法もあるけど、スクロールにあわせてサイドメニューがついてくる方法があったのでメモ。 使用するjqueryライブラリー jquery-1.2.6.min.js jquery-ui.min.js jquery.scrollfollow.js HTML（head部分） <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript" src="jquery.scrollfollow.js"></script> HTML（body部分） <div id="menu">コンテンツ</div> javascript $(function (){ $('#menu').scrollFollow(); });

多くの画像を効果的に見せることができるスライドショー。ギャラリーサイトでよく見かけますし自分自身も利用しているのですが、基本はサムネイルは横並び。そんな中、サムネイルを縦に表示できるものを見つけたのでメモ。 使用するスクリプト slideshow.js mootools.js HTML <!-- スライドショー表示部分 --> <div id="show" class="slideshow"> <!-- ローディング画像 --> <img src="lightpop-ico-loading.gif" width="32" height="30" style="position:relative; top:150px; left:190px"> </div> CSS slideshow { display: block; position: relative; z-index: 0; } javascript <script type="text/javascript"> //<![CDATA[ window.addEvent('domready', function(){ var data = ['sample02_1.jpg', 'sample02_10.jpg', 'sample02_11.jpg', 'sample02_12.jpg', 'sample02_13.jpg', 'sample02_14.jpg', 'sample02_2.jpg', 'sample02_3.jpg', 'sample02_4.jpg', 'sample02_5.jpg', 'sample02_6.jpg', 'sample02_7.jpg', 'sample02_8.jpg', 'sample02_9.jpg']; //スライドショーで表示する画像ファイル名 var myShow = new Slideshow('show', data, { controller: true, //オンマウスでコントロールパネル表示 height: 300, //スライドショー高さ hu: 'http://sample.com/', //画像(サムネイルも同じ)のある場所のパスを入れる thumbnails: true, //サムネイル表示 width: 400 //スライドショー幅 }); }); //]]> </script>

CSSで文字の一文字目を大きくする方法をメモ。文字の大きさに限らず、色を変えたり背景色をつけたりとポイントとして活用できるので「アイコンを作るまでもないが見出しを強調したい」という時に便利です。 HTML <p>CSSで文字の一文字目を大きくする</p> CSS p:first-letter { font-size: 24px; font-style: bold; line-height: 1.5; }

セレクトボックスを使用して検索をする場合通常は「PHP」で処理するのですが選択項目が単数の場合は選択しただけで移動する方法が便利な場合も「javascript」による方法を見つけたのでメモ HTML <select onChange="moveUrl(this)"> <option value="">選択してください</option> <option value="URL1">リンクテキスト1</option> <option value="URL2">リンクテキスト2</option> <option value="URL3">リンクテキスト3</option> <option value="URL4">リンクテキスト4</option> </select> javascript function moveUrl(selection){ var url = selection[selection.selectedIndex].value; if(url != ""){ location.href=url; } }

入力フォームの制作で「その他」が選択された時だけテキストボックスを有効にしてほしいと依頼されたので「javascript」による方法をメモ javascript function Dture(objId){ document.getElementById(objId).disabled = true; } function Dfalse(objId){ document.getElementById(objId).disabled = false; } HTML <input type="radio" name="reason" value="理由1" onclick="Dture('other_reason');" id="reason">理由1 <input type="radio" name="reason" value="理由2" onclick="Dture('other_reason');" id="reason">理由2 <input type="radio" name="reason" value="理由3" onclick="Dture('other_reason');" id="reason">理由3 <input type="radio" name="reason" value="" onclick="Dfalse('other_reason');" id="reason">その他 <input type="text" name="other_reason" id="other_reason"> 「その他」選択時のみテキストボックスの書き込みが可能です。

フォームから値を送信するときにチェックボックスのみ方法が特殊なので忘れないようにメモ「name」に[]をつけるのがポイント HTML <input type="checkbox" name="check[]" value="1">1 <input type="checkbox" name="check[]" value="2">2 <input type="checkbox" name="check[]" value="3">3 PHP if(isset($_POST['check']) && is_array($_POST['check'])){ $check = implode(",", $_POST['check']); }else{ $check = ''; }

パソコンで使用している画像を携帯で呼び出す場合、そのまま利用すると大抵サイズオーバー。かといって携帯用にサイズを作り直して登録するのも面倒なので便利な方法をメモ。 PHP $img_tmp = "sample.jpg"; //画像サイズを取得 $imgary = getimagesize($img_tmp); $srcwidth = $imgary[0]; $srcheight = $imgary[1]; //リサイズサイズの設定 $newwidth = 220; $newheight = $srcheight * 220 / $srcwidth; //元画像のキャンバスを生成 $image = imagecreatefromjpeg($img_tmp); //縮小後のキャンバスを生成 $newimage = imagecreatetruecolor($newwidth, $newheight); //元画像を縮小してコピー imagecopyresampled($newimage, $image, 0, 0, 0, 0, $newwidth, $newheight, $srcwidth, $srcheight); imagedestroy($image); header("Content-type: image/jpeg"); //jpeg方式で保存 imagejpeg($newimage); //リソースを解放 imagedestroy($newimage); GD関数を使うためにはサーバーのConfigure Command に「--with-gd」がインストールされている必要があります。

自営サイトに、コメント機能を実装した際に、削除機能をつけ忘れてしまった時にことがきっかけで思いついた内容パスワード入力を設けると工数がかかるので、個体識別番号で判別する方法で実装 PHP ドコモの場合:iモードID(guid) $id = $_SERVER['HTTP_X_DCMGUID']; ※SSL通信時(https)では、iモードIDを取得できない。 以下のように引数に guid=ON というのを入る。 (リンクの場合) <a href="http://sample.com/test.php?guid=ON">test</a> (フォームの場合) <form action="./sample?guid=ON" method="post" name="form1"> <input type="submit" value="送信"> </form> auの場合:EZ番号(サブスクライバID) $id = $_SERVER['HTTP_X_UP_SUBNO']; ソフトバンクの場合:X_JPHONE_UID $id = $_SERVER['HTTP_X_JPHONE_UID']; ※古い機種では取得できない。

ホームページに「ブックマーク登録」ボタンをつけてほしいと言われたのでブラウザ毎にブックマーク登録ボタンを付ける方法をメモ。「Firefox」の場合、登録は出来るけど、そのままの設定ではサイドバーに表示されてしまうのが難点です。 PHP $Agent = getenv("HTTP_USER_AGENT"); if(ereg("MSIE", $Agent)){ 　　echo"<input type='button' value='お気に入りに追加' onclick='window.external.AddFavorite('URL','サイトタイトル')'>"; }elseif(ereg("Firefox", $Agent) || ereg("Opera", $Agent) ) { 　　echo"<a href='URL' rel='sidebar' title='サイトタイトル'>ブックマーク</a>"; }elseif(ereg("Safari", $Agent)){ 　　echo"Ctrl[コマンド]+D"; }

リストの余白を取り除くときに「margin:0px」としてしまうとブラウザによってはリストマーカーも表示されなくなってしまう。この余白のうまい取り除き方があったのでメモ CSS ul { margin: 0 0 0 1em; padding: 0; } 左マージンは、リストマーカー1つ分以上の大きさが必要(以下は1つの目安)ul要素に設定する場合:1em 程度ol要素に設定する場合:1.5em 〜 2em 程度マージンとパディングを「0」にして、左マージンにだけ値を設定する感じらしい

既存のHTMLページにPHPを組み込みたいとき、ファイル名を変更せずにそのままの拡張子「.html」で使いたいということがよくある。サーバーに負荷がかかるので、アクセスの多いサイトにはおすすめできないですが、.htaccessで簡単に設定変更できるのでメモ .htaccess AddType application/x-httpd-php .htm .html ※Apacheの設定で.htaccessが使えることが前提です

ホームページ制作でHTMLのマークアップをする時に必ず必要となるのがデフォルト設定値の初期化人によって書き方は様々ですがまとまったものがあったので参考までに CSS body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, brockquote, pre, table, caption, th, td, address, form, fieldset, legend, object { margin: 0; padding: 0; } h5, h6, pre, table, code, kbd, samp, acronym, input, textarea { font-size: 100%; } a,ins { text-decoration: none; } address, em, cite, dfn, var { font-style: normal; } input, textarea { font-family: sans-serif; font-weight: normal; } img { vertical-align: baseline; } a img { border: none; }

PHPで書き出したチケットページを印刷しようとした時に作成したCSS背景に設定している画像は通常は印刷できないんですね。他のサイトを参考にしつつ、IE6での不具合も解消。もっとスマートな方法があるかも。 HTML <div class="ticket"></div> <div class="box">サンプルテキスト</div> CSS .ticket { width: 490px; height: 135px; margin: 0px; display: list-item; list-style-image: url(img/bg_ticket.gif); list-style-position: inside; } .box { width: 490px; height: 135px; margin-top: -125px; }

javascriptを検索してたら発見。ユーザビリティーを考えると文字サイズの変更は便利なのでメモ javascript function fontsize(size){ document.getElementById("font").style.fontSize=size+'%'; } HTML <a hre="javascript:fontsize(150);">文字サイズ150%</a> <a hre="javascript:fontsize(100);">文字サイズ100%(標準)</a> <a hre="javascript:fontsize(75);">文字サイズ75%</a> 文字サイズを変更したい部分を「id="font"」とID指定。数値部分を変えれば文字サイズも変わります。

モーダルウィンドウの使用により、最近はあまりなくなりましたが一部のホームページ制作で希望される「ポップアップ」javascriptによる制作方法をメモ HTML <a href="#" onclick="window.open('1.html', 'win1', 'width=30, height=40, scrollbars=yes');">ボタンとかテキスト</a> オプションソースコードメニューバー表示menubar=yes/noツールバーの表示toolbar=yes/noURL入力欄の表示locaction=yes/noスクロールバーの表示(右側)scrollbars=yes/auto/noステータスバーの表示(最下段の表示)status=yes/no

サイト管理をやっていると広告バナーをランダムで表示させる場合もでてくるので、便利なランダムスクリプトをメモ PHP $ar = array("PHP", "WEB", "ホームページ", "制作", "作成"); $rd_keys = array_rand($ar, 3); echo $ar[$rd_keys[0]]; echo $ar[$rd_keys[1]]; echo $ar[$rd_keys[2]];

金額表示や、桁数の多い時など、数値を出力する時に3桁ごとにカンマで区切りを入れる方法があったのでメモ。これがあるだけで金額もかなり見やすくなります。 PHP $float = 123456789; number_format($float); number_format($float, int); number_format($float, int, str1, str2); 引数効果int小数点以下第何位まで表示するかを指定str1ピリオド「.」の代わりに使用したい文字を指定str2カンマ「,」の代わりに使用したい文字を指定

ホームページで何かのリストを一覧表示するような場合に文字数を揃えて表示する方法があったのでメモ PHP $txt = 'だるまさんがころんだだるまさんがころんだだるまさんがころんだだるまさんがころんだだるまさんがころんだだるまさんがころんだだるまさんがころんだだるまさんがころんだだるまさんがころんだ'; mb_strimwidth($title, 0, 20, '...', 'UTF-8'); 最初の文字から数えて20バイト目(2バイト文字だと10字)まで表示し、あふれた文字は「...（三点リーダー）」とする