WebサイトにGoogleMapを埋め込む方法
Webサイト(グーテンベルク)でGoogleMapを埋め込む方法をご紹介します。 ①Ｇoogleマップを開き、Webサイトに掲載したい場所を検索します。 画面左上の検索ボックスに表示したいスポット名や住所を入力します。 …
WEB
スマートフォンだけハンバーガーメニュー表示にする（CSS）
※ここでは、768px未満の表示をスマートフォン表示、768px以上の表示をパソコン表示と呼んでいます。 上図の様にスマートフォンだけハンバーガーメニューを表示し、ナビゲーションの表示をウィンドウ幅768pxを境目に切り…
Photopeaで画像を楕円形に切りぬく
Photoshopに似た機能をブラウザ上で利用できる無料画像編集ツールPhotopeaで、画像を楕円形に切り抜く方法です。 画像を楕円形に切り抜く方法 画像を開く Photopeaを開き、画像を「ドラッグ・アンド・ドロッ…
headerを上部に固定表示
スクロールした時、headerを上部に固定表示する方法。 ヘッダーの固定は、 position: fixed; で簡単に出来ます。 この場合、headerが浮いた状態になる為、次のようなことが起こります。 ①…
HTML tableタグで簡単な表組みを作ろう
今回はHTMLのtableタグを使って、表を作る方法をご紹介します。 table要素と子要素 表組を作るには、table要素とtableの子要素を使います。子要素は複数ありますが、必ず使うのは「tr要素」「th要素」「t…
HTMLのheadタグに記述する情報
今回はHTMLの <head>～</head>内に 記述する情報で最低限記述しておきたいものをご紹介します。 headタグとは headタグは、メタ情報やブラウザへの指示などを記述する為のタグです…