ウェブデザイン– category –

【html】 <div class="zoom"> <img src="images/index-images/image01.jpg" alt=""> </div> 【css】 .zoom { overflow: hidden; } .zoom { -webkit-transform: scale(1); transform: scale(1); -webkit-t...

レスポンシブサイトでブラウザのサイズやデバイスが変わっても同じアスペクト比で変化していくcss 【HTML】 <div class="box"> <div class="inner zoomin1"> <a href=""> <img src="images/index...

ページの一番上にヘッダーやナビゲーションを固定する場合、ページ内アンカーリンクがずれる問題 cssで固定の分の調整をする .link-margin { margin-top:　-100px; padding-top:　100px; } スムーススクロールとヘッダー固定の調整のJavaScriptを書く $(fu...

新着表示 カテゴリーID1の記事を4件読み込む場合 <!-- ////////////////////////////////////////////////// 新着表示 --> <?php if ( have_posts() ) : query_posts('showposts=4&cat=1'); ?> <?php while (have_posts()) : the_post(...

【】 インスタグラムのアカウントが分かればすぐに読み込み可能です。    

決まった枠内でスクロールできる擬似インラインフレーム   .flame { overflow: auto; height: 200px; width: 100%; background-color: #f7efe9; border: solid 1px #f9bb8f; padding: 20px; }   <div class="flame"> <h2>テキストテ...

【】 通常のサイトはXサーバー、サブドメインはXREAで運用する場合の設定です。   Xサーバーでの設定 Xサーバー側でサブドメインを追加する。 〇〇〇.test.com ↓ DNSレコード設定でDNSを追加する ----- ホスト名：〇〇〇（設定したサブドメイン） 種...

ウィンドウズサイズに合わせてjQueryを使いたい場合はcssのようにブレイクポイントを使って切り替えられます。   if (window.matchMedia( "(max-width: 640px)" ).matches) { /* ウィンドウサイズが 640px以下の場合のコード */ } else { /* ウィンド...

スマホの時にtableをスクロールさせる     <div class="scroll"> <table> <tr> <td>テキストテキスト</td> <td>テキストテキストテキスト</td> </tr> <tr> <td>テキストテキスト</td...

.global-nav li a { position: relative; display: block; color: #fff; padding: 20px 30px; } .global-nav li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; -webkit-transform: scaleX(0); -ms-transfor...