html,css 文字、画像、罫線で困ったら(1)

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

文字

fontawesome

正しく表示されない

fontawesome
の本体を読み込んでください。

<head> </head>
の間に下のコードを入れてください。
(なるべく最新バージョンを入れてください)

<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">

番号が古い可能性があります。
直接
fontawesome
から番号を調べ直してください。


フォントファミリーの指定をしてください。

font-family: "Font Awesome 5 Free";

font-weight
の番号が無い場合もあります。

font-weight: 900;
font-weight: 400;
のどちらかを入れてください。

注意)
無料版で使えるのは
SOLID REGULAR LIGHT DUOTONE の内
SOLID REGULAR
です。

 SOLID   = font-weight: 900;
 REGULAR = font-weight: 400;

font-weight: 900;
font-weight: 400;

サイズを変えたい

htmlのclass
fa-2x
を入れてください。

fa-1x = 1倍
fa-2x = 2倍
fa-3x = 3倍
fa-4x = 4倍
fa-5x = 5倍
fa-lg = 1.3倍

cssではなくhtmlのclassです。

<i class=”fas fa-ad fa-2x”></i>

cssの擬似要素で入れた場合は、
font-sizeで変えられます。

<i class="fas fa-ad fa-2x"></i>

fa-1x = 1倍
fa-2x = 2倍
fa-3x = 3倍
fa-4x = 4倍
fa-5x = 5倍
fa-lg = 1.3倍

css側から文字を入れたい

擬似要素 ::before ::after
を使えば入れられます。

子要素(inline)として
追加されるので注意

詳しくは↓

URLが、枠からはみ出る

overflow-wrap: break-word
を使ってください。

画像blog-overflow-wrap10

詳しくは↓

overflow-wrap: break-word;

文字の間隔を広げたい

letter-spacing
を使ってください。

文字間 0   = letter-spacing: normal;
文字間 1文字 = letter-spacing: 1em;
文字間 1px   = letter-spacing: 1px;

詳しくは↓

letter-spacing: normal;
letter-spacing: 1em;
letter-spacing: 1px;

最初の行を1字下げにしたい

text-indent: 1em;
を使ってください。

text-indent: 1em;

2行目から字下げをしたい

はじめに左側へ
padding-left: 1em;

そのあと
text-indent: -1em;

詳しくは↓

padding-left: 1em;
text-indent: -1em;

文字を太くしたい

font-weight: bold;
を使ってください。

 普通文字 = font-weight: normal;
 太字   = font-weight: bold;

数値での指定もできますが、
その数値のフォントが
用意されていない場合もあるので

使わない方が無難です。

100
200
300
400 = normal
500
600
700 = bold
800
900

(例)
font-weight: 400;

font-weight: normal;
font-weight: bold;

font-weight: 400;
font-weight: 700;

文字を斜体にしたい

font-style: oblique;
を使ってください。

font-style: oblique;

font-style: normal;
で元に戻ります。

font-style: normal;

一文字だけ大きくしたい

htmlタグの
<span></span>
を使ってください。

html

<span class=”mozi001″>あ</span>

css

.mozi001 {
font-size: 32px;
color: red;
}

<span class="mozi001">あ</span>

.mozi001 {
font-size: 32px;
color: red;
}

文字を均等割にしたい

text-align-last: justify;
を使ってください。

均等割にする際

display: inline;
では、均等割になりません。
(自動で文字の幅になるため)

display: inline-block;
display: block;
を使ってください。

text-align-last: justify;

打ち消し線を入れたい

text-decoration: line-through;
を使ってください。

あああああ

text-decoration: line-through;

アンダーラインを入れたい

text-decoration: underline;
を使ってください。

あああああ

text-decoration: underline;

画像

回転させたい

右に90度

transform: rotate(90deg);
画像rotate01

左に90度

transform: rotate(-90deg);
画像rotate02

上下逆さ

transform: rotate(180deg);
画像rotate03

鏡合わせ

transform: rotateY(180deg);
画像rotate04

バックグラウンド

高さが入れた数値よりも大きい気がする

line-height(行間)はバックスクリーンに含まれます。
行間を疑ってみてください。

line-height: 1;
を入れると文字の高さになり
それが原因であれば解決します。

(inlineは例外で文字だけバックスクリーン:行間は透明)

詳しくは↓

line-height: 1;

繰り返し表示される

background-repeat: no-repeat;
を使えば
繰り返し表示は止まります。

background-repeat: no-repeat;

繰り返し表示    = background-repeat: repeat;
繰り返し表示なし  = background-repeat: no-repeat;
横方向だけ繰り返し = background-repeat: repeat-x;
縦方向だけ繰り返し = background-repeat: repeat-y;

background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;

繰り返し表示されない

background-repeat: repeat;
で繰り返し表示になります。

background-repeat: repeat;

デフォルトが
background-repeat: repeat;
なので

どこかに
background-repeat: no-repeat;
が入っています。

* {
}
などを含め

no-repeat
で全体に検索をかけて
調べてください。

background-repeat: repeat;
background-repeat: no-repeat;

画像を入れたい

background-image
を使ってください。

(例)
background-image: url(img/small_flower_pink.png);

url( ) = 絶対パス、相対パスを入れて画像を指定

background-image: url(img/small_flower_pink.png);

中央へ寄せたい

display:inline
display:inline-block
display:block
によってやり方が変わる。

display:inline    = 親要素へtext-align: center;
display:inline-block = 親要素へtext-align: center;
display:block    = 直接margin: 0 auto;
             (widthは親要素のwidthより小さくする)

中央寄せの詳しい説明は↓

text-align: center;
margin: 0 auto;

半透明にしたい

opacity: 0.5;
を使ってください

opacity: 1;  = 全表示
opacity: 0.5; = 半透明
opacity: 0;  = 消える

opacity: 1;
opacity: 0.5;
opacity: 0;

opacity: 0;
は見えないだけで
幅、高さなど実体はあります。
注意してください。

opacity: 0;

画像が切れる

width height
より
background-image
の方が
大きい可能性があります。


background-image
は、はみ出た部分を表示しません。

画像加工ソフトなどで
width height
に合わせた大きさにしてください。

角を丸くしたい

border-radius
を使ってください。

border-radius: 10px 10px 10px 10px;

border-radius: 10px 10px 10px 10px;

border-radius: 1 2 3 4;

指定の順番は
1左上 → 2右上
       ↓
4左下 ← 3右下

左上スタートの時計回りです。


xpの数値が大きくなると
角丸も大きくなります。

画像を width height の領域いっぱいまで広げたい

background-size: 100% 100%;
を使ってください。

background-size: 100% 100%;

background-size: 横方向のパーセント 縦方向のパーセント;


画像が歪に変形するので
注意してください。

cssで背景画像(background-image)のトリミングをやりたい

background-position
を使えばできます。

詳しくは↓

罫線、仕切り線

自由に変更できる罫線を作りたい

擬似要素 ::before ::after
を使い、バックグラウンドを細くすればできる。


content: “”;
を入れないと
擬似要素 ::before ::after
で、バックスクリーンは表示されない。

詳しくは↓

content: "";

丸を描きたい

border-radius: 50% 50%;

border:
を丸くして
使ってください。

border-radius: 50% 50%;

.maru001 {
border: 3px solid black;
border-radius: 50% 50%;

display: block;
width: 100px;
height: 100px;
background-color: white;
}

.maru001 {
border: 3px solid black;
border-radius: 50% 50%;

display: block;
width: 100px;
height: 100px;
background-color: white;
}
タイトルとURLをコピーしました