質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

1323閲覧

.(ドット)の形を変えるには?

Akaho

総合スコア39

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

2グッド

1クリップ

投稿2019/03/28 09:38

編集2019/03/29 03:29

progateの道場コース初級5の2で、イメージ説明のHELLO WORLD.のドット部分を丸く形を変えて表示したいです。

で、この時点でのhtml,cssのコード画像はこちらです。
css
イメージ説明,
イメージ説明
html
イメージ説明

CSS

1コード/* CSSのリセット(消さないでください) */ 2html, body, 3ul, ol, li, 4h1, h2, h3, h4, h5, h6, p, 5form, input, div { 6 margin: 0; 7 padding: 0; 8} 9 10li { 11 list-style: none; 12} 13 14/* ここからCSSを記述してください */ 15li{ 16 float:left; 17} 18.header{ 19 color:white; 20 background-color:#26d0c9; 21 height:90px; 22} 23.header-logo{ 24 float:left; 25 font-size: 36px; 26 padding:20px 40px; 27} 28.header-list{ 29 font-size:16px; 30 padding:33px 20px; 31} 32.copy-container h1{ 33 width:820px; 34 height:382px; 35 font-size:140px; 36 font-weight:700; 37} 38.copy-container h2{ 39 width:820px; 40 height:180px; 41 font-size:60px; 42 font-weight:700; 43} 44span{ 45 color:#ff4a4a; 46}

HTML

1コード<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 </head> 8 <body> 9   <!-- ここからHTMLを書き始めてください --> 10 <div class="header"> 11 <div class="header-logo">Progate</div> 12 <div class="header-list"> 13 <ul> 14 <li>プログラミングとは</li> 15 <li>学べるレッスン</li> 16 <li>お問い合わせ</li> 17 </ul> 18 </div> 19 </div> 20   <div class="main"> 21 <div class="copy-container"> 22 <h1>HELLO WORLD<span>.</span></h1> 23 <h2>プログラミングの世界へようこそ</h2> 24 </div> 25 </div> 26 27 </body> 28</html>

それで、回答して頂いた内容から、
bodyに対してfont-family:"Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif;と指定すると丸く変更されました。

ikedas, s8_chu👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/03/28 09:50

見てる人は赤の他人しかいないわけで、この文だけで赤の他人に要件が伝わるわけがないわけで。 teratailはプログラミングにおける問題を解決するサイトなわけで、何もやってないのに答えろと言われても非推奨なわけで。 書かれてることしか分からないわけで。
Akaho

2019/03/28 09:51

Progateの道場コース初級編。 Hellow world.のドット部分です。
m.ts10806

2019/03/28 09:56

単なる文字なので円とか四角とか言われても(Progateみんながやってるわけじゃないですし) いずれにしても、自身が試したこと含めて質問本文に追記してください。
kasa0

2019/03/28 09:56

右下に「ご意見箱」があるから、そこで聞くといいよ。
y_waiwai

2019/03/28 10:43

みごとに意味不明だ。。w
guest

回答2

0

ベストアンサー

用字によってドット (フルストップ、終止符) の形が変わるときがあるようです。
The Unicode Standard 12.0.0 [PDF] より引用 (6.2 General Punctuation, 8ページ目)

Rendering. Punctuation characters vary in appearance with the font style, just like the surrounding text characters. In some cases, where used in the context of a particular script, a specific glyph style is preferred. For example, U+002E full stop should appear square when used with Armenian, but is typically circular when used with Latin. For mixed Latin/Armenian text, two fonts (or one font allowing for context-dependent glyph variation) may need to be used to render the character faithfully.

アルメニア文字ではフルストップは四角形にしなければならないが、ラテン文字 (いわゆる「英字」のことですね) では通常円形を使う、という例を挙げています。UnicodeではどちらもU+002Eという文字コードで表すので、正しく表示するには、用字による字形の違いをフォントの違いで区別する (あるいは、文脈によって字形を変えて表示してくれるようなスマートフォントを使う) しかないということです。

CSSなどのウェブ技術も、文字の処理にはUnicodeを前提としているので、四角形にするか円形にするかはフォントで区別するしかないということになります。

こういう説明でいいでしょうか?

投稿2019/03/28 13:02

編集2019/03/28 13:09
ikedas

総合スコア4227

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

質問の意味はよく分かりませんが、恐らくフォントです。

投稿2019/03/28 11:54

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/03/28 12:14

どんなフォントにしてもよほどフォントサイズ大きくしないと四角になりますけどね・・・。
m.ts10806

2019/03/28 12:33

失礼。「なります」というより「見えます」ですね。あまり「あー丸だね」って明らかに見えるサイズで使うことってWebではあまりないのかなと。そこだけフォントかえるのも変な話ですし。 元々の質問の背景とか意図が分からないので本当にフォントのことなのか判断できないところはありますが。
ikedas

2019/03/28 13:25

わたしも「あれは丸だ」と思って見てたんですが、本当に四角いときがあるとは。
m.ts10806

2019/03/28 13:29

形がどういうというよりもエンジニアからしたら「.という記号」ですからね。見え方はともかく . は . でしかないという観点です・・
ikedas

2019/03/28 14:44

むしろ、Unicodeの制限事項なんじゃないかと思いました。他所様の回答でこれ以上続けてもなんなのでこれでやめますね。
Akaho

2019/03/29 01:55

わかりづらい質問になって申し訳無かったです。 今回の問題 HTMLの方で打ったドットが正方形の塗りつぶされた形で、見本が丸いドットであったので、どうすれば形を変えられるか?という質問内容でした。 なんか混乱してきて、色々コード打ってたら丸いドットになったんですが、 その理由が分かりませでした。 ググっても分からなかったので質問したわけです。 意図 ここのサイトでは、どこが関係する原因なのかを知って自分で解決する手掛かりにしようと思い、質問しました。 改善点 質問する際、画像を付けて送るとわかりやすかったなと学びました。 時間割いて下さりありがとうございました。
m.ts10806

2019/03/29 01:57

そのあたりは質問を編集して追記いただければと
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問