HTML

CSS

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

はじめに このサイトでは、はてなブログを使用していますが、スマホでサイトを表示させると、以下の左の図のようにメニュー内の文字が収まらずにはみ出してしまいます。 一方、今回改善した結果が右の図のようになります。     右の改善した方の...
CSS

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

はじめに 今回は、はてなブログにおいて「サイト上で対象物を半透明に表示する方法」を試してみました。 はてなブログを使用しての説明となりますので、何卒ご了承ください。 はてなブログを使用していない方でも、CSSコードを記述する場所に注意す...
CSS

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

はじめに 私のサイトにも色々な動きを取り入れてみたいと思い、今回は「マウスオーバーに合わせて拡大、縮小させる」という動きを実装してみました。  参考サイト 今回は以下のサイト様を参考にさせていただきました。 要素を拡大・縮小させるCSSア...
CSS

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

はじめに 今回はサイト上で新たにグローバルメニューを作ろうと思いました。 右も左も分からない状態から、自分なりに調べてなんとか作成することができました。  参考サイト ・【はてなブログカスタマイズ】ドロップダウンメニューを付けてみた。 -...
CSS

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

はじめに 記事を書いている際に、上のように目次という章を作成して、サイト内リンクを設定する場合があると思います。 これは前回の記事でも少し説明したように、HTMLコードのみで作成する事はできます。 私はこれまで、目次を作成する際には、...
HTML

HTMLで目次を表示する方法

はじめに 上に記述しているような目次の表示、合わせてサイト内へのリンクの付け方を書いてみようと思います。 簡単なHTMLコードの組み合わせで実装されていますが、いくつかアレンジする方法がありますので、私もよく使うものを少し紹介してみたい...
HTML

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

はじめに はてなブログにおいて、動画ファイルをHTMLに埋め込む方法を考え、調べました。 その結果、ストレージサービスを利用するとうまくいきそうだと分かりました。 そこで、先日の記事↓では「Cloudinary」というストレージサービ...
HTML

HTMLでかんたんな表を作成

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

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

内容 HTML上、主にサイトなどにプログラムのソースコードを記述する場合、 改行や色分け表示がされたプログラムソースコードを表示する方法を紹介したいと思います。 表示例 表示例のHTMLソースコード <script&...