未回答質問に対して勝手に答える活動「::after で線を引きましたが、1本だけ太くなってしまいます。どうしてでしょうか。」
こんにちわ。
Poscastでのプログラミング学習ラジオが100話を超えてからダウンロード数が桁違いに増えてビックリしている、下駄です。
ちなみに、そのpodcast番組はこちらです。
http://mynt.work/radio/
プログラミングを覚えることは論理思考を向上させるということで小学校からの学問にも入っていますが、
果たして論理思考って、一体なんなんでしょうか？
これが答えられないと、論理思考が備わっていないという風にも考えられます。
悪い例で言えば、まともに会話ができない大人になってしまうという事なんですね。
算数、数学が苦手と言っている人は、もしかするとこういう人が多いかもしれませんね。
質問サイトで見つけた未回答案件
https://teratail.com/questions/288471
teratailサイトで見つけたこの質問、見た時点ですでに1週間以上前の投稿になっていて、
108viewあるにも関わらず、回答が0件。
あんまり難しくない質問かと思われるのに何故かと思って見てみたところ、
書かれているソースコードをこちらで入力して再現してみても、質問されている問題点の再現がされないという事だったからじゃないでしょうか？
画像が貼られていたので、ウソ書いているわけではないし、困っている感じもしたので、この質問にちゃんと向き合ってみました。
問題点を見つけて解決方法を追求
質問されている問題点の再現ができないのですが、CSSの記述があまりよろしくない記述だったので、その点を改善すれば、もしかしたら質問点も解消するのではないかと考えた。
teratailサイトでもこちらの回答を送ってあげたので、それを転記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.news{ position: relative; height: 65px; overflow: hidden; } .news::after{ content: " "; position: absolute; left: -5px; top: 48px; /*下線の上下位置調整 */ width: 610px; /*下線の幅*/ height: 1px; /*下線の太さ*/ background-color:var(--theme_font_color); /*下線の色*/ display: block; } |
|
1 2 3 4 5 6 7 |
.news{ position: relative; height: 48px; overflow: hidden; border-bottom:1px solid red; margin-bottom:17px; } |
非常にスッキリした書き方になっているのが分かります。
要するに無駄が多すぎるんですね。
想像するに、「::after疑似要素」を使って、罫線を書くまでもなく、border-bottomでラインを付けてあげるだけで十分なのに、「線を追加する」
という思考だけで書いてしまった結果なんでしょうね。
そして、座標移動までさせて無駄に要素を増やしているから、座標位置が整数にならずにレンダリングでラインの太さが微妙に変わってしまったんだと思われます。
おそらく、after記述にすることで、直ったんじゃないでしょうか？
質問者の問題点
恐らくこの方は、プログラミング初心者ということは分かりますが、論理思考も未熟な状態であると想像できます。
まず、タイトル表示の::afterのコロン部分が全角文字で書かれていることから、プログラミングをしている人では考えられない文字変換ができない状態である点があります。
これは、プログラミング初心者に非常に多い、エラーの一つで、通常半角文字で書かなければいけないプログラムに、キーボードのタイプミスなのか、変換ミスなのか、全角入力だけでプログラミングをしているのか、正直理解できないのですが、全角文字エラーは初心者特有の事象です。
あと、説明文も足りていなく、プログラムのhtmlとcssだけを掲載していて、タイトルのみで質問をしているスタイルがコミュ不足を表しています。
礼儀として「お願いします」ぐらいを書かないと、マイナス評価をつけられても仕方がないでしょう。
とりあえず、この質問者の未来に幸あれ！！！