ランダムpicsum画像
👀 やるべき項目 No を選択 してください
<p style="font-style:italic">またcssのfont-styleプロパティでの斜体(イタリック体)</p>
番号のコードは① 〜数字末尾を＋１増やしていく① ② ③ ④ ⑤
コード// ① ② ③ ④ ⑤
  空白
& アンパサンド
' アポストロフィ
© コピーライト
" 二重引用符
  細い空白
@ アットマーク
№ ナンバー
⇒ 右向き二重線矢印
☎ 電話機
などといった感じ≫ ≫ <figcaption>タグに囲まれている、2021年をクリックしてみてください。
後から追加された部分(更新)を記述する（下線が引かれる）
更新しました。
<ins>タグを使い<ins title="更新タイトル記述"datetime="2020-07-04T00:00+09:00">更新しました。</ins>
最後に記述されている+09:00は日本時間を表す。→ <ins title="文字表示"datetime="2020-10-29T00:00+09:00">ok</ins>
<small>文字を小さくするが注釈以外使用しない、smallタグで囲まれた文字をさらにsmallタグで囲むとフォントサイズが2減ります。
<h1 style="text-align: center;">〜</h1> で見出し、
<p style="font-size: 15px">〜</p> で。
<span style="font-size:2em;color: blue">大きく</span>
- code -
<p id="address"> <span style="font-size:2em;color: blue">大きく</span> </p>
<div data-color="black" class="btn" id="btn">
<div class="hole">
<div class="inner">ここをクリックしてCOPYして貼り付けてください</div>
</div>
</div><script>
document.getElementById("btn").addEventListener("click", function() {
var address = document.getElementById("address").firstChild;
var range = document.createRange();
var selection = window.getSelection();
range.setStart(address, 0);
range.setEnd(address, address.length);
selection.removeAllRanges();
selection.addRange(range);
if (document.execCommand("copy")) {
alert("テキストをコピーしました。");
} else {
alert("このブラウザではコピーボタンは利用できないです。")
}
}, false);</script>文章のタグ・段落・改行・仕切り線・
このタグ<p class="sample" style="text-align:start;">と <div>タグ余白の違い。
ここから文章を書いていくと、どのよ うな形になるか、今日の新聞記事を買いいてみる。
菅首相初の所信表明、
第２０3回臨時国会が召集されました、就任初めての所信表明演説を行い、温室効果ガスの排出量を2050年までに実質0にする目標を新たに打ち出した。「行政の縦割り打破」等改革姿勢を強調し、9月の自民党総裁選で公約シタデジタル庁の創設や不妊治療支援、携帯電話料金引き下げの実現に意欲を示した。
ここに文の段落を<p class="sample" style="text-align:center;">タグで書きました回りに余白があります。
同様に文の段落を<p class="sample" style="text-align:center;">タグで書きました、回りに余白があります
text-align:start;
style = "text-align:center;"を付加したディブタグです
<p>タグ内で<br>タグで改行してみました、
回りの余白はどうですか。
div要素に以下のCSSのコードを適用するとこんな感じです
max-width: 900px;
margin-left: auto;
margin-right: auto;
border: 1px solid coral;
background-color: lightblue;
outline: 1px solid black;
がレイアウト調べに役立つborderと違い幅がカウントされない
枠を自由に広げられるようにする方法 以下はコード
完全に自由に広げたい → resize: both;resize: vertical;resize: horizontal;
行の高さは、line-height プロパティで指定できます。
p.sample1 { line-height: normal; }
p.sample2 { line-height: 15px; }
p.sample3 { line-height: 1.5; }
p.sample4 { line-height: 200%; }
sample1
春はあけぼの。やうやう白くなりゆく、山ぎはすこしあかりて、
紫だちたる雲のほそくたなびきたる。
夏は夜。月のころはさらなり。やみもなほ、蛍の多く飛びちがひたる。また、
ただ一つ二つなど、ほのかにうち光りて行くもをかし。雨など降るもをかし。
sample2
夏は夜。月のころはさらなり、やみもなほ、ほたるの多く飛びちがいたる。
また、ただ一つ二つなどほのかにうち光りて行くもをかし。雨など降るもをかし。
sample3
秋は夕暮れ。夕日のさして山の端いとちかうなりたるに、
からすのねどころへ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。
sample4
冬はつとめて。雪の降りたるはいふべきにあらず、
霜のいと白きも、またさらでもいと寒きに、火など急ぎおこして、
炭もてわたるもいとつきづきし。
以上まとめ
@charset "utf-8";
body {
font-size:95%;
font-family: "ＭＳ ゴシック",sans-serif;
line-height:1.5;
}
MDN @importについて
MDN @mediaについて
MDN @charsetについて
<del>タグで修正に取り消し線付けてみる
<de>タグ<del>タグで修正に取り消し線付けてみる
< pre >タグで書いたテキストそのまま表示してみる
<p>＆emsp;＆emsp;<del><de>タグ</del><pre>タグで書いたままのテキストを表示させる</p>
<hr color="silver">タグで色付き仕切り線引いてみる
スマホで撮影してHTMLの<video>タグで動画をサイト設定してみる
無料のアニメーションを作ってみる
無料の画像素材で画面を作ってみる
画像検索アプリを作りました、可愛い猫の画像を探すのであれば' cute cat 'と入力すると多くの画像が選べます。
ランダムunsplaah画像
ランダムpicsum画像
ランダムpicsum画像
<figure class="free-img">
<iframe src="https://picsum.photos/120/100" frameborder="2" width="120" height="101"></iframe>
<figcaption class="free-img-info">
<iframe src="https://picsum.photos/150/100
<p>ランダムpicsum画像</p>
</figcaption>
</figure>
- CSS -
.free-img{
margin: 0;
padding: 40px 15px;
display: flex;
align-items: center;
}
.free-img-info{
width: 40%;
padding: 15px;
text-align: start;
}
<iframe src="https://uploader.cc/s/q20zbl6cyk5b5b6jzf0zzw18alp1fnir8xbj5l
tqpzmu443228u34nk4p1ox0a1t.mp4"width=680 height=250"></iframe>
<iframe src="iframe.html width="200" height="100">
対応したプラウザでご覧ください</iframe><div class="bottom-em6>CSS- width: 1005px; padding-bottom: 6em
./ファイル名.htmlフォルダー名/ファイル名.html../ファイル名.html../フォルダー名/ファイル名.html
https://example.com/index.html
<a href="#id名">リンクテキスト</a><タグ id="id名">コンテンツ</タグ>実例： こちら参照
spanタグdivタグの挙動の違いを見る
spanタグはインライン要素
<div>と<span>の違い
<style>
#text-button {
display: block;
cursor: pointer;
width: 600px;
text-align: center;
border: 1px solid #232323;
padding: 10px;
}</style>✅ HTML5では：
<input> は 空要素（void element） と呼ばれるタイプで、中身（子要素）を持たないので、
<input type="button" value="トップページへ" onClick="...">
のように、自己完結タグとして使うのが推奨されています。 ※<img> や <br> なども同じ空要素です。
✅ 正しい書き方の例（HTML5）：
<input type="button" value="トップページへ" onClick="location.href='https://canape2020.stars.ne.jp/'">
-
下は、inputタグの中に追記 「○○○○○」はGoogleの翻訳ページ(URL)に飛ぶ。
onclick="location:href='○○○○○.html'"
HTML
<input id="canape-button" type="button" onclick="location.href='○○URL○○○'" value="画面遷移">
<style>
#canape-button {
width: 100px;
height: 27px;
font-size: 14px;
background-color: #0000CC;
font-family: cursive;
color: #ffff80;
border-style: solid;
border-color: #ffff80;
border-width: 2px;
border-radius: 8px;
}
</style>
< p > < img src="../images/img002.gif" alt="サンプル画像" style="float:right;"> < /p >
Webをご覧ください
後日編集２０１２年２月１９日撮影
余白の設定
paddingプロパティで設定
-CODE-
<div class="bottom-em6">-のhtmlタグと
.bottom-em6 {padding-bottom: 6em;} -のCSSで---以下余白６行できた。
<div class="bottom-em6"><style>.bottom-em6 {padding-bottom: 6em;}</style></div>
<div style="padding-bottom: 6em;"></div> 部分的なCSS
<div style="float:right;">
♦マージン（margin）
<div class="definedatabox">
♦余白（padding)
構文 /* 四辺すべてに適用 */ margin: 1em; margin: -3px; /* 上下 | 左右 */ margin: 5% auto; 横幅を中央 /* 上 | 左右 | 下 */ margin: 1em auto 2em; 横幅を中央 /* 上 | 右 | 下 | 左 */ margin: 2px 1em 0 auto; /*右側2pxに決めて左側auto余裕があれば空白*/ /* グローバル値 */ margin: inherit; margin: initial; margin: unset;
出来事一覧