Web制作 SEOに時間をかけられない人のための「ランクエスト活用術」完全ロードマップ
SEOで困っているあなたに「SEOって何から始めればいいのか分からない」「外注したけど全然効果が出なかった」「検索順位が安定せずに毎月ヒヤヒヤする」――そんな経験、ありませんか？ 私自身、かつてはブログのアクセス数が思うように伸びず、試行錯...
html
Web制作 
Web制作 :has()疑似クラスを使いこなす！次世代CSSの実用例集
CSSに新しく加わった強力なセレクター:has()。この関数型疑似クラスは、親要素が特定の子や兄弟要素を持っているかを条件にスタイルを変えることができ、これまでJavaScript頼みだった「条件付きのスタイル変更」をCSS単体で実現できる...
Web制作 CSSでtableの空のセルに斜線を引く
空のセルに斜線を引くためのCSS設定/* 空のセルに斜線を引く 透明ー黒黒ー透明 */table td:empty { background-image: linear-gradient(to top left, transparent, ...
Web制作 【jQuery】slick.jsに一時停止機能をつける
slick.jsを一時停止できるようにします。最低限しか書いていないのでお好みで変更してください。HTML<div class="slider"> <div><img src="image1.jpg" alt=""></div> <div>...
Web制作 【HTML・CSS・JavaScript】aタグのリンクを無効にする
aタグのリンクを無効にしたい場合の、HTML・CSS・JavaScriptそれぞれの方法です。単にリンクを無効にしたいだけであれば、href属性を外してtabindex="-1"を付けるのが最もシンプルで、デメリットもありません。HTMLの...
Web制作 PHPでcanonicalを自動生成する
canonical（カノニカル）を適切に設定することでURLを正規化することができます。しかし、手動で設定するとなると手間がかかるので、PHPで動的に出力してみます。 のようにクエリ付きのURLが正しい場合もありますが、リンク元によっては意...
Web制作 【Swiper】ズームしながらフェードで切り替わるスライダーを実装する
JavaScriptライブラリ「Swiper」を使って、ズームしながらフェードで切り替わるスライダーを実装します。Swiperの読み込み通常通りSwiperのCSSとJavaScriptを読み込みます。<link rel="styleshe...
Web制作 【CSS】モーダルウインドウ実装時に後ろの要素がスクロールするのを防ぐ （スクロール連鎖防止）
position: fixedで配置した要素の後ろの要素がスクロールしてしまうモーダルウインドウなどposition: fixedでスクロール可能な要素を固定して配置した場合、要素の下部の境界に到達するとブラウザは次にbody要素をスクロー...
Web制作 サブディレクトリ配下をドキュメントルートとして読むように設定する
本番環境はルートディレクトリで運用し、テストの環境のみサブディレクトリで運用したい場合、CSSや画像のパスが異なるため公開時にすべてのパスを変更しなければなりません。パスをすべて変更するのは面倒かつ変更漏れのリスクもあるため、パスの指定は本...
Web制作 【HTML】em・i・strong・mark・bタグの違い
テキストを強調する要素として「em」「i」「strong」「mark」「b」などがありますが、使い分けの判断に迷うことがあるので各要素の違いをまとめてみました。emタグ強勢する（アクセントを付ける）箇所を表します。同じ文でもどの個所を強勢す...