HTML

HTML カテゴリー記事(更新日順)

  1. CSSで円(丸)を描き,内側にテキスト(文字)を入れる
    カテゴリ: CSS, HTML
    作成日:
    円をかいて,中に文字を入れるとはこのような絵のこと. 上 左 中央 右 下 CSS と HTML による円とテキストの記述方法 中の文字の位置指定のポイント CSS は以下のようになる. 円は position: rel […]
  2. 【CSS】画像の上に文字を重ねる・重ねた文字を読みやすくする方法
    カテゴリ: CSS, HTML
    作成日:
    画像の上に文字を重ねる・重ねた文字を読みやすくする方法 画像の上に文字を重ねて表示させたいときがあると思います。例えば、製品画像に製品名を載せたい場合などです。この時に画像に直接文字を重ねるのではなく、文字の背景に4分の […]
  3. Hタグ(見出しタグ)とHTML5 アウトライン
    カテゴリ: HTML, 知識
    作成日:
    本記事は HTML Standard のサイトの説明に基づいている. アウトラインとは,「概要,あらまし,輪郭」などと辞書にあるが,まさにその通りで見出し(heading content)ごとに文章をグループ(secti […]
  4. CSS のみでポップアップウィンドウ(画像)を表示する方法
    カテゴリ: CSS, HTML, ホームページ
    作成日:
    Javascript を使用しないで CSS のみでウィンドウ・レイヤー(拡大・縮小)を表示する方法について,いろいろ調べていたが,うまく見つからなかったので考えて作ってみた. モーダルダイアログというとそのダイアログウ […]
  5. チェックボックスのデザインをカスタマイズする
    カテゴリ: CSS, HTML, JavaScript
    作成日:
    チェックの切り替えでデザインが変わるチェックボックス チェックボックスの切り替え時に、デザインを変更したい場合はないでしょうか。例えば会員登録情報の変更時に、登録済みの情報とは別の情報を選択した場合、変更したことが目に見 […]
  6. 【CSSのみ】ヘルプボタンを作成する
    カテゴリ: CSS, HTML
    作成日:
    画像を使用しないヘルプボタン 【CSSのみ】ヘルプボタンをクリックしたときに説明を表示する方法 では、ヘルプボタンは画像を使用していましたが、CSSのみでヘルプボタンを作成することができたのでご紹介します。チェックボック […]
  7. 【CSSのみ】ヘルプボタンで説明を表示する方法
    カテゴリ: CSS, HTML
    作成日:
    JavaScriptを使用しないヘルプボタン フォームの入力項目や機能の使い方についての説明を、?マーク(ヘルプボタン)をクリックしたときに表示する方法をご紹介します。 今回は HTML と CSS のみを使用しており、 […]
  8. レスポンシブデザインとは
    カテゴリ: CSS, HTML, ホームページ, 知識
    作成日:
    レスポンシブデザインとは何か? 「今さら何をいうのか」という話であるが,たまたま,ちょっと不可解な HTML のソースを見たので今回取り上げることにした. レスポンシブデザインとは wikipedia のレスポンシブデザ […]
  9. 【WordPress】リッチリザルト対応の自動パンくずリスト生成
    カテゴリ: HTML, php, 知識
    作成日:
    このところ,リッチリザルトの投稿が続いている. そこで今更ではあるが「パンくずリスト」についても書いてみる. 折角なので WordPress を使っている場合に自動でパンくずリストを生成する方法を書いてみよう. プラグイ […]
  10. Lightbox のような高級感を CSS のみで実現
    カテゴリ: CSS, HTML, ホームページ
    作成日:
    lightbox 風な動作を CSS のみで実現してみた. ライトボックスは画像の拡大表示で手軽に高級感を醸し出せるので使っているサイトは結構あると思う. 前回書いた記事は高級感というところまではいっていないので,さらに […]
  11. 【CSS】テキストやリンクを目立たせるいくつかの方法
    カテゴリ: CSS, HTML, ホームページ
    作成日:
    新しい記事を投稿した時や新商品を発売した時にその説明ページに対するリンクを目立たせたいという場合がある. そのような場合にアイコン画像を作って張るのもよいが,CSS だけで作ったほうがスッキリする. お客様に質問いただき […]
  12. 【WordPress】新着情報で2週間以内の投稿記事に new をつける方法
    カテゴリ: CSS, HTML, php, ホームページ
    作成日:
    WordPress を使っている企業のホームページなどでは新着記事に new というマーク(アイコン)をつけて目立たせたいと思う方もいるだろう. そういう場合にコピペで張り付けて動かすスクリプトを紹介する. 【CSS】テ […]
  13. ホームページメンテナンス
    カテゴリ: HTML, ホームページ, 知識
    作成日:
    「ホームページ担当がいない」「ホームページ作っても認めてくれない」 製造業では特によく聞く言葉です. ホームページは作り方によっては実は非常に優秀な営業マンです. しかしホームページ作成担当者が成果を出しても,その成果に […]
  14. 【CSS】簡単な下線の引き方【HTML】
    カテゴリ: CSS, HTML
    作成日:
    本文中のテキストや見出しに下線を付けたい時があると思います。text-decoration や border を利用してとても簡単に実装できますので、用途別に応じて解説します。 下線を引く まず、下線のサンプルを用意しま […]
  15. 「オフスクリーン画像の遅延読み込み」への対策
    カテゴリ: HTML, ホームページ
    作成日:
    PageSpeed Insights 対策の一環.他の対策は以下を見てください. Youtube の動画を複数埋め込みしたページの高速化 次世代フォーマットでの画像の配信 ウェブフォント読み込み中の全テキストの表示 第三 […]
  16. 【拡張機能】Chromeで文字コードを変更する方法【文字化け対策】
    カテゴリ: HTML
    作成日:
    Chrome拡張機能で文字コード変更 Chromeには文字コードの変更・設定機能はない Chromeには文字コードの変更機能が存在しないので、「拡張機能」を使用します。 文字コードを変更できる拡張機能「Charset」 […]
  17. 【CSS】z-index が効かない場合の注意点
    カテゴリ: CSS, HTML
    作成日:
    z-index が効かない場合に z-index は要素の重ね合わせの順番を定義できます。 以下のように使いますが、数字が大きいほど上に表示されます。 #test { z-index: 1; } スタイルシートを使って、 […]
  18. 【CSS】ボタンクリックでパスワード(テキスト)の表示・非表示を切り替える
    カテゴリ: CSS, HTML, 知識
    作成日:
    概要 ログイン画面で、パスワード表示ボタンをクリックするとパスワードが表示されるという機能は、現在では当たり前になっています。 ですが、もしパスワード表示ボタンが無く、表示・非表示が切り替えられなかったらとても不便に感じ […]
  19. CSSでHTMLのタグを書き換える
    カテゴリ: CSS, HTML, 知識
    作成日:
    CSSでタグを書き換えることはできない CSSに触りなれていないと、CSSでHTMLのタグを書き換えたいと思うことがあるかもしれません。しかし、CSSではタグを書き換えることはできません。 実際に<CSS タグ 書き換え […]
  20. 【JavaScript】目のマークでパスワードの表示を切り替える実装方法
    カテゴリ: HTML, JavaScript
    作成日:
    目のマークでパスワードの表示非表示の切り替え実装 以前、表示・非表示ボタンでパスワードの表示を切り替える方法をご紹介しましたが、今回は目のマークを使用したパスワード表示非表示の実装方法をご紹介します。 javascrip […]
Pagetop