HTML : emタグ、strongタグ

昨日のタグの話の続きになってしまうけど、本をパラパラしてたら、いろんなタグあるんですねー。なぜこれを選んだかの意味は特にないけどメモ。

<em>タグ 役割:テキストを強調する。<em>タグで強調されたテキストはwebブラウザに表示させた際、車体で表示される。

似たようなもので、<strong>タグがあり、もっと重要で深刻な情報に使うとのこと。strongタグで囲まれたら太字になる。

Emタグやstrong タグは見た目を変えるだけの目的では使ってはいけない。斜体や太字にしたいが重要でないところには別のタグを使用し、cssでスタイルを指定する。らしいです。

c.sakyou

HTML : Labelタグ

しれっと見たことなかったものが出てきたのでメモ

<label>とは
「LABEL」とは、フォームの中でフォームの項目名と構成部品を関連付けるためのタグ。
関連付けを行うことにより、ブラウザでラベル(もしくはラベルのアクセスキー)をクリックした際に、その構成部品をクリックしたのと同じ動作が可能。

pタグのままでもいいのかな?詳しくはもう少し聞いてみよう。。

c.sakyou

CSS:フォームパーツのスタイル指定

スタイルを整えていきます。

input
border:none; 入力枠の枠線をなくす
border-bottom; 下線を引く
width: 100%: 枠内いっぱいにする

button
background-color: 青に指定
border-radius: 角を丸くする
box-shadow: 影を作り、押しやすい演出

ほぼ完成形になってきました。

c.sakyou

CSS:margin, paddingプロパティと、borderプロパティ

スタイルを揃えていく。
marginを10pxで、Autoと指定する。autoとするとブラウザのサイズが変わっても左右の余白は均一に保たれ、真ん中に配置することができる。

border:枠の線を引く。solidとは実線の意味。色も指定。

padding:内側の余白の指定。

だんだんと完成に近づいてきました。

c.sakyou

CSS:色指定での16進数記法

CSSで指定するカラーコードには色々な種類があるというお話。

わかりやすい手法はrgbという手法。
Red,Green,Blueの色の度合いを指定して、色を作っていくという手法。

0〜255の256段階で指定ができるが、CSSでは16進数を使用した方法でも指定できる。

例:赤を表示させる
10進数:rgb(255,0,0);
16進数:rgb(#ff0000);

ただし、同じものが2つ続く場合、省略できるというルールがある。

rgb(#f00);でも赤が表示される。

また、ビジュアルスタジオコードを使用している場合には、適当な値を入れカーソルを当てると画面でカラーを選べるようです。これは便利かも。

あとは、rgbaという指定がある。a部分では0〜1の数値を指定でき、半透明のカラーを指定できる。

カラーを指定するだけでも色々奥が深いもんですね。
仕組みはなんとなくわかるけど、全てを暗記するのは難しいので、その都度指定したい色をどのように表せばいいか調べてしまいますね。

c.sakyou

Frexboxを使ったレイアウト

Frexboxの基本 横並びにしたい要素の親要素にこの一行をかくだけで、コンテナの直下にある要素が左から横並びになる。

例: .container { display: flex; }

カスタマイズ: flex-direction :[row/row-reverse/column/column-reverse];

本からの情報取り急ぎメモ。

c.sakyoup

Macが返ってきた

Macちゃんが返ってきてくれた。新品同様となって。修理という名の交換なんじゃないかと思うくらい、ぴかぴか。。表にあった傷が1つもなくなってるよ〜4万で新品買えたと思えば安いもんじゃない。(そう思うことにする)

ゼロ状態となったのでまたいろいろダウンロードしたりします

c.sakyou

CSS: 擬似要素

擬似要素とはタグの中の要素にない情報を追加したり、要素の一部分にだけスタイルを指定するもの。

::beforeと::after contentプロパティとセット。。。見出しなどで先頭にマークをつけたい場合、要素の中に●や◾️などの記号を入れるのは好ましくない。そのため擬似要素を使ってCSSでマークを追加する。

例: h3::before { content: “★”;} (タイトルの先頭に星マークを追加)

a::after { content: “→”;} (語尾に矢印を追加)

その他の擬似要素: 一文字目だけ大きくする::first-letter, 一行目だけ色を変えたいという時に使う ::first-lineなどがある。

CSS : positionを使った要素の自由配置

要素の位置を変える position:relative; 相対的な指定でもともとの要素位置を基準に、そこからどれだけずらすか。top/bottomプロパティ、left/rightプロパティで指定。

親要素を基準に位置を決める position:absolute; 絶対的な指定。親要素を指定してそれを基準に値を指定する。

ウィンドウに固定 position:fixed; Webブラウザのウィンドウを基準にし、スクロールしても固定する指定。

本だけなのでとりあえずメモをしておく。

c.sakyou