Teaprog.com

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

CSS

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

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

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

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

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

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

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

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

ページ内リンク先へ滑らかに動かす方法

イメージ 目次 はじめに 関連する過去記事 手順 1.jQueryで実装する方法 ソースコード 2.CSSで実装する方法 ソースコード 最後に 参考記事 はじめに 今回は、ページないリンクをクリックした時に滑らかにスクロールするように設定してみました。 これを機に…

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

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

パンくずリストのデザイン変更

パンくずリストのイメージ画像 目次 はじめに パンクズリストとは? 参考にしたサイト 実際に行った手順 CSSコード(引用) 表示結果 CSSコード(微アレンジ) 表示結果 最後に はじめに はてなブログにおいて、パンくずリストを少しデザインを変更しようと…