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

創業時（2010年頃）にお世話なっていた「clearfix」。当時は要素を横に並べると言えば定番だったが、今はより簡単な「display:flex」の使い方をメモ。 HTML <ul> <li>要素01</li> <li>要素02</li> <li>要素03</li> </ul> CSS ul { display: -webkit-flex; display: flex; } 上記の初期設定では左揃え、上揃え、要素が増えても改行はなく、幅は内包する要素の幅（テキスト量・画像サイズ）によって変化する。余白はなし。配置や並びを変更する際は下記プロパティを同セレクターに追加。 プロパティ説明値効果 flex-direction並び順を指定row左から右へ配置 row-reverse右から左へ配置 column上から下へ配置 column-reverse下から上へ配置 flex-wrap改行を指定nowrap改行させずに一列に配置 wrap改行して上から下へと配置 wrap-reverse改行して下から上へと配置 justify-content水平方向の配置を指定 flex-start左揃え flex-end右揃え center左右中央揃え space-between両端の余白を空けずに等間隔で配置 space-around全て等間隔で配置 align-items垂直方向の配置を指定stretchデフォルト flex-start上揃え flex-end下揃え center上下中央揃え baselineベースライン また、子セレクターに指定することで効果のあるものもある。 プロパティ説明値order並び順を指定-1、0、1、2flex-grow伸び率を指定1、2、3flex-shrink縮み率を指定1、2、3flex-basisベースの幅を指定10％、20％flex均等幅1 参考までに以前の方法（clearfix版）が知りたい方は下記 HTML <ul class="clearfix"> <li>要素01</li> <li>要素02</li> <li>要素03</li> </ul> CSS（clearfix版） .clearfix { zoom: 100%; min-hight: 0px; } .clearfix::after { content: ""; display: block; clear: both; } CSSフレックスボックス(display:flex)の使い方 もう迷わない！CSS Flexboxの使い方を徹底解説

「欅BodyTherapistSchool」の制作に携わった際に使用したスライドショウの実装方法をメモ。拡大しながらのフェードインなので、画像を切り替えるのみよりも躍動感が感じられる。 HTML <figure id="mainimage"> <ul class="swiper-slide"> <li class="active"><img src="画像URL"></li> <li><img src="画像URL"></li> <li><img src="画像URL"></li> </ul> <div class="inner"> <h2>キャッチコピーを記載/h2> </div> </figure> <script> $(function(){ slideSwitch(); setInterval("slideSwitch()", 9500 ); //9500は次の画像に切り替わるまでのミリ秒 }); </script> CSS #mainimage{ width: 100%; height: 80vh; margin: 0 0 30px; position: relative; overflow: hidden; } #mainimage .swiper-slide{ width: 100%; height: 80vh; position: absolute; overflow: hidden; } #mainimage .swiper-slide li{ background: #fff; width: 100%; height: 80vh; position: absolute; top: 0; left: 0; } #mainimage .inner{ margin: 20vh 0 0 50%; color: #fff; position: relative; z-index: 10; } #mainimage .swiper-slide li img{ width: 100%; position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; } #mainimage .swiper-slide li.active{ z-index:9; } #mainimage .swiper-slide li.last-active{ z-index:8; } #mainimage .swiper-slide li::before{ background: url(../image/top/mask.png); content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: 1; } jQuery function slideSwitch(){ var $active = $('#mainimage ul li.active'); if($active.length == 0 ) $active = $('#mainimage ul li:last'); var $next = $active.next().length ? $active.next() : $('#mainimage ul li:first'); if($(window).width() >= 980){ $active.animate({'width':'110%', 'left':'-5%'}, 7000).delay(1000).queue(function(){ $active.find('img').animate({'opacity':'0'}, 1000, function(){ $active.addClass('last-active'); $next.addClass('active'); $active.find('img').css({'opacity':'1.0'}); $active.removeClass('active last-active').css({'width':'100%', 'left':'0'}).dequeue(); }); }); }else{ $active.animate({'height':'70vh', 'top':'-5vh'}, 7000).delay(1000).queue(function(){ $active.find('img').animate({'opacity':'0'}, 1000, function(){ $active.addClass('last-active'); $next.addClass('active'); $active.find('img').css({'opacity':'1.0'}); $active.removeClass('active last-active').css({'height':'60vh', 'top':'0'}).dequeue(); }); }); } } 東京・練馬の整体・美容矯正・ヘッドマッサージの欅BodyTherapistSchool

観光地になっている飲食サービスのホームページの制作に携わった際に、外国の方にも理解できるようにと多言語での対応を求められた際に使用した、「クッキー（cookie）を使った言語切り替え」の方法をメモ。一般的には言語ごとにディレクトリ作成して、別ページで作られるほうが多いかも。 jquery.cookieの取得と設定 クッキーを扱うのは大変なため今回は「jquery.cookie.js」というライブラリを使用。下記のサイトからダウンロード後にサイトにアップロード、または CDNサイトのURLを利用。 https://github.com/carhartl/jquery-cookie cookieの保存 $.cookie('保存したいcookieの名前', '保存したい値', { expires: 有効期限 , path: '有効範囲' }); 通常、cookieの有効期限はブラウザが閉じられるまでですが、上記の有効期限の項目で設定可能。（小数で指定すると時間単位、秒単位で指定可能。） cookieの取得 $.cookie('取得したいcookieの名前'); cookieの削除 $.removeCookie('削除したいcookieの名前'); //cookieの保存時に有効範囲を設定していた場合。 $.removeCookie('削除したいcookieの名前', { path: '有効範囲' }); 使用事例 HTML <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> <select class="chagelang"> <option value="jp">日本語</option> <option value="us">English</option> <option value="cn">中文</option> <option value="kr">한국어</option> </select> <section> <hgroup> <h2> <span class="jp">○○○○とは</span > <span class="us">What is it?</span > <span class="cn">是什么？</span > <span class="kr">놋케돈에 대하여</span > <small>NOKKEDON</small> </h2> </hgroup> <p class="jp">○○○○は市場内のお店に並ぶ青森ならではの新鮮な魚介類をはじめ、<br class="br-sp"> 惣菜、地元の特産物や名物から、自分の好きな具材、好きな量をチョイスし温かなごはんにのっけて食べる丼です。<br class="br-sp"> 青森をてんこ盛りにのっけてお楽しみください。</p> <p class="us">The original Aomori Nokkedon is a rice bowl dish of toppings on hot steamed rice:<br class="br-sp"> choose as many toppings as you like from a range of fresh seafood that only Aomori can provide.<br class="br-sp"> There is also deli food and authentic local food sold at the shops in the market. <br class="br-sp"> You can enjoy the original Aomori Nokkedon, which will enable you to experience the true taste of Aomori. </p> <p class="cn">元祖“青森自选海鲜盖饭”是一种可根据自己喜好、所需分量挑选市场内店铺所销售的青森特色新鲜鱼贝类、熟食、当地特产，并搭配热米饭食用的盖饭。<br class="br-sp"> 敬请品尝满载着青森美味的元祖“青森海鲜盖饭”。</p> <p class="kr">원조 “아오모리 놋케돈”은 시장 내 점포에서 취급하는 이곳 아오모리만의 신선한 해산물과 반찬류, 지역 특산품이나 <br class="br-sp"> 명물 중에서 자신이 좋아하는 재료를 좋아하는 만큼 선택하여 따끈한 밥 위에 올려서 먹는 덮밥입니다. <br class="br-sp"> 아오모리를 수북이 올린 원조 “아오모리 놋케돈”을 드셔 보세요.</p> </section> <script> $(function() { selectLang(); }); </script> jQuery $('select.chagelang').change(function(){ var val = $(this).val(); $.cookie('lang', val, {expires: 7, path: '/'});　//選択したvalue値をクッキーに格納 selectLang(); }); //クッキー読み込み function selectLang(){ var language = $.cookie('lang'); if(language == 'us'){ $('.jp').hide(); $('.us').show(); $('.cn').hide(); $('.kr').hide(); $('header select').val('us'); }else if(language == 'cn'){ $('.jp').hide(); $('.us').hide(); $('.cn').show(); $('.kr').hide(); $('header select').val('cn'); }else if(language == 'kr'){ $('.jp').hide(); $('.us').hide(); $('.kr').show(); $('.cn').hide(); $('header select').val('kr'); }else{ $('.jp').show(); $('.us').hide(); $('.cn').hide(); $('.kr').hide(); } }

管理画面からデータベース（Mysql）に登録している情報をCSV形式にしてダウンロードしたいという、要望があった際に実装した方法をメモ PHP $host = 'localhost'; // サーバー名 $sqlname = 'sample'; //データベース名 $username = 'xxxxx'; //データベースユーザー名 $pssword = 'xxxxx'; // パスワード $options = array(PDO::MYSQL_ATTR_INIT_COMMAND=>"SET CHARACTER SET 'utf8'"); $dbh = new PDO('mysql:host='.$host.';dbname='.$sqlname.'', $username, $pssword, $options); // CSVファイル名の設定 $nowtime = date('Ymd', time()); $csv_file = 'CSV_'.$nowtime.'.csv'; // CSVデータの初期化 $csv_data = ''; // CSVデータの作成 $sql = $dbh->query('SELECT * FROM tbl_sample'); $csv_data .= mb_convert_encoding('項目名1, 項目名2, 項目名3, 項目名4, 項目名5', 'SJIS', 'UTF-8').''; while($row = $sql->fetch(PDO::FETCH_ASSOC)){ $csv_data .= mb_convert_encoding($row['date01'], 'SJIS', 'UTF-8').',' .mb_convert_encoding($row['date02'], 'SJIS', 'UTF-8').',' .mb_convert_encoding($row['date03'], 'SJIS', 'UTF-8').',' .mb_convert_encoding($row['date04'], 'SJIS', 'UTF-8').',' .mb_convert_encoding($row['date05'], 'SJIS', 'UTF-8').''; } // MIMEタイプの設定 header('Content-Type: application/octet-stream'); // ファイル名の表示 header('Content-Disposition: attachment; filename=$csv_file'); // データの出力 echo($csv_data);

「ゴルフ大会」のキャンペーンページを作成した際に使用した、モーション付きのスムーススクロールの方法をメモ。移動前にコンテンツ幅を変化させることで、動きに面白みを追加している。 HTML <header> <nav> <ul> <li><a href="section1">リンクボタン1</a></li> <li><a href="section2">リンクボタン2</a></li> <li><a href="section3">リンクボタン3</a></li> </ul> </nav> </header> <article> <section class="section1"> <h2>見出し1</h2> <p>コンテンツ内容を記載</p> </section> <section class="section2"> <h2>見出し2</h2> <p>コンテンツ内容を記載</p> </section> <section class="section3"> <h2>見出し3</h2> <p>コンテンツ内容を記載</p> </section> </article> CSS body{ overflow-x:hidden; } jQuery $('header nav a').click(function(){ var target = '.'+$(this).attr('href'); var position = $('.'+$(this).attr('href')).offset().top; $('article').animate({'opacity':'0.05', 'padding':'0 5%', 'margin-top':'60px'}, '1000', 'swing', function(){ $('body,html').animate({scrollTop:position}, 'slow', 'swing', function(){ $(target+' h2').nextAll().css({'opacity':'0', 'margin-top':'60px'}); $('article').css({'opacity':'1', 'padding':'0'}).animate({'margin-top':'0'}, '1000', 'swing', function(){ $(target+' h2').nextAll().animate({'opacity':'1', 'margin-top':'0'}, '1000', 'swing'); }); }); }); return false; });

CSSでのグラデーション。2色程度の簡単なものは、使っていたけど調べてみると奥が深そうだったので、詳しい使い方をメモ。 基本的な使い方 background: -moz-linear-gradient(開始位置, 開始色, 終了色); background: -webkit-linear-gradient(開始位置, 開始色, 終了色); background: linear-gradient(to 方向, 開始色, 終了色); 上記が横向き（左から右向き）にグラデーションをつける場合の一般的な書き方。応用編を下記に記載。 //縦（上から下）にグラデーションをつける場合 background: -moz-linear-gradient(top, 開始色, 終了色); background: -webkit-linear-gradient(top, 開始色, 終了色); background: linear-gradient(to bottom, 開始色, 終了色); //色が変わる位置を変える background: -moz-linear-gradient(left, 開始色 20%, 終了色); background: -webkit-linear-gradient(left, 開始色 20%, 終了色); background: linear-gradient(to right, 開始色 20%, 終了色); //3色以上にする background: -moz-linear-gradient(left, 開始色, 中間色 30%, 終了色); background: -webkit-linear-gradient(left, 開始色, 中間色 30%, 終了色); background: linear-gradient(to right, 開始色, 中間色 30%, 終了色); //片側を透明にする（例は終了色が透明） background: -moz-linear-gradient(left, 開始色, transparent); background: -webkit-linear-gradient(left, 開始色, transparent); background: linear-gradient(to right, 開始色, transparent); //片側を半透明にする background: -moz-linear-gradient(left, 開始色, rgba(255, 0, 0, 0.1)); background: -webkit-linear-gradient(left, 開始色, rgba(255, 0, 0, 0.1)); background: linear-gradient(to right, 開始色, rgba(255, 0, 0, 0.1)); //写真にグラデーションを重ねる background: -moz-linear-gradient(left, rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.7)), url(画像URL); background: -webkit-linear-gradient(left, rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.7)), url(画像URL); background: linear-gradient(to right, rgba(255, 0, 0, 0.4), rgba(255, 0, 0, 0.7)), url(画像URL); 上記を組み合わせると、いろいろと複雑なものも表現が可能。 円形にグラデーションをつける 場合によっては円形にグラデーションをかける必要があるので円形グラデーションの方法もメモ。 //基本的な使い方 background: -moz-radial-gradient(中央の色, 外側の色); background: -webkit-radial-gradient(中央の色, 外側の色); background: radial-gradient(中央の色, 外側の色); //色が変わる位置を変える background: -moz-radial-gradient(中央の色 20%, 外側の色); background: -webkit-radial-gradient(中央の色 20%, 外側の色); background: radial-gradient(中央の色 20%, 外側の色); //複数色の円形グラデーションをかける background: -moz-radial-gradient(中央の色, 中間色 40%, 外側の色); background: -webkit-radial-gradient(中央の色, 中間色 40%, 外側の色); background: radial-gradient(中央の色, 中間色 40%, 外側の色); CSSのグラデーション（linear-gradient）の使い方を総まとめ！ 子供用靴下の販促サイト制作での使用例 SOCKSTAR（ソックスター）

「国際HAN-ZOU整体専門学院」の制作に携わった際に使用したスライドショウの実装方法をメモ。動きをつけながらのフェードインなので、画像を切り替えるのみよりも印象に残りやすいのと、表示幅の限られた中で、広がりを演出したい時に便利。 HTML <div id="mainimage"> <ul> <li id="topimage01" class="active"> <section class="inner"> <h2>テキストコメント</h2> </section> </li> <li id="topimage02"> <section class="inner"> <h2>テキストコメント</h2> </section> </li> <li id="topimage03"> <section class="inner"> <h2>テキストコメント</h2> </section> </li> </ul> </div> <script> $(function(){ setInterval('slideSwitch()', 5000 ); //5000は次の画像に切り替わるまでのミリ秒 }); </script> CSS #mainimage{ position: relative; overflow: hidden; } #mainimage ul li.active{ z-index: 9; } #mainimage ul li.last-active{ z-index: 8; } #mainimage{ width: 100%; position: relative; } #mainimage ul{ position: absolute; top: 0; left: 0; width: 100%; } #mainimage ul li{ width: 110%; position: absolute; top: 0; right: -10%; z-index: 6; } #mainimage #topimage01{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage #topimage02{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage #topimage03{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage .inner{ position: absolute; left: 30px; bottom: 30px; z-index: 10; } jQuery function slideSwitch(){ var $active = $('#mainimage ul li.active'); if($active.length == 0 ) $active = $('#mainimage ul li:last'); var $next = $active.next().length ? $active.next() : $('#mainimage ul li:first'); $active.addClass('last-active'); $next.css({'opacity':'0', 'right':'0'}) .addClass('active') .animate({'opacity':'1.0', 'right':'-10%'}, 3000, function(){ //(3000は画像が表示されるまでにかかるミリ秒) $active.removeClass('active last-active'); }); }; 一般社団法人国際整体療法師協会 直轄校 国際HAN-ZOU整体専門学院

不動産関連の採用サイトの改修に携わった際に使用した背景画像へのリンクの実装方法をメモ。背景画像を一枚絵で設定している箇所に部分的にリンクを貼りたいとの要望があったのでCSS「position」プロパティで対応。 HTML <section id="chart"> <figure> <div class="pc_img"><img src="画像リンク" alt=""></div> <div class="sp_img"><img src="画像リンク" alt=""></div> <ul class="links"> <li><a href="リンク先URL" target="_blank" title="リンク先1"></a></li> <li><a href="リンク先URL" target="_blank" title="リンク先2"></a></li> <li><a href="リンク先URL" target="_blank" title="リンク先3"></a></li> </ul> </figure> </section> CSS #chart figure{ background: #f2eeeb; padding: 120px 0; text-align: center; position: relative; } #chart figure .pc_img{ width: 1080px; margin: 0 auto; } #chart figure .pc_img img{ width: 100%; } #chart figure .sp_img{ display: none; } #chart figure .links{ position: absolute; width: 1080px; top: 1120px; left: 0; right: 0; margin: auto; } #chart figure .links li a{ width: 530px; height: 50px; display: block; margin: 0 0 20px 550px; } /* 以下はスマホ */ #chart{ padding: 0 0 70px; } #chart figure{ background: #f2eeeb; padding: 60px 5%; position: relative; } #chart figure .pc_img{ display: none; } #chart figure img{ width: 100%; } #chart figure .links{ width: 90vw; position: absolute; top: -webkit-calc((90vw * 0.15 * 44) + 60px); top: calc((90vw * 0.15 * 44) + 60px); left: 5vw; } #chart figure .links li a{ width: 13.6vw; width: 15%; height: -webkit-calc(90vw * 0.15 * 9); height: calc(90vw * 0.15 * 9); display: block; } #chart figure .links li:nth-of-type(1) a{ position: absolute; right: 0; } #chart figure .links li:nth-of-type(2) a{ position: absolute; right: 19.1vw; right: 17%; } #chart figure .links li:nth-of-type(3) a{ position: absolute; right: 38.2vw; right: 34%; } 株式会社ジェクトワン - 組織図 - 会社紹介 -

「FLORABeautyオンラインカレッジ」の制作に携わった際に使用したスライドショウの実装方法をメモ。スライドショウを単調に見せないだけでなく、文字を表示するタイミングを画像と変えることで、自然と文字へと誘導可能。 HTML <div id="mainimage"> <ul> <li id="topimage01" class="active"> <div class="inner"> <h2>キャッチコピーを記載しています。</h2> <p>キャッチコピーに対しての簡易説明を記載しています。</p> </div> </li> <li id="topimage02"> <div class="inner"> <h2>キャッチコピーを記載しています。</h2> <p>キャッチコピーに対しての簡易説明を記載しています。</p> </div> </li> <li id="topimage03"> <div class="inner"> <h2>キャッチコピーを記載しています。</h2> <p>キャッチコピーに対しての簡易説明を記載しています。</p> </div> </li> </ul> </div> <script> $(function(){ setInterval('slideSwitch()', 7500 ); //7500は次の画像に切り替わるまでのミリ秒 }); </script> CSS #mainimage{ height: 80vh; margin: 0 0 10px; position: relative; overflow: hidden; } #mainimage:before{ background: #212121; content: ""; width: 100%; height: 80vh; display: block; position: absolute; left: 0; bottom: 60px; } #mainimage ul li{ width: 80%; height: 80vh; right: 0; position: absolute; } #mainimage ul li.active{ z-index:9; } #mainimage ul li.last-active{ z-index:8; } #mainimage #topimage01{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage #topimage02{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage #topimage03{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage ul li .inner{ position: absolute; top: 60px; left: -20%; opacity: 0; } #mainimage ul li:first-of-type .inner{ opacity: 1; } jQuery function slideSwitch(){ var $active = $('#mainimage ul li.active'); if($active.length == 0 ) $active = $('#mainimage ul li:last'); var $next = $active.next().length ? $active.next() : $('#mainimage ul li:first'); $active.find('.inner').animate({'opacity':'0', 'left':'-30%'}, 750, function(){ $active.addClass('last-active'); $next.css({'opacity':'0'}) .addClass('active') .animate({'opacity':'1.0'}, 3000, function(){ $next.find('.inner').css({'left':'-20%'}).animate({'opacity':'1.0'}, 750, function(){ $active.removeClass('active last-active'); }); }); }); }; 美容・痩身の通信講座のFLORABeautyオンラインカレッジ

IPアドレス、ホスト名など自分のURLを取得する機会も意外とあるので、取得方法をメモ 変数名説明例$_SERVER['REMOTE_ADDR']現在ページをみているユーザのIP アドレス$_SERVER['REMOTE_PORT']ユーザのマシンからWeb サーバへの通信に使用されているポート番号$_SERVER['HTTP_REFERER']現在のページに遷移する前にユーザが参照していた ページのアドレス（もしあれば）$_SERVER['HTTP_USER_AGENT']現在のリクエストに User-Agent: ヘッダが もしあればその内容$_SERVER['REMOTE_HOST']現在のページにアクセスしているホスト名$_SERVER['SERVER_ADDR']現在のスクリプトが実行されているサーバのIPアドレス$_SERVER['SERVER_NAME']現在のスクリプトが実行されているサーバのホスト名$_SERVER['HTTP_HOST']現在のリクエストに Host: ヘッダが もしあればその内容$_SERVER['REQUEST_METHOD']ページにアクセスする際に使用されたリクエストのメソッド名$_SERVER['REQUEST_URI']ページにアクセスするために指定されたURI$_SERVER['SCRIPT_NAME']現在のスクリプトのパス$_SERVER['PHP_SELF']現在実行しているスクリプトのファイル名。ドキュメントルートから取得$_SERVER['QUERY_STRING']ページがアクセスされた際にもし検索引数があれば格納$_SERVER['DOCUMENT_ROOT']現在実行されているスクリプトが存在するドキュメントルートディレクトリ$_SERVER['SCRIPT_FILENAME']現在実行されているスクリプトの絶対パス$_SERVER['GATEWAY_INTERFACE']サーバが使用しているCGI のバージョン$_SERVER['SERVER_PROTOCOL']ページがリクエストされた際のプロトコル名とバージョン$_SERVER['HTTP_ACCEPT']現在のリクエストの Accept: ヘッダがもしあれば その内容$_SERVER['HTTP_ACCEPT_LANGUAGE']現在のリクエストに Accept-Language: ヘッダがあればその内容$_SERVER['HTTP_ACCEPT_ENCODING']現在のリクエストに Accept-Encoding: ヘッダがあればその内容$_SERVER['HTTP_ACCEPT_CHARSET']現在のリクエストの Accept-Charset: ヘッダがあればその内容$_SERVER['HTTP_CONNECTION']現在のリクエストに Connection: ヘッダがあればその内容

飲食店サイトを作成した際にしようした簡単なスライドショーの方法をメモ。画像の切り替わりはフェードイン・フェードアウト方式。速度も自由に変更可能。 HTML <figure class="mainimageTop"> <ul> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </figure> <script> $(function() { setInterval('slideSwitch()', 5000 ); //5000は次の画像に切り替わるまでのミリ秒 }); </script> CSS .mainimageTop{ width: 100%; position: fixed; z-index: -1; top: 0; left: 0; overflow: hidden; } .mainimageTop::after{ content: ''; width: 60%; height: 100%; display: block; background-image: -webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0)),color-stop(0.78, rgba(0,0,0,1.0)),to(#000)); background-image: -moz-linear-gradient(left,rgba(0,0,0,0),rgba(0,0,0,0.95) 78%,#000); position: absolute; top: 0; right: 0; z-index: 10; } .mainimageTop ul li{ width: 100%; height: 100%; box-sizing: border-box; position: absolute; top: 0; left: 0; margin: auto; z-index: 5; } .mainimageTop ul li.active{ z-index: 7; } .mainimageTop ul li.next-active{ z-index: 6; } .mainimageTop ul li:nth-of-type(1){ background: url(画像URL) center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } .mainimageTop ul li:nth-of-type(2){ background: url(画像URL) center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } .mainimageTop ul li:nth-of-type(3){ background: url(画像URL) center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } .mainimageTop ul li:nth-of-type(4){ background: url(画像URL) center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } .mainimageTop ul li:nth-of-type(5){ background: url(画像URL) center fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } jQuery function slideSwitch(){ var $active = $('.mainimageTop ul li.active'); if($active.length == 0 ) $active = $('.mainimageTop ul > li:last'); var $next = $active.next().length ? $active.next() : $('.mainimageTop ul > li:first'); $active.addClass('next-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0},3000,function(){ //3000は画像が表示されるまでにかかるミリ秒 $active.removeClass('active next-active'); }); };

一般的なログイン機能までは必要のない、ホームページ公開前などの一時的（簡易）にパスワードを設置したい場合に便利なベーシック認証の設置方法をメモ。 .htaccess AuthUserFile /.htpasswdまでのディレクトリ/.htpasswd AuthGroupFile /dev/null AuthName "Input your ID and Password." AuthType Basic require valid-user 「AuthUserFile」のパス（URL）が不明な場合はサイトルートからのパスを取得できるPHP関数「$_SERVER['DOCUMENT_ROOT']」を設置予定のディレクトリに設置して確認。 PHP echo($_SERVER['DOCUMENT_ROOT']); //サイトルートからのパスを表示 上記「.htaccess」ファイルと「.htpasswd」の2つのファイルをパスワードを設置したいディレクトリの直下にアップロード。使用後（削除する場合）は該当ファイルを削除。 「.htpasswd」は下記のサイトを使って作成すると便利。 .htaccessによる認証用 パスワード暗号化ツール また、作成するファイルの文字コードは全て「UTF-8(BOM無し) 」で作成します。

TwitterやFacebookのように一番下までスクロールしたら自動的に追加データを読み込んで表示する機能を実装した時のソースをメモ。サンプルはデータベース（Mysql）から10件づつデータを抽出。 HTML <ul class="items"> <?php require_once ('ini.php'); //DB接続ファイル $sql = $db->query('SELECT * FROM tbl_sample ORDER BY id DESC LIMIT 10'); while($row = $sql->fetch(PDO::FETCH_ASSOC)){ echo('<li id="'.$row['id'].'">'.($row['name']).'</li>'); } ?> </ul> jQuery $(window).on('scroll', function(){ var doch = $(document).innerHeight(); //ページ全体の高さ var winh = $(window).innerHeight(); //ウィンドウの高さ var bottom = doch - winh; //ページ全体の高さ - ウィンドウの高さ = ページの最下部位置 if(bottom * 0.9 < $(window).scrollTop()){ var obj = $(this); if (!obj.data('loading')) { obj.data('loading', true); $.get('loadmore.php', {lastid:$('ul.items li:last-of-type').attr('id')}, function(result){ $('ul.items').append(result); obj.data('loading', false); }); } } }); スクロール時のイベントの重複防止に、最初にイベントが発生した時点でのみobj.dataの「loading」をtrueに設定。 TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」 PHP （loadmore.php）追加読み込み用ファイル //追加読み込みの処理 require_once ('ini.php'); //DB接続ファイル $lastid = $_GET['lastid']; if(!empty($lastid)){ $sql = $db->prepare('SELECT * FROM tbl_sample WHERE id < :id ORDER BY id DESC LIMIT 10'); $sql->bindValue(':id', $lastid, PDO::PARAM_INT); $sql->execute(); while($row = $sql->fetch(PDO::FETCH_ASSOC)){ echo('<li id="'.$row['id'].'">'.($row['name']).'</li>'); } }

グローバルメニューにマウスを乗せた際の動きもバリエーションが増え、サイトによって様々。このサイトでも使用しているグローバルメニューのマウスオーバーアクションの方法をメモ。 HTML <nav id="gnav"> <ul> <li><a href="/price/">制作料金</a></li> <li><a href="/about/">会社案内</a></li> <li><a href="/blog/">WEB制作の備忘録</a></li> </ul> </nav> CSS #gnav ul{ display:-webkit-flex; display:flex; } #gnav ul li{ margin-right: 40px; } #gnav ul li a{ color: #fff; line-height: 35px; display: block; text-shadow: 0 0 5px #000; position: relative; } #gnav ul li a:after{ background: #fff; content: ""; width: 0; height: 1px; display: block; position: absolute; bottom: 0; left: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; transition: all .3s ease-out; } #gnav ul li a:hover:after{ width: 100%; } 東京都小金井市のホームページ制作会社｜株式会社衆

キャッチコピーなどを効果的に見せたいときに使用したタイピング風に一文字づつ文字を表示される方法をメモ。複数行にも対応しているので文字の大きさも自由に変更できる。 HTML <p><small class="typ_first">jQueryでテキストを</small><span class="typ_second">タイピング風に一文字ずつ表示</span></p> CSS p { font-size: 6rem; } p small { font-size: 2.8rem; display: block; margin: 0 0 10px; } .typ_first, .typ_second { opacity: 0; } .typ_first span, .typ_second span { opacity: 0; } jQuery var speed = 75; //表示速度 //文字変換 var typ_first = $('.typ_first').text().split(''); var textbox01 = ''; $.each(typ_first, function(){ textbox01 += '<span>'+this+'</span>' }); $('.typ_first').html(textbox01); $('.typ_first').css({'opacity':1}); var typ_second = $('.typ_second').text().split(''); var textbox02 = ''; $.each(typ_second, function(){ textbox02 += '<span>'+this+'</span>' }); $('.typ_second').html(textbox02); $('.typ_second').css({'opacity':1}); //タイピング処理 function typing(name){ for (var i = 0; i <= $(name).children().size(); i++) { $(name).children('span:eq('+i+')').delay(speed*i).animate({'opacity':1}, speed); }; } //非同期処理部分 function func(){ var d = new $.Deferred; typing('.typ_first'); setTimeout(function(){ d.resolve(); }, speed*$('.typ_first').children().size()); return d.promise(); } var promise = func(); promise.done(function(){ typing('.typ_second'); }); 「split」関数を使って対象の文字を、一文字ずつ分解してから「span」タグで囲み、元の位置に再配置。今回は上段を表示してから下段を表示したいので「非同期処理」を利用。 サンプル 「実行」をクリックでタイピング風に表示。 function typingword(){ var speed = 75; //表示速度 var typ_first = $('.typ_first').text().split(''); var textbox01 = ''; $.each(typ_first, function(){ textbox01 += ''+this+'' }); $('.typ_first').html(textbox01); $('.typ_first').css({'opacity':1}); var typ_second = $('.typ_second').text().split(''); var textbox02 = ''; $.each(typ_second, function(){ textbox02 += ''+this+'' }); $('.typ_second').html(textbox02); $('.typ_second').css({'opacity':1}); function typing(name){ for (var i = 0; i

オンマウス時などにCSSのみで簡易的なアニメーション効果を実装する方法をメモ @keyframes sampleanime{ 50% { opacity: 1; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); transform: rotateY(360deg); } } .sample{ opacity: 0.1; -webkit-perspective: 9999px; -moz-perspective: 9999px; perspective: 9999px; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .sample:hover { animation: sampleanime .5s ease forwards; } フォーマット @keyframes 任意の名前 { 0% { CSSプロパティ:値; } 100% { CSSプロパティ:値; } } セレクタ名 { animation: animation-nameの値 animation-durationの値 animation-timing-functionの値 animation-delayの値 animation-iteration-countの値 animation-directionの値 animation-fill-modeの値 animation-play-stateの値; } 「@keyframes」でアニメーションの流れを設定して、実行したいクラスに「animation」を設定して実行。使用できる「animation」に設定できるプロパティは下記参照 プロパティ一覧 プロパティ説明animation-nameアニメーションの名前animation-durationアニメーションが始まって終わるまでの時間を指定例）3s、750msanimation-timing-functionアニメーションの進行の度合いを指定ease：既定値。アニメーションの中央に向けて変化量が増加し、最後に向けて減少。linear：等しい速度でアニメーションします。ease-in：アニメーションの変化の速度はゆっくり始まり、終了まで加速。ease-out：アニメーションは速く始まり、速度を落としながら続きます。ease-in-out：アニメーションはゆっくり変化し、速度を上げ、また速度を落とします。cubic-bezier(p1, p2, p3, p4)：ユーザー定義の二次元ベジェ曲線で、 p1 と p3 の値は 0 から 1 の間である必要があります。steps(n, )：遷移に沿った n 個の停止点に沿ってアニメーションを表示し、それぞれの停止点を同じ時間の長さで表示します。animation-delayアニメーションが始まる時間を指定例）1s、500msanimation-iteration-countアニメーションの繰り返し回数を指定例）5、10、infiniteanimation-directionアニメーションの再生方向を指定normal：アニメーションを毎回順方向に再生。reverse：アニメーションを毎回逆方向に再生。alternate：アニメーションを順方向、逆方向の順で再生。alternate-reverse：アニメーションを逆方向、順方向の順で再生。animation-fill-modeアニメーションの開始前、終了後のスタイルを指定none：スタイルを指定しない。再生後は、元のスタイルを適用。backwards：再生後は、最初のキーフレーム（0%）を適用。animation-delayを指定している場合、再生までの時間は最初のキーフレーム（0%）を適用。forwards：再生後は、最後のキーフレーム（100%）を適用both：再生後は、最後のキーフレーム（100%）を適用。animation-delayを指定している場合、再生までの時間は最初のキーフレーム（0%）を適用。animation-play-stateアニメーションの再生・停止を指定 animation 上記、8つのプロパティを一括で指定できる、ショートハンドプロパティ。 サンプル サンプルはオンマウス時に、Y軸方向に半回転しながら、一時拡大して表示。 .list li a{ width: 30vw; height: 30vw; margin: 0 auto 2rem; display: block; } .list li a .front{ text-align: center; line-height: 30vw; font-size: 5rem; width: 30vw; height: 30vw; background: #0099d9; color: #fff; } @keyframes sampleanime{ 50% { opacity: 1; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); transform: scale(1.5); } 100% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); -webkit-transform: rotateY(360deg); -moz-transform: rotateY(360deg); transform: rotateY(360deg); } } .sample{ opacity: 0.1; -webkit-perspective: 9999px; -moz-perspective: 9999px; perspective: 9999px; -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); } .sample:hover { animation: sampleanime .5s ease forwards; } 衆 【CSS3】@keyframes と animation 関連のまとめ CSSアニメーション 入門

採用サイトを作成した際に、ページ遷移にアクセントをつけたくて実装した開閉アニメーションの方法をメモ。実例はランディングページ（LP）なので、コンテンツをページで分けているサイトでは調整が必要。 HTML <nav class="gnav"> <ul> <li><a href="">○○○○</a></li> <li><a href="">○○○○</a></li> <li><a href="">○○○○</a></li> <li><a href="">○○○○</a></li> <li><a href="">○○○○</a></li> </ul> </nav> <article id="slider"> <div id="filter_left"></div> <div id="filter_right"></div> <section> コンテンツを記載 </section> </article> CSS #filter_left{ background: #017b32; width: 50%; display: block; position: fixed; top: 0; z-index: 13; } #filter_right{ background: #017b32; width: 50%; display: block; position: fixed; top: 0; z-index: 13; } jQuery var winH = $(window).height(); var modalW = ($(window).width())/2; $('.gnav a').click(function(){ $('#filter_left').css({'left':'-'+modalW+'px', 'height':winH+'px'}).animate({'left':'0'}, {duration:'slow', easing:'swing', complete:function(){ // ここにページ内遷移のスクリプトを記載（省略） setTimeout(function(){ $('#filter_left').animate({left:'-'+modalW+'px'},{duration:'slow', easing:'swing', complete:function(){ $('#filter_left').css({'height':'0'}); }}); }, 250); }}); $('#filter_right').css({'right':'-'+modalW+'px', 'height':winH+'px'}).animate({'right:0'}, {duration:'slow', easing:'swing', complete:function(){ setTimeout(function(){ $('#filter_right').animate({right:'-'+modalW+'px'}, {duration:'slow', easing:'swing', complete:function(){ $('#filter_right').css({'height':0}); }}); }, 250); }}); return false; }); 求人・採用情報｜ケッズトレーナー

サイト内で画像などを複数並べてアニメーションさせる場合に、一度にアニメーションを適応させるのではなく、画像を1枚ずつ時間をずらして（遅延して）アニメーションさせる方法をメモ。 HTML <ul class="list"> <li><img src="./img01.jpg"></li> <li><img src="./img02.jpg"></li> <li><img src="./img03.jpg"></li> </ul> jQuery $('.list li').each(function(i){ $(this).delay(i * 100).animate({opacity:'1'}, 1000); }); 「delay」の数字の部分が遅延時間（1 / 1000秒）「addClass」を使ったアニメーションを行う場合は遅延処理が行われず、一度に適応されてしまうので、下記のとおり「queue」を使用する。 $('.list li').each(function(i){ 　　$(this).delay(i * 100).queue(function(next) { 　　　　$(this).addClass('active'); 　　　　next(); 　　}); }); また、順序を逆順に行う場合は下記。 $($('.list li').get().reverse()).each(function(){ $(this).delay(i * 100).animate({opacity:'1'}, 1000); });

インスタグラムのサイト埋め込みと言えば「instawidget」が有名だったんですが、サービスが使えなくなってしまったため、代用として採用。無料で使える上に、ログインの必要もないので手軽で便利。 「InstaWindow」を使ったインスタグラムの埋め込み方法 専用コードの作成 サイトにアクセスし、「ユーザー名」「表示画像数」「ブログパーツ幅」など掲載サイトに合わせて、表示条件を設定し、コードを作成。 無料インスタグラムブログパーツ作成ツール InstaWindow 表示したい箇所に作成したコードを張り付ける 上記の手順で作成したコードをコピーして、掲載サイトの表示したい箇所に張り付け。デザインに合わない部分はCSSで調整。 SOCKSTAR（ソックスター）

新着情報や購入情報などデータベースへ日付を登録する際に使用するdate関数の使い方をメモ。指定日や現時刻から1日後（1月後）の時刻も取得可能 //現時刻を取得 date_default_timezone_set('Asia/Tokyo'); date('Y/m/d H:i:s'); 取得時間は使用しているサーバー環境での時間で計算される。日本時間（東京）にする場合は「date_default_timezone_set('Asia/Tokyo')」を使用する前に記載する。 フォーマット一覧 date('フォーマット')の「フォーマット」の部分を取得したい値に合わせて変更。「/」と書かれている部分は自由に変更が可能 date('Y/m/d H:i:s'); // 2020/01/04 09:44:05 date('Y年m月d日 H時i分s秒'); //2020年01月04日 09時44分05秒 date('Y-m-d H時i分s秒'); //2020-01-04 09時44分05秒 //指定日のフォーマットを変える $date = '2020-01-04 09:44:05'; date('Y年m月d日', strtotime($date)); 取得できる内容は下記参照 フォーマット内容出力結果(例)Y西暦(4桁)2020y西暦(2桁)20lうるう年: 1、平年: 00m月(0埋め) 01n月(0埋め無し) 8M月 英語表記 August F月 英語表記(略) Aug d日付(0埋め) 04j日付(0埋め無し) 4l曜日 英語表記 Monday D曜日 英語表記(略)Monw曜日 (日曜: 0 → 土: 6) 6H時刻 24時間表記 (0埋め) 09G時刻 24時間表記 (0埋め無し) 9h時刻 12時間表記 (0埋め) 09g時刻 12時間表記 (0埋め無し)9i分02s秒02 日付を加算・減算する場合の方法 集計や利用期限など、現時刻（指定時刻）から自動で該当する日付を取得する必要がある場合の計算方法 //現時刻から一日後 date('Y年m月d日', strtotime('+1 day')); //現時刻から一月後 date('Y年m月d日', strtotime('+1 month')); //現時刻から一年後 date('Y年m月d日', strtotime('+1 year')); //現時刻から一週間後 date('Y年m月d日', strtotime('+1 week')); //現時刻から一日前 date('Y年m月d日', strtotime('-1 day')); //現時刻から一月前 date('Y年m月d日', strtotime('-1 month')); //現時刻から一年前 date('Y年m月d日', strtotime('-1 year')); //現時刻から一週間前 date('Y年m月d日', strtotime('-1 week')); //当月の月末を取得 date('Y-m-t'); // 2014-01-31 または date('Y-m-d', mktime(0, 0, 0, date('m') + 1, 0, date('Y'))); //先月の末日を取得する date('Y-m-t', strtotime(date('Y-m-01').' -1 month')); //指定日の一月後 $setdate = date('2020-01-04'); //2020年1月4日を指定 date('Y-m-d H:i:s', strtotime($setdate.' +1 month')); [応用編]簡易カレンダー //現在の年月を取得 $year = date('Y'); $month = date('m'); $last_day = date('j', mktime(0, 0, 0, $month + 1, 0, $year)); //末日までループ for ($day = 1; $day < $last_day + 1; $day++){ echo('<div>'.$year.'年'.$month.'月'.$day.'日</div>'); }

MVCと呼ばれる各種フレームワークで、良く利用されるのが「フロントコントローラー」という構成。全てのアクセスを一カ所（index.php)で受けとり処理しようというもの。どんなURLにアクセスしてもindex.phpを実行するので、追加ファイルなどの対応も容易にできる。 htaccess <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule . index.php [QSA,L] </IfModule> コードの内容は下記のサイトを参照 今さら人に聞けない！WordPressで使われているmod_rewriteの説明書 PHP（index.php） $parse_url = parse_url($_SERVER['REQUEST_URI']); if(preg_match('/.php/', $parse_url['path'])){ $params = explode('/', $parse_url['path']); $value = end($params); $path = preg_replace('('.$value.')', '', $parse_url['path']); $filename = preg_replace('(.php)', '', $value); $filename = preg_replace('(-)', '', $filename); $filename = ucfirst(strtolower($filename)); $filename = $filename.'Controller.php'; }else{ $path = $parse_url['path']; $filename = 'IndexController.php'; } include('./controllers/user/'.$path.$filename); 上記例はhttps://sample.com/blog/ にアクセスした場合に https://sample.com/controllers/user/blog/IndexController.php をhttps://sample.com/blog/detail.php にアクセスした場合は https://sample.com/controllers/user/blog/DetailController.php を読み込みます。 PHP10行で作る超シンプルフレームワーク

メールフォーム等での入力値チェック（バリデーション）。PHPの「preg_match」（正規表現）を使用した代表的なものをメモ。 PHP //空入力チェック if(empty($val)){ //エラー処理 } //平仮名入力チェック if(!preg_match('/^[ぁ-ん]+$/u', $val)){ //エラー処理 } //片仮名入力チェック if(!preg_match('/^[[ァ-ン]|ー]+$/u', $val)){ //エラー処理 } //メールチェック if(!preg_match('/^[a-zA-Z0-9_\.\-]+@(([a-zA-Z0-9_\.\-]+\.)+[a-zA-Z0-9]+$)/', $val)){ //エラー処理 } //郵便番号チェック if(!preg_match('/^\d{3}[-]\d{4}$|^\d{7}$/', $val)){ //エラー処理 } //電話番号チェック if(!preg_match('/^\d{10}$|^\d{11}$/', $val)){ //エラー処理 } //URLチェック if(!preg_match('/^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/', $val)){ //エラー処理 } //スパムチェック（日本語で書かれていないもの） if(!preg_match('/[ぁ-ん]/', $val)){ //エラー処理 } 「$val」の部分にポストデータ（$_POST）を入力して、該当する処理へ。その他の内容は下記を参照。状況に合わせてエスケープ処理は必要。 全て数値（半角） /^[0-9]+$/ 半角アルファベット（大文字・小文字） /^[a-zA-Z]+$/ 半角アルファベット（大文字・小文字・数値） /^[a-zA-Z0-9]+$/ 全角ひらがな /^[ぁ-ん]+$/ 全角カタカナ /^([ァ-ン]|ー)+$/ 全角ひらがな、カタカナ /^[ぁ-んァ-ン]+$/ 半角カナ /^[ｧ-ﾝﾞﾟ]+$/ 漢字 /^[一-龥]+$/ 全角ひらがな、漢字 /^[一-龥ぁ-ん]/ 全角ひらがな、全角カタカナ、漢字 /^[ぁ-んァ-ン一-龥]/ e-mail /^[a-zA-Z0-9_\.\-]+@(([a-zA-Z0-9_\.\-]+\.)+[a-zA-Z0-9]+$)/ URL /^http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?/ 電話番号(ハイフンなし10桁) /^\d{10}$/ 携帯番号(ハイフンなし11桁) /^\d{11}$/ 携帯番号(ハイフンなし10桁or11桁) /^\d{10}$|^\d{11}$/ 郵便番号（ハイフンあり7桁） /^\d{3}[-]\d{4}$/ 郵便番号（ハイフンなし7桁） /^\d{7}$/ 郵便番号（ハイフンあり・なし両方） /^\d{3}[-]\d{4}$|^\d{7}$/ 値if($var)issetemptyis_null$val="";falsetruetruefalse$val="0";falsetruetruefalse$val=0;falsetruetruefalse$val=NULL;falsefalsetruetrue$valfalsefalsetruetrue$val=array()falsetruetruefalse$val=array(1)truetruefalsefalse PHP isset, empty, is_null の違い早見表 form用正規表現判定/備忘

ランディングページ（LP）では、どこのサイトでも使用されているページ内リンクでのスムーススクロール。ページ内はもちろん、別ページからの遷移時にも使用することも多いので、実装方法をメモ。 HTML <nav> <ul> <li><a href="#target01">○○○○/a></li> <li><a href="#target02">○○○○</a></li> <li><a href="#target03">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> </ul> </nav> … <main> <article> <section id="target01">遷移先のコンテンツ部分01</section> <section id="target02">遷移先のコンテンツ部分02</section> <section id="target03">遷移先のコンテンツ部分03</section> </article> </main> … 遷移先のリンクをハッシュタグ（#）で、コンテンツ部分を「id」で設定。 jQuery //ページ内での移動 $('header nav ul li a').click(function(){ var $href = $(this).attr('href'); if($href.indexOf('#') >= 0) { var hashary = $href.split('#'); var position = $('#'+hashary[hashary.length -1]).offset().top; $('body,html').animate({scrollTop:position}, 500, 'swing'); return false; } }) //外部ページからの移動 $(window).load(function(){ var $hash = location.hash; if($hash != ''){ var position = $($hash).offset().top; $('body,html').animate({scrollTop:position}, 500, 'swing'); return false; } }) 「attr('href')」または「location.hash」で遷移後のURLの#以下の値を取得。値がある場合に限り「scrollTop:position」で取得値が設定されているタグの冒頭に移動。「$(window).load(function(){」とページ読み込み後に処理を行うのは、画像の高さを取得してからでないと、移動位置がずれるため。 ヘッダー部分を固定している場合は「var position」の値から固定部分の値をマイナスする。 // ○○pxと値が分る場合 var position = $($hash).offset().top - ○○px; // 値が変わる（不定）の場合○○○○と指定タグで取得する var position = $($hash).offset().top - $('○○○○').height(); SOCKSTAR(ソックスター)

メニューの項目数が増えてくると一度で全てを表示するのは難しい。だからといってカテゴリーに分けて何度も読み込みをさせるのもユーザーに対しては親切でない。そんな時に便利な「jquery」で実装可能な開閉式のメニュー(プルダウンメニュー)のメモ。 HTML <nav> <ul> <li><a href="○○○○">○○○○</a></li> <li> <a href="○○○○">○○○○</a> <ul> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> </ul> </li> <li> <a href="○○○○">○○○○</a> <ul> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> <li> <a href="○○○○">○○○○</a> <ul> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> <li><a href="○○○○">○○○○</a></li> </ul> </li> </ul> </li> </ul> </nav> jQuery $(function(){ $('nav li a').next('ul').hide(); $('nav li a').click(function(){ var checkElement = $(this).next('ul'); if(checkElement.length && !checkElement.is(':visible')){ checkElement.slideDown('srow'); return false; }else if(checkElement.length && checkElement.is(':visible')){ checkElement.slideUp('srow'); return false; } }); }); 表示するターゲットを「$(this).next('ul').length」で判定し、あれば起動、なければそのままクリック。階層が深くなってもHTMLの追加のみで対応可能。初期状態の表示をCSS（display: none;）にする場合は、「$('nav li a').next('ul').hide();」は不要。 オンマウスの場合は下記 $(function(){ $('nav li').children('ul').hide(); $('nav li').hover(function(){ if($(this).children('ul').length){ $(this).children('ul').stop(true,false).slideDown('srow'); } },function(){ if($(this).children('ul').length){ $(this).children('ul').stop(true,false).slideUp('srow'); } }); });

webサイトを作る上で、文字の大きさを考慮することは非常に大切。一文字ずつ「px」で設定しても良いのですが、全体のサイズ変更が発生した場合や、端末ごとでの文字を一括調整する時に便利な「rem」による設定方法をメモ。 html{ font-size: 15px; } h1{ font-size: 1.6rem; // 15pxの1.6倍の24px } h2{ font-size: 1.2rem; // 15pxの1.2倍の18px } small{ font-size: 0.8rem; // 15pxの0.8倍の12px } CSSで「html」タグに基準となるフォントサイズを設定、その他のタグはこの数値を基準にした倍率を「rem」で行っていく。この方法であれば、仮に全体的にサイズを大きくしてほしいという要望があった場合でも基準値の「15px」を変更するだけで比率を変えることなく、全体サイズの変更が可能。 また、「rem」は「margin」や「padding」にも使えるので、枠の中に文字を入れた場合の余白調整や、改行幅の調整にも使える。

以前求人サイトを手掛けた時に使用した、マウスオーバーの時に3D回転（反転）をする方法をメモ 。使用時は表面に「スタッフのプロフィール写真」、裏面に「働いている様子の写真」として利用。 HTML <ul class="list"> <li> <a href=""> <div class="block"> <figure class="front">衆</figure> <figure class="back">SYU</figure> </div> </a> </li> </ul> CSS .list li a{ width: auto; height: 300px; display: block; overflow: hidden; } .list li a .block{ position: relative; -webkit-perspective: 9999px; -moz-perspective: 9999px; perspective: 9999px; } .list li a:hover .block{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .list li a:not(:hover) .block{ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .list li a .block .front, .list li a .block .back{ width: 300px; height: 300px; position: absolute; top: 0; left: 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .list li a .block .front{ z-index:1; } .list li a .block .back{ -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); transform: rotateY(-179deg); } .list li a:hover .block .front{ z-index:0; } 「perspective」で奥行を設定し、「transform」で縦軸（Y軸）を支点に回転。回転速度は「transition」で設定。「:not(:hover)」を使うと戻り（mouseout）の動きもスマートにできる。 サンプル .list li a{ width: 30vw; margin: 0 auto; } .list li a{ width: 30vw; height: 30vw; display: block; overflow: hidden; } .list li a .block{ position: relative; -webkit-perspective: 9999px; -moz-perspective: 9999px; perspective: 9999px; } .list li a:hover .block{ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .list li a:not(:hover) .block{ -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; } .list li a .block .front, .list li a .block .back{ text-align: center; line-height: 30vw; font-size: 5rem; width: 30vw; height: 30vw; position: absolute; top: 0; left: 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .list li a .block .front{ background: #0099d9; color: #fff; z-index:1; } .list li a .block .back{ background: #eee; color: #111; -webkit-transform: rotateY(-179deg); -moz-transform: rotateY(-179deg); transform: rotateY(-179deg); } .list li a:hover .block .front{ z-index:0; } 衆 SYU

ポイント等を表現する時にナンバリングをしていますが、項目増えたり、並び替えた際に番号の振り直し忘れの無いよう、自動でナンバリングが行えるようにする方法をメモ HTML <ul class="pointlist"> <li> <h4>だるまさんがころんだ</h4> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </li> <li> <h4>だるまさんがころんだ</h4> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </li> ・ ・ ・ <li> <h4>だるまさんがころんだ</h4> <p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p> </li> </ul> CSS .pointlist{ counter-reset: number 0; /* number というカウンタ名で 0 をセット */ } .pointlist li::before{ counter-increment: number 1; /* number の値を 1 づつ増加 */ content: counter(number); } 「countercounter-reset」はカウントする値をリセットするプロパティ。ナンバリングをしたい要素の親要素に設定しカウンタ名(例：number)と初期値(例：0)を設定。ナンバリング値は「counter」で出力。カウントの増加数は「counter-increment」で設定。 欅BodyTherapistSchool

病院のホームページ制作に携わった際に使用したループスライダーの実装方法をメモ。個々の画像をじっくりと見てもらうというようりは、色々なサービスを展開してる場合に、まずは一通り見せて、興味を引きたい時などに便利です。 「ループスライダー」の実装方法 ループスライダーの実装には「jQuery」を利用。まずは外部ファイルを使用するサイトの「head」タグ内にコードを記載。その後、以下のソースコードで実装。 jQueryの設置方法は下記サイトで確認。 jquery HTML .loopSlider　スライダーの表示枠（動かない枠部分）.loopslider_wrap　スライダーの可動枠 <div class="loopSlider"> <div class="loopslider_wrap"> <ul> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> <li><img src="○○○○" width="100%"></li> </ul> </div> </div> <script> $(function(){ loopTopSlider(); loopsliderPosition(); }); </script> CSS 基本的に「 表示枠 < 可動枠 」なので「overflow: hidden;」で見えては困る部分を見えなくする。また、「position」プロパティを使うため、枠の高さも設定。 .loopSlider{ height: 230px; overflow: hidden; position: relative; } .loopSlider .loopslider_wrap{ height: 230px; display: -webkit-flex; display: flex; position: absolute; top: 0; left: 0; } .loopSlider .loopslider_wrap ul{ display: -webkit-flex; display: flex; } .loopSlider .loopslider_wrap ul li{ width: 324px; } jQuery スライダー画像の全体幅を「sliderSize」として取得してから、取得値を2倍したものをスライダーの可動枠の幅に設定。「clone」関数でスライダー画像を複製して、スライダー画像の末尾に追加。60000秒かけて稼働枠を左端から、左方向に移動させていき、複製部分の左端が左端に到達した時点(60000秒 ) で、左端 ( 0 )の位置に戻す。あとはこの動作を「setTimeout」関数で60000秒ごとに繰り返す。見た目はループしているように見えますが、実際は複製した画像が左端で重なるようにして、入れ替えています。 function loopTopSlider(){ var sliderSize = $('.loopSlider .loopslider_wrap ul').width(); $('.loopSlider .loopslider_wrap').css({'width':sliderSize*2+'px'}); $('.loopSlider .loopslider_wrap').find('ul').clone().appendTo('.loopSlider .loopslider_wrap'); }; function loopsliderPosition(){ var sliderSize = $('.loopSlider .loopslider_wrap ul:first-of-type').width(); $('.loopslider_wrap').css({left:'0'}); $('.loopslider_wrap').stop().animate({left:'-'+(sliderSize)+'px'},60000,'linear'); setTimeout(function(){ loopsliderPosition(); },60000); };

コンテンツマーケティングの一環として、自社でブログを書いてツイッターで情報発信という流れをされているところも増えたので、ツイッターで拡散した記事を、よりクリックしてもらえるようになる「twitter（ツイッター）カード」の導入方法をメモ。 Twitterカードとは Twitterカードとは記事等のツイートボタンを押した（ URLをシェア ）際に自身で入力したコメントは別に、自動的にツイートに組み込まれるページ情報のこと。 上のイメージのように、記事のURLのみでなく、タイトルや要約文、画像が一緒に表示されるので、ユーザーの目に留まりやすく、流れの速いツイートの中では、このTwitterカードが設定されているかどうかでツイートのクリック率も大きく変わる。 Twitterカードの概要と設定方法 Twitterカードの設定は、情報発信をするページのHTMLファイルのheadタグ内に専用のコードを直接記載することで可能。 <meta name="twitter:card" content="カード種類"> <meta name="twitter:site" content="@ユーザー名"> <meta property="twitter:title" content="記事のタイトル"> <meta property="twitter:description" content="記事の要約（ディスクリプション）"> <meta property="twitter:image" content="画像のURL"> 「twitter:title」「twitter:description」「twitter:image」の3つは、OpenGraphの項目と併用可。すでにOpenGraph（「og:title」「og: description」「og: image」）が設定されている場合は、Twitter側を省略可能。カードの種類は下記の通り。 カードの種類 種類表示される内容 summary タイトル、説明、およびサムネイルを表示できる。 summary_large_image 「summary」とほぼ同じ、表示される画像が大きくなる。 app アプリを直接ダウンロードできるボタンを表示できる。 player ビデオ/オーディオ/メディアを表示できる。 About Twitter Cards Wordpress（ワードプレス）への導入 実際は、ワードプレス等のCMSに組みこんで自動取得する流れがメインになるので、ワードプレスへの導入方法もメモ。「All in one seo」というプラグンでも実装はできるが、今回はソースを直にカスタマイズ。 記事の要約（ディスクリプション）を個別に設定できるように機能を追加する 初期状態では、ページの要約の部分が一律（キャッチフレーズ）になっていることが多いので、記事ページで個別に要約が設定できるよう変更。使用しているテーマフォルダ内の「function.php」に下記のソースコードを追加。 //ディスクリプションの設定 function get_description() { if(is_single()) { $description = get_the_excerpt(); } if(empty($description)) { $description = bloginfo('description'); } return $description; } Twitterカードの更新される部分に該当部分を変更する Twitterカードのソースコードを下記の内容に変更。 <meta property="twitter:title" content="<?php the_title(); ?>"> <meta property="twitter:description" content="<?php echo get_description(); ?>"> <meta property="twitter:image" content="<?php the_post_thumbnail_url( 'medium' ) ?>"> 「twitter:title」の記載内容は記事タイトル。サイト名なども記載したい場合は好みで変更。「twitter:description」に表示される内容は各記事の「抜粋」に入力した内容。入力がなければ「キャッチフレーズ」になる。「twitter:image」の記載内容は「アイキャッチ」で登録している画像。 「Card validator」表示内容を確認 ソースコードを追加したら、きちんと表示されるのかを「Card validator」で確認。「Card URL」に設定したページのURLを入力して「Preview card」をクリック。正しく表示されれば完了 Card Validator | Twitter Developers

ホームページを制作する中でアイキャッチ等のポイントとして使われているアイコン。以前は画像を作成して設置していましたが、スタンダードなものであればWEBアイコンフォント「Font Awesome」を使って表現が可能なので、使い方をメモ。 「Font Awesome」を使ったWebアイコンの実装の方法 「Font Awesome」のサイト内に用意されているタグを設置するだけでもWEBアイコンの実装は可能ですが、空タグになるのは好ましくないので、CSSの疑似要素（before）使った方法で実装。 サイトに登録して外部読込用タグを取得 「Font Awesome」のサイトで登録(無料)を済ませた後に表示される「kit code」をコピー、使用するサイトの「head」タグ内にコードを記載。SSL化に影響がないよう、プロトコル部分を削除。 <script src="//kit.fontawesome.com/○○○○○○○○○○.js" crossorigin="anonymous"></script> Font Awesome 使いたいアイコンを検索して、アイコンのコードと種類を確認。 サイト内の検索フォームから利用したいアイコンを検索。 アイコンの詳細ページで「種類」と「ユニコード」を確認。 HTMLとCSSを編集してアップロード 前の工程で確認した「ユニコード」をCSSの「content」の部分に頭に「\」(円マーク)を付けて記載。使用するアイコンの種類により「font-family」と「font-weight」も変更。 ※下記の参考例は「icon-mail」というクラスの疑似要素(before)を使用。 HTML <ul> <li class="contact"><a href="/contact/" class="icon-mail">お問い合せ</a></li> </ul> CSS .icon-mail::before { font-family: "Font Awesome 5 Pro"; content: "\f0e0"; font-weight: 900; } 「font-family」と「font-weight」の対応表 種類font-familyBrandsFont Awesome 5 Brandsその他Font Awesome 5 Pro 種類font-weightSolid900Regular or Brands400Light300