HTML／CSS 【CSS】ルビの位置を調整（本体から離す）方法
ルビの位置を本体から離す調整方法の説明 ルビの基本的な使い方 ルビをつけたい箇所を<ruby>で囲って、その中でルビ文字を<rt> で囲みます。 ↓このようにHTMLで記載すると… よしひこは、<ruby>痛恨<rt>つうこん</rt></...
HTML／CSS
HTML／CSS HTML／CSS 【CSS】WordPressで画像キャプションの行間を詰める方法。line-heightで詰まらない場合の対処法
Wordpressの記事内で、画像キャプションの行間がline-heightで詰まらない時の解説です。 Wordpressでキャプション付き画像を乗せる場合、ショートカットから以下のように展開されます。 【caption】 <img src...
HTML／CSS セコい「コピペ禁止サイト」の作り方（右クリックもテキスト選択も禁止！）
個人的には大反対な「右クリック禁止サイト」ですが、あえてその実装方法を紹介します。 右クリックを禁止しているサイトの意図は文字のコピーをされたくないことだと思うので、マウスドラッグで文字等の選択を禁止する方法も併せて紹介します。 現在は、よ...
HTML／CSS 【PHP】404エラーを正しく表示・処理する方法
PHPで404エラーを正しく表示する方法の解説です。 存在しないページにアクセスされた時、ざっくり404エラーページにリダイレクトしたい場合は、 .htaccessに１行記載すればOKです。 例えば、以下のコードは、ページが見つからない場合...
HTML／CSS 【CSS】テーブルを横スクーロールさせる方法／スマホ・レスポンシブ対応
スマホ使用時等、表（テーブル）を横にスクロールしたい場合のHTML、CSSの記載方法です。 案外簡単に実装でき、HTMLは、tableにクラス指定し、CSSは少しゴニョゴニョすればればOKです。 【HTML】 <table class="s...
HTML／CSS 【HTML】著作権記号（丸C）、登録商標記号（丸R）、商標（TM）の表示方法
HTMLで、著作権記号（○C）、登録商標記号（○R）、商標／トレードマーク（TM）の表示方法です。 特殊文字コードを使用することにより、HTMLで表現することができます。 表示したい特殊文字 特殊文字コード 表示 著作権記号（丸C） &co...
HTML／CSS 【HTML】平方メートル、立方メートルをHTMLで正しく表現する方法
HTMLで、平方メートル、立方メートルを文字化けやズレずに正しく表示させる方法です。 3つの方法を紹介しますが、「方法２」が一番オススメです。 方法1：漢字変換で直接変換する方法 漢字変換で直接変換する方法です。 「へいほうめーとる」または...
HTML／CSS 【HTML】textarea内で文字列を改行表示させる方法
HTMLのテキストエリア（textarea）内で、文字列を改行表示させる方法です。 最初に思いつくのは、改行コードや（\n、\ｒ、 \n\r）や改行タグ（<br>）を入れる方法ですが、そのままだとコードやタグがそのまま表示され、うまくいきま...
HTML／CSS 【css】リストで黒ポチが消えない時の対処法
CSSで黒ポチ（中黒）を消したい場合、一部の解説では以下のようになっています。 HTML <ul class="no_poti"> <li>みかん</li> <li>りんご</li> <li>バナナ</li> </ul> CSS .no_p...
HTML／CSS 【CSS】スマホで見ると微妙に左右にズレる現象 → １行で速攻解決します。
レスポンシブ対応のサイトを作っている場合、スマホサイズの画面にすると画面が左右に微妙にズレる場合があります。 ほとんどの場合の原因は、サイトの横幅がスマホ画面サイズを超えてしまったことが原因です。 解決するCSSコードは、ズバリ以下の通り。...
HTML／CSS 【css】文字や画像を画面の中央に配置する一番簡単な方法
cssで文字や画像を画面の天地左右の真ん中に揃えたい時の設定方法です。 左右を揃えるのは比較的簡単ですが、天地（上下）の中央揃えがなかなか難儀したりします。 対処方法はいろいろあるのですが、CSSのFlexboxを使うのが一番簡単で、以下の...
HTML／CSS 【CSS】line-styeが効かない時の解決方。１行追加で解決します。
CSSのline-styeやline-style-typeを支持しても反映されない不具合を一発解消。CSSに１行指定するだけ。