Teaprog.com

とあるエンジニアの日々の記録。エンジニアと関係のないようなことも書きます。

HTML

スマートフォン向けのサイトメニューの作成

目次 はじめに 参考記事 手順 CSSソースコード 貼り付ける場所 HTMLソースコード 貼り付ける場所 最後に はじめに このサイトでは、はてなブログを使用していますが、スマホでサイトを表示させると、以下の左の図のようにメニュー内の文字が収まらずにはみ出…

サイト上で対象物を半透明に表示する方法

イメージ図 目次 はじめに 参考サイト 実装結果 手順 CSSソースコード 貼り付けた場所 HTMLソースコード 貼り付けた場所 おまけ 実装結果 HTMLコード 最後に はじめに 今回は、はてなブログにおいて「サイト上で対象物を半透明に表示する方法」を試してみま…

マウスオーバーに合わせて拡大、縮小させる方法

イメージ図 目次 はじめに 参考サイト 実装結果 拡大 縮小 手順 CSSのソースコード 記述する場所 HTMLのソースコード 記述する場所 最後に はじめに 私のサイトにも色々な動きを取り入れてみたいと思い、今回は「マウスオーバーに合わせて拡大、縮小させる」…

グローバルメニューのカスタマイズへの第一歩

イメージ図 目次 はじめに 参考サイト 手順 HTMLコードの記述場所 表示結果 CSSコードの記述場所 表示結果 おまけ 自身での編集後の表示結果 変更した箇所 HTMLコード CSSコード 最後に はじめに 今回はサイト上で新たにグローバルメニューを作ろうと思いま…

CSSでリストの余白を作る方法

SDによる余白のイメージ 目次 はじめに HTMLコード(改善前) 表示結果 参考にしたサイト CSSコードの追加 HTMLコード(改善後) 表示結果 HTMLコード(別表記) 表示結果 最後に はじめに 記事を書いている際に、上のように目次という章を作成して、サイト…

HTMLで目次を表示する方法

目次 はじめに 参考書籍 HTMLコードと表示例 HTMLコード(リスト表示.1) 表示例 HTMLコード(リスト表示.2) 表示例 HTMLコード(リストの階層表記) 表示例 HTMLコード(サイト内リンク) 表示例 HTMLコード(リスト+サイト内リンク) 表示例 最後に はじ…

サイト上で動画ファイルを再生する方法

目次 はじめに 参考にしたサイト 手順 videoタグのみで表示する HTMLコード 表示例 手動再生画面を表示する HTMLコード 表示例 自動再生する HTMLコード 表示例 自動ループ再生する HTMLコード 表示例 サムネイルに別の画像を表示する HTMLコード 表示例 ま…

HTMLでかんたんな表を作成

はじめに サイト上で複数の対象物を数値で比較して紹介したいとき、表を作成した方が見やすいと思いましたので、HTMLで表を作成する方法を調べて見ました。 やり方が全く分からなかったため、綺麗に描写できていないかもしれません。 何卒、ご了承いただける…

HTML上でプログラムコードを見やすく表示

内容 HTML上、主にサイトなどにプログラムのソースコードを記述する場合、 改行や色分け表示がされたプログラムソースコードを表示する方法を紹介したいと思います。 表示例 表示例のHTMLソースコード <script> <pre> <code> 実際私も使用している方法で、すごく重宝しています</code></pre>…