HTML dl dt dd の横並びと縦並び スマートフォンとPCでの表示の切り替え Prog-lab Prog-labの趣旨は解説よりも、メモ置き場に近い情報コーナーです。 タグの各意味と説明、目的 dl,dt,ddを用い、tableのように横並びに表示させる。スマートフォンなどについてはdd,dtで改行させる。 dl 説明リスト dt 説明たしい用語 dd 説明 用語が上揃えとなるパターン 下線(border-bot... 2023.12.15 HTML
HTML&CSSリファレンス dtとddの間で改行しない コピペで使えるHTML+CSS 用語の説明などで用いられる<dt>はブロックレベル要素ですから、原則として横並びにはできない。ここでは改行をせず、きれいに横並び、かつ、縦方向にも揃えて表示する方法について解説します。 2023.12.15 HTML&CSSリファレンス
メモ WordPressのtableに勝手にheightが指定されてしまう問題 ※メモ程度の記述です。ご了承ください。 table tr td thなどにheight指定が入る wordpressで表を作って保存をし、後で作り直そうとすると、 勝手にheightが指定されてしまっている問題です。 全部手動でheightを消す必要はありません。 この問題についてはcssで解決します。 カスタムCSS... 2023.07.05 メモ
HTML&CSSリファレンス スクロールするとdivが表示されるようにする コピペで使えるHTML+CSS+JavaScript 無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。 2023.05.08 HTML&CSSリファレンス
HTML&CSSリファレンス ブラウザ右下に常に文章やBOX(div)を表示する コピペで使えるHTML+CSS 無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。 2023.05.08 HTML&CSSリファレンス
HTML&CSSリファレンス 画像を加工せずに切り抜き表示する コピペで使えるHTML+CSS 無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。 2023.05.06 HTML&CSSリファレンス
HTML&CSSリファレンス CSSのみで縦型の棒グラフをつくる コピペで使えるHTML+CSS グラフ編 無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。 2023.05.05 HTML&CSSリファレンス
HTML&CSSリファレンス CSSのみで円グラフをつくる コピペで使えるHTML+CSS グラフ編 無効なテキストを指定するS要素の修正。一般的なブラウザでは文字の中央に打消し線が引かれるS要素。text-decorationを修正して線の種類や太さ、色を変更します。 2023.05.05 HTML&CSSリファレンス
HTML&CSSリファレンス 漢字を含む日本語全角文字を斜め斜体にする コピペで使えるHTML+CSS ここでは文字の斜体化について説明します。em要素を適用することで斜体化されるわけですが、この方法では漢字や平仮名といった全角文字は斜めになりません。多くの日本語フォントが斜体を用意していないためです。そこで、全く別の方法によって、全角文字を斜体化します。 HTML全角文字の斜体化メーカー 文章を入力→コードを取得でHT... 2023.05.03 HTML&CSSリファレンス
HTML&CSSリファレンス デザイン自由自在のdivドロップダウンメニューをCSSのみで実現 コピペで使えるHTML+CSS リスト構造を用いず、divを用いることで、自在なデザインが可能なドロップダウンメニュー(プルダウンメニュー)を実装します。:hoverの重ね掛けで実現します。Chrome、Edge、Opera、Firefoxで確認済。実際に実装する際はスマートフォン向けに@mediaを使って低解像度向けにwidthを狭く指定するか、又... 2023.05.03 HTML&CSSリファレンス
HTML&CSSリファレンス 三角形や不等号など文字の向きを変える コピペで使えるHTML+CSS 三角の▲、不等号の>といった記号や文字の表示の方向を変えます。見出しや、文の初めなどに配置して文章にアクセントを加えることができます。 ▲の向きを変える ▲を右向きにする ▲を右向きにしますと、 ▲ となります style属性で記述 <span>▲を右向きにしますと、</span> <span style="displ... 2023.05.03 HTML&CSSリファレンス
HTML&CSSリファレンス まとめ箇条書き表リスト コピペで使えるHTML+CSS ブログなどの文末によくある要点をまとめた箇条書きや一覧を、順不同リスト<ul>、<li>を使って作成します。箇条書き黒板のデザインも再現します。 2023.05.03 HTML&CSSリファレンス
HTML&CSSリファレンス table 角丸の表を作成する 内側の壁紙問題も対応 コピペで使えるHTML+CSS CSSのborder-radiusを使ってtable表の外周について角を丸くします。しっかりと丸みを持たせるためにテーブル内のセルをどのように処理するかについて、first-childとlast-childを実装した汎用性の高い設計も解説します。 2023.03.14 HTML&CSSリファレンス
HTML&CSSリファレンス CSS トラブルQ&A コピペで使えるHTML+CSS CSS トラブル Q&A いくつかのトラブルについてのテクニックなどをメモしておく。 overflow:hiddenについて CSSが効かない、挙動がおかしい → overflow:clipに変更するとうまくゆくことがある。 2023.03.04 HTML&CSSリファレンス
HTML&CSSリファレンス border 枠線の表示 コピペで使えるHTML+CSS CSSで要素の枠線を引くborderプロパティの説明、solidからhidde,outsetまで全てを網羅した解説を掲載。borderの高さは調整できるのか? ::beforeセレクターとの違いも説明。 2023.03.02 HTML&CSSリファレンス
メモ WordPressのサイドバーの文字の大きさやカテゴリーの行間を変更する ※メモ程度の記述です。ご了承ください。 変更したい記述を見つける cssの変更場所を見つけ出す場合に最も簡単な方法がchromeブラウザでF12を押して、ソースコードを表示させる方法です。左側と右側を見比べながら探し出します。コードに対応する描写に色が付きます。 実際にどの値で行間を指定しているか、文字の大きさが指定さ... 2022.10.11 メモ