🔰HTML・CSS、その他設定など【備忘録】

2026/08/16

CSS HTML 学習用

コメント

冒頭に

Bloggerでは、記事の冒頭に必ず次のmoreタグ(続きを読む)を記入する。
【Blogger】「追記を挿入」関連で解決した3つのトラブル|表示数とスピード

【Blogger】「追記を挿入」関連で解決した3つのトラブル|表示数とスピード

当ブログはBloggerで運営しています。 今さらですが、いま使っているテーマ(テンプレート)では、「追記を挿入」がけっこう大事かもしれない、と気が付きました。その理由を書いています。

floatのレスポンシブ(スマホ)対応

✴️例 width:50%; max-width:300px; と記入する。
画像のfloatはスマートフォンでの見た目を考えて行いましょう

画像のfloatはスマートフォンでの見た目を考えて行いましょう

回り込み と表現されることが多い float (フロート) という手法について。 実際は回り込むのは特定条件下だけなので「回り込み」ではなく「浮き, 浮かせ」がfloatの本来の性質ですが。 そういった薀蓄はさておき、記事内で画像とテキストを並べるのにfloatを使う方もいらっしゃると思います。 そのfloat適用要素、スマートフォンでの見た目をちゃんと確認していますか? というお話。そしてどう設定すればスマホでも見やす...

⚠️あとでボックスの回り込みの解除する必要がある。

YouTubeなどの動画埋め込みサイズ

🎞️アスペクト比 16:9

20倍|320:180
30倍|480:270
35倍|560:315 🔶YouTubeの埋め込みコード生成時の既定サイズ
40倍|640:360
45倍|720:405
50倍|800:450
60倍|960:540
70倍|1120:630
80倍|1280:720

⚠️bilibili動画
&autoplay=false を追加

水平線

基本形


応用形








♬

下線

Let it Be(あるがままに)
Let it Be(あるがままに)
【CSS】「text-decorationすごい」のメモ。色、太さ、位置も変えられる - もぐもぐ食べるおいしいWebデザイン。 - もぐでざ

【CSS】「text-decorationすごい」のメモ。色、太さ、位置も変えられる - もぐもぐ食べるおいしいWebデザイン。 - もぐでざ

cssのtext-decorationで色んなことができるのでまとめました。色をつける、二重線、点線、波線、破線、線の太さを変える、位置を変える(余白をつける(、打ち消し線、上線などなど…ただしIE11では使えないので注意です。

小文字

Let it Be(あるがままに)

太文字

Let it Be(あるがままに)   ※strongタグを使用


Let it Be(あるがままに)   ※bタグを使用

マーカー

Let it Be(あるがままに)


Let it Be(あるがままに)   ※strongタグを使用


Let it Be(あるがままに)


Let it Be(あるがままに)


マーカー線(蛍光ペン)をおしゃれにするCSSとHTML解説|7色3種のサンプル付き | カゲサイ

マーカー線(蛍光ペン)をおしゃれにするCSSとHTML解説|7色3種のサンプル付き | カゲサイ

コピペ用マーカーcssをおしゃれにするには、線の太さとテキストとのバランスが大事。

枠線内に文字

例:実線の枠に入れる(角丸つき) -背景色付き
ここに文字を入力する。


枠をつける - HTMLのお勉強

枠をつける - HTMLのお勉強

4.プチ☆カスタマイズ

ブログカード|サイズの変更・配置の変更

⚫通常
In The Beginning

In The Beginning

In the beginning was the Blog, and the Blog was with God, and the Blog was God.女もすなるブログといふものを、男もしてみむとて、するなり。つれづれなるままに、日く...



🔴70%:style="max-width: 70%;"を追記
In The Beginning

In The Beginning

In the beginning was the Blog, and the Blog was with God, and the Blog was God.女もすなるブログといふものを、男もしてみむとて、するなり。つれづれなるままに、日く...



🔴70% かつ 中央寄せ:style="max-width: 70%; margin:0 auto;"と書き換える
In The Beginning

In The Beginning

In the beginning was the Blog, and the Blog was with God, and the Blog was God.女もすなるブログといふものを、男もしてみむとて、するなり。つれづれなるままに、日く...



🔴70% かつ 右寄せ:style="max-width: 70%; margin:0 0 0 auto;"と書き換える
In The Beginning

In The Beginning

In the beginning was the Blog, and the Blog was with God, and the Blog was God.女もすなるブログといふものを、男もしてみむとて、するなり。つれづれなるままに、日く...



Let it Be(あるがままに)

テスト:Let it Be(あるがままに)


例:Let it Be(あるがままに)
Let it Be(あるがままに)
Let it Be(あるがままに)
Let it Be(あるがままに)
Let it Be(あるがままに)
  
Let it Be(あるがままに)
Let it Be(あるがままに)
we are the world
Let It Be(あるがままに)/The Beatles
Let it Be(あるがままに),Let it Go(ありのままに),Que será,será(なるようになる)
Alea jacta est(賽は投げられた) htmlにstyleを直書きする
Let it Be(あるがままに)
Let it Be(あるがままに)

Google マイマップ 設定

オリジナル地図にアレンジ『Googleマイマップ』作成方法や便利なインポート機能をご紹介 | 株式会社ティウェブ

オリジナル地図にアレンジ『Googleマイマップ』作成方法や便利なインポート機能をご紹介 | 株式会社ティウェブ

WordPressにGoogleマップを埋め込む方法!スマホ対応のしかたも | ウミガメ株式会社

この記事では、初心者に向けて、WordpressにGoogleマップを埋め込む方法を解説します。ブロックエディタ―とクラシックエディターに分けて解説しますので、ご自身に合ったほうを参考にしてください。また、スマホ対応(レスポンシブ対応)の方法や地図が表示されない原因、対処法なども紹介します。

googleマイマップを埋め込むときに縮尺・位置を調整する方法

googleマイマップを埋め込むときに縮尺・位置を調整する方法

縮尺や位置を調整して、ランドマークが見え、目的地まできちんとたどり着けるマップを作ろう

ブログ備忘録 GoogleMap & MyMap埋込み方法

ブログ備忘録 GoogleMap & MyMap埋込み方法

Google マイマップの埋め込み方法の備忘録です。Google My Maps 埋め込み方法Google My Maps → 地図の名前の右上にある点々 → 自分のサイトに埋め込む → HTMLをコピーコピーしたHTMLを「カスタムHTM...

Powered By Blogger

📝お知らせ

このブログはGoogle Blogger(ブロガー)で作成してあり、
WordPress(ワードプレス)で作成した
メインブログ|神聖ブログ帝国のサブブログである。

メインブログは、こちら⤴️をクリックして開く。※ただし、2025年5月で更新が止まっている❗

🔎ブログ内検索

🌐Wikipediaで検索

検索結果

🧲固定された投稿

🔰HTML・CSS、その他設定など【備忘録】

QooQ