タグ・デザイン掲示板

[

【解決しました】letter-spacingが作用しない
by はくあ

2019-12-30 10:03
検索してみたものの疑問が解決しなかったため新規トピを作らせていただきます。
検索漏れの可能性もあるのでその際はご誘導頂けるとありがたいです。

小説機能で本文の特定の単語にletter-spacingを作用させたく、本文中で<span class="HN">単語</span>と囲みました。当初はうまく作用したのですが、その後他の部分のCSSやHTMLを変更する内に作用しなくなってしまいました。一度作用したため他の記述に何らかの原因があるとは思うのですが、自分では原因を見つけられませんでした。

テンプレをお借りし、自分で弄ったものです。タグミスをご指摘頂きたいです。よろしくお願い致します。

【HAED内】

<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/css">
@import url('GoogleフォントURL?family=Alice|Kosugi+Maru|Montserrat');
@font-face
{font-family: PixelMplus12 Regular;
src: url('leafscapeURL')
format("woff2");}

* {
margin: 0;
padding: 0;
font-size: 100%;
font-weight: normal;
list-style-type: none;
}

.clearfix:after {
visibility: hidden;
display: block;
content: " ";
clear: both;
height: 0;
}

a {
color: #ffc1c1;
text-decoration: none;
transition: .4s;
}

strong {
font-weight: bold;
}

body {
font-size: 13px;
font-family:'Kosugi Maru', "メイリオ", "Meiryo", sans-serif;
color: #5B5B5B;
letter-spacing: 0.8px;
line-height: 24px;
text-align: justify;
}

header {
font-family: "PixelMplus12 Regular",'Kosugi Maru', "メイリオ", "Meiryo", cursive;
text-align: center;
background: repeating-linear-gradient(
45deg,
#fff,
#fff 6px,
rgba(255,188,188,0.5) 6px,
rgba(255,188,188,0.5) 12px
);
}

header::after {
display: block;
content: '';
width: 100%;
height: 10px;
border-top: 6px double #FFF;
}

header h1 {
　　display: inline-block;
font-size: 30px;
padding: 72px 10px 10px 10px;
background: url(#素材urlです#) no-repeat center 20px;
background-size: 188px;
height: 140px;
}

header h1 span {
display: block;
margin-top: 15px;
font-weight: bold;
}

.icon {
letter-spacing: 2px;
font-size: 10px;
text-align: center;
}

.icon i:nth-child(odd) {
color: #DFDFDF;
}

.icon i:nth-child(even) {
color: #ffc1c1;
}

.more,
.main {
max-width: 350px;
width: 60%;
margin: 40px auto;
}

.main .head {
text-align: center;
}

.main .head a {
display: inline-block;
color: #FFF;
background: #ffc1c1;
border: 1px solid #ffc1c1;
width: 150px;
padding: 4px 10px;
border-radius: 30px;
font-family: "Montserrat", 'Kosugi Maru', "メイリオ", "Meiryo", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
}

.main .head a:hover {
background: #FFF;
color: #ffc1c1;
}

.main .list {
margin: 30px 0;
padding: 30px 0;
border-top: 1px dashed #E9E9E9;
border-bottom: 1px dashed #E9E9E9;
}

.main .list a {
counter-increment: num;
color: #5B5B5B;
font-size: 12px;
letter-spacing: 1px;
}

.main .list a::before {
font-family: "Alice",'Kosugi Maru', "メイリオ", "Meiryo", cursive;
content: counter(num);
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
color: #FFF;
background: #ffc1c1;
border-radius: 3px;
margin-right: 8px;
}

.main .list a:nth-child(odd)::before {
background: #DDD;
}

.main .list a::after {
display: block;
height: 5px;
content: '';
}

.main .list a:hover {
color: #CCC;
}

.story footer {
padding-top: 20px;
border-top: 1px dashed #E9E9E9;
text-align: right;
}

.story p {
letter-spacing: 0;
margin-bottom: 20px;
}

.story .icon {
margin-bottom: 30px;
}

form {
text-align: center;
margin-bottom: 30px;
}

form br {
display: none;
}

input[type=submit],
input[type=text] {
display: inline-block;
color: #5B5B5B;
background: #EFEFEF;
border: none;
width: 150px;
padding: 3px 10px;
border-radius: 30px;
font-family: "Montserrat", 'Kosugi Maru', "メイリオ", "Meiryo", sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
width: 120px;
}

form input[type=submit] {
color: #FFF;
background: #ffc1c1;
border: 1px solid #ffc1c1;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}

::-webkit-scrollbar {
display:none;
}

h2 {
font-size: 12px;
word-spacing: -4.5px;
letter-spacing: 0.7px;
}

h2 span {
font-size: 10px;
letter-spacing: -1.5px;
}

h2:before {
font-size: 11px;
display: inline-block;
content: '▲';
margin-right: 3px;
transform: rotate(90deg);

}

.min {
max-width: 500px;
width: 90%;
margin: 40px auto;
}

.mn {
max-width: 400px;
width: 80%;
margin: 40px auto;

.bun {
line-height: 22px;
}

span.HN {
letter-spacing: -4.4px;
}

</style>

【文章画面レイアウト】

<header></header><div class="min story"><div class="icon"><i class="fa fa-heart" aria-hidden="true"></i>　<i class="fa fa-heart" aria-hidden="true"></i>　<i class="fa fa-heart" aria-hidden="true"></i></div><div class="bun">#text#</div>

<footer><h2>To Be Continued <span>...</span></h2></footer></div>

pc
[編集]

by 774

2019-12-30 14:16
『.mn{』に対応する『}』が無いのが原因です。

検索サイトにて「CSS 文法チェック」等で検索すると、ミス指摘してくれるツールも見つかるので何かおかしいなと思ったら使用をおすすめします。

『{}』間に『background-color: red;』等変化が視認しやすい指定を追記して、ミス箇所がセレクタ部分か否かを確認するのも手です。

pc
[編集]

by はくあ

2019-12-30 14:57
774様

とても迅速な回答ありがとうございます！
指摘して頂いたとおりに修正したところうまく作用しました。
たまたま使用した文法チェックツールが英語表記だったため正しく理解できなかったのだと反省しています…。日本語で表示されるツールを検索して探したいと思います。
教えて頂いた確認方法もこれから行っていきます！

年末のお忙しい中丁寧にご指導頂き本当にありがとうございました！

pc
[編集]

[