配色大事ね
listの頭を色々触る。外部フォントを入れる。文字だけじゃなくGoogle のシンボルなるものを絵文字のように入れてみる
<html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>セレクタの演習</title> <link rel="stylesheet" href="../css-basic/css/index_enshu2.css" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Dela+Gothic+One&family=M+PLUS+1:wght@100..900&family=Mochiy+Pop+One&family=Murecho:wght@100..900&family=Potta+One&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> </head> <body> <h1><span class="material-symbols-outlined"> content_cut </span>セレクタの演習 Selector</h1> <p class="lede">より詳細なスタイルを指定しよう</p> <h2><span class="material-symbols-outlined"> toys </span>セレクタ一覧 List of Selector</h2> <p>どんな<strong>セレクタ</strong>があるかみてみよう！</p> <ul> <li><strong>ID</strong>セレクタ</li> <li><strong>クラス</strong>セレクタ</li> <li><strong>要素</strong>セレクタ</li> <li><strong>ユニバーサル</strong>セレクタ</li> </ul> <h2>結合子を使ったセレクタ</h2> <ul> <li><strong>子孫</strong>セレクタ</li> <li><strong>子</strong>セレクタ</li> <li><strong>隣接</strong>セレクタ</li> <li><strong>間接</strong>セレクタ</li> </ul> <p> 絶望の月面で問い直される「命の重み」 水資源が枯渇し、滅びゆく近未来の地球を舞台にした本作は、単なるSFサスペンスの枠に留まらない深い衝撃を私に与えました。月面の廃墟となった研究基地で繰り広げられる決死の任務は、常に死と隣り合わせの緊張感に満ちています。 特に印象的だったのは、水が「命を救う恵み」であると同時に、「人を飲み込む脅威」として描かれている点です。未知の物質「月水」を巡る謎が解明されるにつれ、科学の暴走や、大義のために切り捨てられる命の尊厳といった重いテーマが浮き彫りになります。 静寂に包まれた月面と、そこに響く荒い呼吸音。閉鎖空間での心理描写は圧巻で、最後に主人公たちが下した決断には、絶望の中にある微かな希望を感じました。資源の奪い合いが現実味を帯びる現代において、私たちは何を優先して生きるべきなのか。静かな月面から、人類の強欲さと気高さを突きつけられたような気がします。 </p> <a href="http://yahoo.co.jp" target="_blank">ヤフーへ</a> <h1 class="lesson">テキストの装飾の演習</h1> <p class="lesson">様々なプロパティをつかって<span>テキストを装飾</span>してみましょう。</p> <footer id="page-footer"> <p class="slideColor">メロスは激怒した。</p> <p>© 2024 www.proglus.jp</p> </footer> </body></html>
おしゃれな配色を見つけてきてその色を変数として設定する
CSSのコメントアウトは特殊。閉めの*/をあえて崩し* /にしてひとまとまりにする。
背景のブレンド
background-blend-mode: lighten; で背景色と背景画像の透過度調整しいい具合にブレンドする
:root { /* パレットの色を変数として定義 */ --accent-pink: #f2668b; --dark-blue: #025e73; --deep-black: #011f26; --muted-teal: #026873; --soft-green: #03a688;}body { background-image: url(../../images/hogoneko_cafe.png); background-size: min(100%, 600px) auto; background-position: center top; background-repeat: no-repeat repeat; /* 背景画像をパレットの最も深い色とブレンドして落ち着かせる */ background-color: rgba(216, 227, 229, 0.8); /* --deep-blackをベースに透過 */ background-blend-mode: lighten; /*lightenからoverlayに変更すると画像が沈んで文字が見やすくなります*/ /* 基本のテキスト色をパレットの深い青系に */ color: var(--deep-black); /* marginはuser agentのデフォルトに一旦任せるのでコメントアウト */ /* margin: 5%; */ min-height: 100vh;}/* メインの見出しにアクセントのピンクを */h1 { color: var(--accent-pink); border-bottom: 2px solid var(--soft-green); padding-bottom: 0.5rem; text-align: center;}/* 小見出しに落ち着いたティールを */h2 { color: var(--dark-blue); border-left: 5px solid var(--accent-pink); padding-left: 10px;}/* 強調したい文字 */strong { color: var(--soft-green);}/* リンクの色 */a { color: var(--muted-teal); transition: color 0.3s;}a:hover { color: var(--accent-pink);}p { /* font-size: 60px; */ /* em 親要素の何倍か*/ font-size: 1em; /* rem html root指定の何倍か */ font-size: 0.95rem; /* % 親要素の何%か*/ /* font-size: 150%; */ /* font-weight:bold; */}h1.lesson { color: olive;}p span { font-weight: bold; font-size: 1.5rem; text-decoration: underline;}ul { /* list-style-type: square; */ /* list-style-type: circle; */ /* list-style-type: space-counter; */ list-style-type: none; /* list-style-type: "\1F44D"; */ list-style-image: url(../../images/icon-32.png);}/* li::marker { /* list-style: none; *//* ulもしくはliでデフォルトのマーカーを消す * / content: '🔥 '; /* 使いたい絵文字を指定 * / font-size: 1.2em; /* サイズの調整 * / font-family: 'Material Symbols Outlined'; content: 'check_circle'; /* アイコン名を指定 * / font-size: 1rem; color: #011f26; color: var(--accent-pink);} */.slideColor { display: inline-block; color: transparent; background-image: linear-gradient(90deg, red, red 50%, black 50%, black); background-position: 100% 0; -webkit-background-clip: text; background-clip: text; background-size: 200% 100%; transition: background-position 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* easeOutQuartのイージング */}.slideColor:hover { background-position: 0 0;}https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/css-basic/index_enshu2.html
H1タグがもりもり盛られるこの奇跡、、、
<html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ボックスモデルとセレクタの演習</title> <link rel="stylesheet" href="../css-basic/css/style_enshu.css" /> </head> <body> <h1>ボックスモデルの演習</h1> <p>ボックスモデルを理解しよう</p> <hr /> <h1 class="red">セレクタの練習</h1> <p id="hello">こんにちは中村さん</p> <ul> <li><input type="checkbox" name="" id="" />読書</li> <li class="completed"><input type="checkbox" checked name="" id="" />HTMLの学習</li> <li class="completed red"><input type="checkbox" checked name="" id="" />JavaScriptの学習</li> </ul> </body></html>* { /* margin: 0; */ /* padding: 0; */}h1 { text-align: center; color: rgb(40, 40, 121); text-shadow: lemonchiffon 3px 3px 3px; width: 200px; height: 200px; margin-top: 100px; margin-left: auto; margin-right: auto; margin-bottom: 30px; padding: 30px; border: solid 10px #c9cad0; /* background-image: url(../../images/hogoneko_cafe.png); */ background-image: url(../../images/hogoneko_bg.png); background-size: contain; background-repeat: no-repeat; /*画像が小さい場合に繰り返さない設定*/ background-position: center; /*中央に配置*/}p { text-align: center;}#hello { color: limegreen;}.completed { text-decoration: line-through;}.completed.red { color: red;}https://kiyo4810.github.io/udemy_kaihatsu_nyumon_kanzen_course/css-basic/index_enshu.html
コメントを残す