HTML CSS

CSSでの文字の装飾、蛍光ペンで書いたようなマーカーを付けるのも簡単に出来た。

CSSでの文字の装飾で、蛍光ペンで書いたようなマーカーを付ける方法をやってみた。 文章中の文字を強調したい時によく使われる、 蛍光ペンで書いたようなマーカーを、CSSでも簡単に 表現することが可能です。 この記事では、その方法を書いていきま...
BASEオフィシャルパートナー

BASEオフィシャルパートナー経由でネットショップ開設すると お得な特典がもらえます。

BASEオフィシャルパートナー経由でネットショップ開設すると お得な特典がもらえます。 この機会に、開設して有利に販売始めましょう。 BASEは、ネットショップが無料で手軽に始めることができ、 簡単にデザイン性の高いネットショップが簡単に出...
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には、ブロックレベル要素とインラインレベル要素の2つがある。 CSSで設定する時に、この2つの要素の違いを理解してないと、 設定したのに...
HTML CSS

ボックスタイプのレイアウト Flexbox で横並びにするほかにもCSSグリッドという方法もあった

ボックスタイプのレイアウト Flexbox で横並びにするほかにも CSSグリッドという方法もあった。 よく見かけるレイアウト、写真と文字で出来たタイル型で 横並びに配置されてる、設定の方法、 Flexboxで覚えてたが、CSSグリッドって...