HTML CSS 【サンプルコードあり】CSSセレクタの擬似クラス ｐ:nth-child()・p：nth-of-type() 一定間隔の要素を指定することができる。
CSSセレクタの擬似クラス 一定間隔の要素を指定することができる。使用例は、テーブルの行単位で色を変えたい。複数の場所にCSSで指定をしたい場合などに指定することが可能。ｐ:nth-child()とｐ：nth-of-type()があり。この...
HTML CSS 
HTML CSS 画像（img) を中央よせにする方法。インライン要素・ブロック要素の違いに注意。
CSSでimg真ん中に寄せる方法CSSで画像（img要素）を中央に寄せて表示させる方法は、寄せたい画像の外枠になる、div要素にtext-align : centerを付与するとうまくいきます。imgを真ん中に配置今回の場合で、画像を真ん中...
HTML CSS CSSでの文字の装飾、蛍光ペンで書いたようなマーカーを付けるのも簡単に出来た。
CSSでの文字の装飾で、蛍光ペンで書いたようなマーカーを付ける方法をやってみた。文章中の文字を強調したい時によく使われる、蛍光ペンで書いたようなマーカーを、CSSでも簡単に表現することが可能です。この記事では、その方法を書いていきます。この...
HTML CSS HTML・CSS table テーブル表組みのやり方。border-collapse・table-layoutについて。rowspan とcolspan についても書いてみました【サンプルコードあり】
テーブル表組みのやり方。border-collapse・table-layoutについて。HTMLでテーブルを作成する時は、table タグで作成可能。rowspan とcolspan についても書いてます。シンプルな、テーブル作成コード例...
Figma Figmaの便利なショートカット。Windows版一覧表作成してみました。
Figmaの便利なショートカット。Windows版一覧表にしてみました。Figmaは、ブラウザで簡単にデザインができるツールになります。先日、サイトのコーディングするのにはデザインカンプ必須とのこと。Figmaでの作成に挑戦しました。そこで...
VScode HTML/CSSでのコーディングの時に、Emmetの省略記法、知ってると作業効率がむっちゃ上がる。知らないと時間を損してますよ。
Emmetの省略記法、HTML/CSSでのコーディングの時に知ってると作業効率がむっちゃ上がる。HTML・CSSでのコーディングする際、何度も同じコードを書いていきますよね。VScodeでやってる場合は、単語入れると、候補が表示されるのでそ...
プログラミング firestarageにZip形式でディレクトリごと下さい と言われたら。
firestarageにZip形式でディレクトリごと下さい！あるwebサイトのデータを送付する方法を問い合わせた際によく出る単語です。この意味わかる場合は大丈夫です。わからない場合はこの機会に覚えちゃいましょう。私は最初？？？？？でした。す...
HTML CSS CSSで装飾する時に、テキストの line-height(行間)・letter-spacing(字間)を簡単に設定する方法
CSSで装飾する時に、テキストの行間・字間を簡単に設定する方法テキストの装飾するプロパティ、字間のスペース・行ボックスの高さを設定。それぞれ、簡単に設定できる方法ここに残します。テキストの行間を設定line-heightテキスト表示部分の、...
HTML CSS 画像や文字などを透視化、opacity rgba を使って背景画像の透過ができ、重ねて強調させるとこが可能になる。ホバー設定も可能
背景画像の上に文字などを入れた場合。画像によっては文字が少し見えにくい場合ありますよね。そんな時、文字等の後ろに背景を薄くあてることで、見えやすくなる場合があります。文字の後ろに、バックグラウンドで色を付けて透視化することで可能です。この記...
HTML CSS 【サンプルコードあり】HTML ブロックレベル要素とインラインレベル要素を理解しとかないとCSSの装飾で失敗する。
HTMLのブロックレベル要素とインラインレベル要素を理解しとかないとCSSの装飾で失敗する。HTMLには、ブロックレベル要素とインラインレベル要素の２つがある。CSSで設定する時に、この２つの要素の違いを理解してないと、設定したのに反映され...