- 投稿日：2022-02-28T21:26:45+09:00
[ 備忘録 ] Tailwind CSS1 文字系
[1] Tailwind CSSを使うには CDNをheadタグに追加する index.html <script src="https://cdn.tailwindcss.com"></script> index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> // 追加する <script src="https://cdn.tailwindcss.com"></script>rel="stylesheet"> </head> [2] 文字の色を変更する text-[color] index.html <h1 class="text-blue-700">TailWindCSS</h1> <a href="" class="text-black">リンク</a> [3] 文字の配置 text-〇〇 index.html // 右寄せになる <h1 class="text-right">TailWindCSS</h1> // カーソルを乗せると右寄せになる <h1 class="text-left hover:text-right"">CSS</h1> [4]アンダーライン系 アンダーラインと取り消し線 index.html // decoration-[color] で線の色を変更できる <p class="underline decoration-slate-50">アンダーライン</p> <p class="line-through ">取り消し線</p> アンダーラインの装飾 index.html <p class="underline decoration-solid"> 普通の線</p> <p class="underline decoration-double">二重線</p> <p class="underline decoration-dotted">点線</p> <p class="underline decoration-dashed">破線</p> <p class="underline decoration-wavy"> 波線</p> アンダーラインの太さ decoration-[数字]で線の太さを変更できる index.html // text-2xlで文字サイズを大きくしています <p class="text-2xl underline decoration-solid decoration-4">普通の線</p> <p class="text-2xl underline decoration-solid decoration-3">普通の線</p> <p class="text-2xl underline decoration-solid decoration-2">普通の線</p> <p class="text-2xl underline decoration-solid decoration-1">普通の線</p> [5]フォントファミリー index.html <p class="font-bold">TailwindCSS</p> [6] 文字の大きさ index.html <p class="text-sm">TailwindCSS</p> <p class="text-base">TailwindCSS</p> <p class="text-lg">TailwindCSS</p> <p class="text-xl">TailwindCSS</p> <p class="text-2xl">TailwindCSS</p> <p class="text-5xl">TailwindCSS</p> <p class="text-8xl">TailwindCSS</p> <p class="text-9xl">TailwindCSS</p> [7] 文字の太さ index.html //text-2xlで文字を大きくしています <p class="text-2xl font-light">TailwindCSS</p> <p class="text-2xl font-normal">TailwindCSS</p> <p class="text-2xl font-medium">TailwindCSS</p> <p class="text-2xl font-semibold">TailwindCSS</p> <p class="text-2xl font-medium">TailwindCSS</p> <p class="text-2xl font-bold">TailwindCSS</p> [8] 文字と文字の間隔 index.html //text-2xlで文字を大きくしています <p class="text-2xl tracking-tight">TailwindCSS</p> <p class="text-2xl tracking-normal">TailwindCSS</p> <p class="text-2xl tracking-wide">TailwindCSS</p> index.html //間隔を狭めたりもできる -tracking-[数字] <p class="text-2xl -tracking-5">TailwindCSS</p> [9] 行の高さ index.html <p class="leading-10">TailwindCSSの勉強をしています。....</p> <p class="leading-loose">TailwindCSSの勉強をしています。....</p>
- 投稿日：2022-02-28T18:46:05+09:00
「HTML&CSSとWebデザイン 入門講座」Chapter5のメモ
本記事の内容 タイトルの本のChapter5(P198~215)の学習を進める中でのメモを記します。 （理解が間違っていたら教えてほしいです） p209「potisionメソッドのrelativeとabsoluteがよくわかんない」 参考URL「CSSのposition:absolute;とは？要素を思いのままに配置する方法」 https://www.sejuku.net/blog/53016 参考書では、 post-infoクラスにposition: relative;を設定し、 post-dateにposition: relative;としている。 まずこの意図は「日付を表示するpost-dataの位置を固定したい」だと思う。 potisitionタグを使うことによって、親要素であるpost-infoの位置を基点にするrelativeを設定することによって、子要素の配置をabsoluteを指定することによって決めることができる。 （のかな？） p210,215「displayメソッドのblockって何？」 参考URL「【初学者必見】displayについて知ろう！」 https://code-ship-blog.wemotion.co.jp/technology/%e3%80%90%e5%88%9d%e5%ad%a6%e8%80%85%e5%bf%85%e8%a6%8b%e3%80%91display%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e7%9f%a5%e3%82%8d%e3%81%86%ef%bc%81/ 親子関係の整理 親：news-contentsでdispaly:flex; 子：post-dateでdisplay:block この関係は、p要素の中にスパン要素「2019」が入っているのでこのままだと横並びになる。 今回は、青丸の中に上下に日付と年を入れたいのでspan要素をblockにすることで縦並びなるようにした。 sub-menuのdispaly:blockの意図 元々li要素にしているので縦並びだが、block要素にしてクリックした時の範囲を文字のみから文字が含まれるブロックに広げている。クリックしやすい。 →クリックするやつはブロックにした方が良いのだろうなぁ。 p211「font-weight:normal」にする理由 参考URL「h1タグの太字をやめる方法」 https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1484134829 h要素はデフォルトが太字（bold）だから、太字解除のため p213「paddingで(0 , 8px , 8px)ってある時の上下左右の指定はどうなるの」 参考URL「スタイルシートリファレンス padding」 http://www.htmq.com/style/padding.shtml 値を3つ指定した場合： 記述した順に[上][左右][下]のパディングになります。 →へ〜 以上。