※ ChatGPTを利用し、要約された質問です（原文：text-alignエラー）
CSSエラー修正法：text-alignの正しい使い方
このQ&Aのポイント
W3C CSS 検証サービスでのエラーメッセージが送信され、text-alignプロパティに誤りがあることが指摘された。
具体的には、text-alignの使用方法に関して、プロパティ名の前にセミコロンを追加することが推奨されている。
CSSコードの修正により、メニューの表示やデザインが改善されるため、この問題の解決が望まれる。
W3C CSS 検証サービスで
次のプロパティが正しくありません : text-align プロパティ名の前にセミコロン(;)を追加してみて下さい
というエラーメッセージが出ます。
cssは次のとおりです。
.open-menu input {
display: none;
}
.open-menu label {
width: 180px;
color: #ffffff; /* 文字色 */
font-size: 20px; /* 文字サイズ */
line-height: 2; /* 行間 */
font-weight: bold; /* 文字を太く */
text-align: left: 20px; /* 文字を左からの距離 */
box-shadow: 5px 5px 5px #aaa; /* 影を付ける */
background: linear-gradient(-80deg, #ff65ff, #65ffff); /* グラデーションの背景色 */
padding: 20px; /* 内側の余白 */
cursor: pointer;
position: relative;
display: block;
}
/* ここから追加 */
.open-menu label {
border: 2px solid #ff0000; /* 線の太さ 線のタイプ 線の色 */
border-radius: 20px; /* 角を丸く */
}
.open-menu label:hover {
background: #ffb8b3; /* マウスを乗せた時の背景色 */
opacity: 0.5; /* マウスを乗せた時に背景色が薄くなる */
}
.open-menu label:after {
position: absolute;
right: 10px; /* 右からの距離 */
top: 50%; /* 上下中央配置 */
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
content: "［開く］"; /* アイコン */
}
.open-menu input:checked ~ label::after {
content: "［閉じる］"; /* クリック後のアイコン */
}
.open-menu div {
height: 0;
overflow: hidden;
opacity: 0;
transition: 0.3s; /* 開閉スピード */
}
.open-menu input:checked ~ div {
height: auto;
max-width: 80%;
opacity: 1;
padding: 20px; /* 中身の枠内の余白 */
background: #ffeff9;/* 中身の背景色 */
border: 2px solid #ff95d5; /* 線の太さ 線のタイプ 線の色 */
box-shadow: 5px 5px 5px #aaa; /* 影を付ける */
border-radius: 20px; /* 角を丸く */
overflow: hidden; /* メニューがはみ出ない*/
}
.open-menu-inside {
color: #333333; /* 中身の文字色 */
font-size: 15px; /* 中身の文字サイズ */
line-height: 2; /* 行間 */
}
どこをどのようにすれば良いでしょうか？
お礼
ご回答ありがとうございました。 marginの設定でエラー解消出来ました。