$.ajax(jQuery)とfetch APIを使ってsvgを外部ファイルとして読み込む
svgをcss3のアニメーションで動かす場合、下記のようにsvgファイルのコードをインラインでbody内に入れる必要があります。
<body> <svg class="likeButton" width="500px" height="500px" viewBox="0 0 500 500"> <circle class="explosion" r="150" cx="250" cy="250"></circle> <g class="particleLayer"> <circle fill="#8CE8C3" cx="130" cy="126.5" r="12.5"/> <circle fill="#8CE8C3" cx="411" cy="313.5" r="12.5"/> <circle fill="#91D2FA" cx="279" cy="86.5" r="12.5"/> <circle fill="#91D2FA" cx="155" cy="390.5" r="12.5"/>
ただこのやり方だとbody内のソースの可読性が著しく下がってしまうので、svgタグ部分を外部ファイル化しajaxを使って非同期通信で読み込む方式に変更します。
ajaxで読み込めばbody内のソースも整理され、なおかつインラインの時と同じようにcssでsvgをコントロールする事が出来ます。
<body> <div id="box"> <!--ここ外部svgデータが挿入--> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $.ajax({ url: 'logo.svg',//ここにsvgファイルのパスを入れる }) .then( // 1つめは通信成功時の処理 function(data){ var svg = $(data).find('svg'); $('#box').append(svg); }, // 2つめは通信失敗時の処理 function(){ alert('読み込み失敗'); }); </script> </body>
Fetch APIを使ってsvgを呼び出す
JavaScriptの次世代の非同期通信の規格であるFetch APIを使用する事で、jqueryを使わずに非同期通信が行えるようになります。
フェッチ 【 fetch 】とは
ソフトウェアやネットワーク通信の分野では、データなどの受信側・需要側が(送信側・供給側から送られてくるのを待つのではなく)能動的に読み出しに行く、相手に送信するよう要求する、といった意味合いでフェッチという用語が用いられる。特に、送信側が能動的に送り出す「プッシュ」(push)方式と対比して、一定時間ごとに受信すべきデータの有無を繰り返し確認する受信側の動作を指す場合があり、「ポーリング」(polling)とも呼ばれる。
マイクロプロセッサ(CPU/MPU)では、命令を実行する最初の段階で、命令コード(インストラクション)をメインメモリ(またはキャッシュメモリ)から読み出し、プロセッサ内部のレジスタに転送する動作のことをフェッチという。フェッチされた命令デコード(解析)されて実行に移される。フェッチにかかる時間を「フェッチサイクル」(fetch cycle)あるいは「命令サイクル」(instruction cycle)という。
また、CPUやソフトウェアが将来必要になる(かもしれない)データなどを先取りして読み出しておくことで読み込み動作にかかる待ち時間を削減する手法が様々な分野で幅広く利用されており、そのような「先読み」方式のことを「プリフェッチ」(prefetch)という。
var box = document.getElementById("box") fetch("logo.svg") .then(function(response) { return response.text(); }).then(function(svg) { box.innerHTML = svg })
cssで作るドロップダウンメニュー
コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。
メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテンツにダイレクトに飛べるので、ユーザーの手間が省けるわけです。ユーザビリティの向上のためにも情報量の多いサイトであれば積極的に使っていきましょう。
メガドロップダウンメニューを採用しているサイト例
www.tiffany.co.jp
<nav class="g-nav"> <ul> <li><a href="#">トップ</a></li> <li class="drop">メニュー <ul class="menu-child"> <li><a href="menu/index.html#lunch">ランチ</a></li> <li><a href="menu/index.html#dinner">ディナー</a></li> <li><a href="menu/index.html#course">コース</a></li> </ul> </li> <li><a href="#">アクセス</a></li> </ul> </nav> </body> </html>
第4回試験提出用フォーム
Furniture store より快適な毎日を、より多くの方々に<200b> HOME CONCEPT SERVICE ACCESS 新しい習慣でおしゃれな部屋づくりをはじめよう 感性のままに、好きなものを飾る場所を作りませんか？ コツはテーマを決めること。そうしたら自分の直感を信じて、いいなと思ったものを並べましょう。 それだけで、自分の家の中で好きな場所が一つ増えます。 Item-1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore Item-2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore Item-3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore Store info 会社名 株式会社 Furniture store 住所 東京都豊島区南池袋 電話番号 03-0000-0000 従業員 1000名 資本金 100,000,000円 Map © Net Smart all rights reserved.
img要素をobject-fitで自由な大きさにトリミングする
今まではimg要素には「max-width:100%」を指定して、レスポンシブレイアウトに対応させて来ました。俗に言うフルードイメージです。
画像の縦横比（アスペクト比）が一定の場合はフルードイメージでいいのですが、柔軟なレイアウトの場合は「object-fit」を使う事で、画像の縦横比をコントロールする必要があります。
フルードイメージ
フルードイメージは画像の縦横比が一定のレイアウトやPCファーストから作る場合に向いています
See the Pen
fluid img by yachin29 (@yachin29)
on CodePen.
object-fit
object-fitはレイアウト毎に画像の縦横比が変わる自由なレイアウトやモバイルファーストで作る時に向いています。
See the Pen
object-fit by yachin29 (@yachin29)
on CodePen.
モダンリセットCSSのress.css
リセットcssには色々な方法があり、どれが1番優れているかは難しいので、自身の必要な用途に合わせて使い分けましょう。
html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-bloあck}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}img{max-width: 100%;}
最新版のリセットcss
使用には注意が必要です
/* Box sizing rules */
/* Box sizingの定義 */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default padding */
/* デフォルトのpaddingを削除 */
ul[class],
ol[class] {
padding: 0;
}
/* Remove default margin */
/* デフォルトのmarginを削除 */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
/* Set core body defaults */
/* bodyのデフォルトを定義 */
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* Remove list styles on ul, ol elements with a class attribute */
/* class属性を持つul、ol要素のリストスタイルを削除 */
ul[class],
ol[class] {
list-style: none;
}
/* A elements that don't have a class get default styles */
/* classを持たない要素はデフォルトのスタイルを取得 */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
/* img要素の扱いを簡単にする */
img {
max-width: 100%;
display: block;
}
/* Natural flow and rhythm in articles by default */
/* article要素内の要素に自然な流れとリズムを定義 */
article > * + * {
margin-top: 1em;
}
/* Inherit fonts for inputs and buttons */
/* inputやbuttonなどのフォントは継承を定義 */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
/* 見たくない人用に、すべてのアニメーションとトランジションを削除 */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
