What's New Qiita

20200720のHTMLに関する記事は8件です。

  • 投稿日：2020-07-20T23:30:54+09:00

【初心者でもわかる】font-familyの正しいつけ方・ツールも紹介（2020年 夏版）

どうも7noteです。デザインを通ってないと種類が多くて指定が厄介なフォントのお話。

いざホームぺージをコーディングするときにデザインデータを見ると、様々なフォントがいろんなところに使用されています。
ただ一般の人がWEBサイトを見る時にみれるフォントは限られているので、font-familyを正しく指定しなければ思っている通りのデザインにはなりません。

特にwindows、mac、iphoneではそれぞれみれるフォントが違うので、しっかりとデザインで使われているフォントと見比べる必要があります。

各デバイスで使用できる主要フォント一覧

デバイス フォント
windows メイリオ、游ゴシック、游明朝体、ＭＳ ゴシック、ＭＳ 明朝、Arial
mac ヒラギノ角ゴシック、ヒラギノ明朝 ProN、Osaka、游ゴシック、游明朝体、Arial
android （機種によって異なる）
iphone ヒラギノ角ゴシック、ヒラギノ明朝 ProN、Arial

Arialだけは欧文フォントですが、それ以外は日本語フォントです。
こうして比べると各デバイス共通で使える日本語フォントはないのです。
なので、基本フォントを指定する時は以下のような指定方法を行います。

font-family 指定例

font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

※sans-serifはそのデバイスで使用できるゴシック体

主要フォント以外がデザインで使用されている場合の対応方法

いざデザインデータの中をみた時、「あれ、このフォントデフォルトで入ってないやつだ・・・」ってなったらどうしましょうか？

1.画像にしてしまう。
あまりないフォントだったり、大きな見出しだったり、グラフで使われていたりする箇所ならいっそ画像にしてしまう方が良いでしょう。

2.基本フォントで作成する。
デザイナーに確認して、重要度が高くないところなどは周りに合わせてデバイスのデフォルトのフォントでいくのも1つの方法でしょう。

3.WEBフォントを読み込む。
WEBフォントを読み込むことで、デバイスにないフォントでもユーザーがそのフォントで見ることができます。WEBフォントの入れ方はまたそのうち記事書きますね。

font-familyの指定に便利なツール

Font-familyメーカー byサルカワ
https://saruwakakun.com/font-family

font-family.png

上記のURLにアクセスするとFont-familyメーカーが開けます。
各デバイスで使えるフォントの一覧がみれるのと、下の欄にドラッグ&ドロップでfont-familyを作成し、コピペで簡単にオリジナルのfont-familyを指定できます。

font-familyの誤った指定方法や、注意点

× 存在しないフォントや読み込んでないフォントを指定

font-family: "aiueo-font", "リュウミン";

※iphoneは読み込めないフォントを指定したままだと、明朝体になってしまうので注意！！！

× 日本語名のフォントを（" "）ダブルクォーテーションで閉じない

font-family: ヒラギノ角ゴ ProN;

まとめ

フォントはデザイナーにもよって使うフォントが全然違うし、デバイスによっても使えるフォントが違うので非常に難しいし、悩むことが多いと思います。だからこそマイルールを決めたり、デザイナーと相談したり、便利なツールを使用することで開発の時間を短縮して効率的な作業を目指しましょう！

おそまつ！

（コメント・質問・ソースの指摘等なんでもウェルカムです！初心者の方でも気軽に質問ください！）

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-20T21:20:08+09:00

Adobe製CSSライブラリ「Spectrum CSS」がいい感じ！

Spectrum CSS　とは？

Adobeがメインコミッターとなって開発されているOSSのCSSコンポーネントライブラリです（OSSなのでタイトルの「Adobe製」というのは厳密には間違ってるかもしれません）。Apache-2.0ライセンスで公開されています。
GitHubのStarsも660とBootstrapなどの有名類似ライブラリに比べるとまだまだメジャーではないですが、さすが天下のAdobe、デザインがかなりイケてます。
しかも他のライブラリでは見かけないコンポーネントもいくつかラインナップされています。

Openbase.ioで見るとこんな感じです。
image.png

ライブラリの名前にもなっている「Spectrum」とはAdobeのデザインシステムの総称とのこと。詳しくはこちら

面白いコンポーネント

ボタンやフォームなど一般的なコンポーネントは一通り揃っていますので、ここでは変わり種をご紹介します。

Action Bar

Gmailのメールリストなどのようにまとめて操作する系のコンポーネントです。
image.png

Banner

数字を入れる事ができるBadgeはよく見ますがBannerはめずらしいですね。
image.png

Coach Mark

初期起動時のインストラクションなどで表示される例のマーカーです。
image.png

Dial

ツマミです。このコンポーネントはAdobeのソフトウエアでよく見る気がします。
image.png

Slider

さすがAdobe。スライダーは色にも対応しています。
image.png

Tree View

ありそうでなかなか無いツリービューも。
image.png

以上独断と偏見での変わり種コンポーネント紹介でした。
全てのコンポーネントはこのページから実際に動かしてみることができます。

その他

ダークモード対応

ライト、ダークの各テーマファイルがあります。
image.png

あくまでもコンポーネントのみ

Spectrum CSSはコンポーネントのみの提供でレイアウトに関わるCSSは提供していないようです。自前で頑張るかSimple GridなどのGridレイアウト専用ライブラリと組み合わせるとうまく使えそうです。

IE11未満では使えない

ドキュメントに以下の記載がありました。

This has the lowest bundle size and the simplest usage, but is incompatible with < IE 11

また、IE11で使用する場合はlegacy usage documentationを参照する必要があるようです。

以上、自分もまだ実際に組み込んでみてはいないので、使用感などはレポートできませんがデザインだけ見ると今後の常用ライブラリになり得そうな気がしました。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-20T20:34:30+09:00

初心者によるプログラミング学習ログ 376日目

100日チャレンジの376日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
376日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-20T20:23:13+09:00

javascriptを使って簡単な計算機を作るpart4 入門者向け

計算機を作る

きっかけ

実際にあるような計算機を作りたくなった。

今回作る機能

・四則演算機能の追加

完成物

See the Pen oNbaVrZ by ライム (@raimumk2) on CodePen.

サンプルコード

HTML
caluculate.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/caluculate.css">
  <title>計算機</title>
</head>
<body>
  <div class="caluculate">
    <div class="wrapper">
      <input id="number-text" type="text">
    </div>
    <div id="btns">
      <div id="num-btns">
        <button value="7" onclick="clickBtn(this)">7</button>
        <button value="8" onclick="clickBtn(this)">8</button>
        <button value="9" onclick="clickBtn(this)">9</button>
        <button value="4" onclick="clickBtn(this)">4</button>
        <button value="5" onclick="clickBtn(this)">5</button>
        <button value="6" onclick="clickBtn(this)">6</button>
        <button value="1" onclick="clickBtn(this)">1</button>
        <button value="2" onclick="clickBtn(this)">2</button>
        <button value="3" onclick="clickBtn(this)">3</button>
        <button value="0" onclick="clickBtn(this)">0</button>
        <button name="symbol" onclick="calc()">=</button>
      </div>

      <div id="symbol-btns">
        <button value="+" name="symbol" onclick="clickBtn(this)">+</button>
        <button value="-" name="symbol" onclick="clickBtn(this)">-</button>
        <button value="*" name="symbol" onclick="clickBtn(this)">*</button>
        <button value="/" name="symbol" onclick="clickBtn(this)">/</button>
      </div>
    </div>
  </div>

  <script src="js/caluculate.js"></script>
</body>
</html>

CSS
caluculate.css
* {
  margin: 0;
  padding: 0;
}

.caluculate {
  margin: 100px auto;
}

.wrapper {
  width: 300px;
  margin: 0 auto;
}

.wrapper > #number-text {
  width: 293px;
  height: 54px;
  margin-bottom: 5px;
  font-size: 48px;
  /* 右から左へ入力するためのスタイル */
  text-align: right;
}

#btns {
  width: 300px;
  display: flex;
  margin: auto;
}

button {
  width: 65px;
  height: 57px;
}

#num-btns {
  margin: 5px;
}

#num-btns > button {
  margin-bottom: 5px;
  font-size: 24px;
}

#num-btns > button:last-child {
  width: 136px;
}

#symbol-btns {
  height: 228px;
  display: flex;
  flex-direction: column;
  display: inline-block;
  margin-top: 5px;
}

#symbol-btns > button {
  margin-bottom: 5px;
  height: 57px;
  font-size: 24px;
  text-align: center;
}

Javascript
caluculate.js
var number = document.getElementById('number-text');
function clickBtn(num) {
  number.value = number.value + num.value;
};

function update(num) {
  number.value = num;
}

function calc() {
  var answer = new Function('return ' + number.value);

  update(answer().toString() )
}

今回発生したエラーについて

イコールを押すと計算が行われ、計算結果をテキストボックスに返すというプログラムを、参考サイトを見ながら作っていても全然機能しないというのがしばらく続いた。

そのときに出た、エラーメッセージがこちら

スクリーンショット 2020-07-17 18.37.23.png

最初は、returnの使い方を間違えているのかなと思い、returnについて調べ続けていても中々解決策が見つからず

最終的には、参考コードと自分のコードと何が違うかを見比べると
一つだけ違っていた箇所がありました。

caluculate.js
//変数の違いは無視してください

  //自分のコード
  new Function('return' + number.value);

  //参考元のコード
  new Function( 'return ' + v )

returnのあとの空白があるかないかだったのです。
それで、自分のコードにもreturnの後に空白を足してみたところ
やっと、「1+1=2」ができるようになりました。

原因を探ろうにも、ネット上には載ってなさそうだったので、根本的な解決にはまだ至ってはいないのですが、
今まで参考にしてきた計算機の作り方のサイトをもう一度見て回ると、いずれもreturnの後に空白はありました。

私の勝手な推測にはなるのですが、

returnの使い方の説明をされているサイトでは、
return（空白）値や式などを記述とあるので、

エラーが出ていたときの処理では
return値や式などを記述という風にやろうとしていた。とかかなぁと。

ひとまず上記のサンプルコードで自分の思い通りには動いてくれるようになりました。

参考サイト

計算機の作り方など
JavaScript を使った「電卓Webアプリ」の作り方を中３の息子に教えてみた！（プログラミング初心者向け）

JavaScriptで電卓プログラムを作成する方法を現役エンジニアが解説【初心者向け】

js関連
【JavaScript入門】returnの使い方と戻り値・falseのまとめ！

【JavaScript入門】function(関数)の使い方、呼び出し・戻り値など総まとめ！

MDN:Function

MDN:Number.prototype.toString()

エラー関連
MDN:ReferenceError: "x" is not defined

JavaScriptで「’変数名/関数名’ is not defined」というエラーが出る原因と対処法を現役エンジニアが解説【初心者向け】

今後の構想

・クリアボタンと小数点ボタンの追加
（ボタン配置に苦戦すると思われる）

・クリアボタンでテキストボックスの値をリセットする機能

・入力できる文字列や文字数などの制限

・記号入力は、ボタン切り替え機能を使って計算したい。要は、iphoneの電卓を想定

テキストボックスには記号は入力せず、内部的に入力する。
記号に文字数を使うと、長い桁になったときに足りなくなるし、見辛そうなので。
（テキストボックス表示例：「1」→(+ボタンを押す)→「1」→(=ボタンを押す)→「2」）

・計算結果をリストに追加していく機能
（複数の計算があったとき用のメモ代わり）

・計算結果リストの編集ができる機能
(作れそうなら作ってみる)

ボタン切り替え機能と計算結果をリストに追加していく機能は、以前作ることができたので、今回のコードにも組み込んでいく。

最後に

今は、先駆者様のコードを真似しているに過ぎませんが、
プログラミングにおいては「１つだけ正解というわけではない」とよく聞くので、自分の力でコードを書けるようになりたいのと、いかにエラーと向き合えるかが今後の課題になりそうです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-20T18:08:54+09:00

PHPで性格診断アプリを作ってみた

性格診断アプリ

前書き

こんにちは。業務としてWebAppエンジニアリングをかじっている者です。今回はXAMPPで性格診断アプリを作ってみました。今まで自分一人でログイン機能付きのアプリを作ったことがなかったのでいい勉強になりました。XAMPPのインストール手順に関しては別記事をご参照ください。ソースコードはこちらです。

構成

XAMPPをインストールするとC:\xampp\htdocsがドキュメントルートになります。例えばこのhtdocs直下にindex.htmlやindex.phpなどのindexという名前のファイルを置いた状態で、ブラウザにhttp://localhostと入力するとローカル環境でAppを起動することができます。(事前にXAMPP Control Panel内のApacheをStartさせておいてください)

htdocs下の構成は以下のようになります。

 C:\xampp\htdocs> ls


    ディレクトリ: C:\xampp\htdocs


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       2020/07/13     16:41                css
d-----       2020/06/22     10:47                dashboard
d-----       2020/07/13     12:45                img
d-----       2020/06/22     10:47                webalizer
d-----       2020/06/22     10:47                xampp
-a----       2020/07/14     16:19            152 config.php
-a----       2015/07/17      0:32          30894 favicon.ico
-a----       2020/07/15     22:28           5965 home.html
-a----       2020/07/14     16:14           3241 index.php
-a----       2020/07/15     22:29           1524 login.php
-a----       2020/07/14     19:35            909 logout.php
-a----       2020/07/15     22:29           1971 result-list.php
-a----       2020/07/15     22:30          11434 result.php
-a----       2020/07/15     22:03           2174 signUp.php

C:\xampp\htdocs\css> ls


    ディレクトリ: C:\xampp\htdocs\css


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
-a----       2020/07/15     13:44           1394 style.css

データベースのテーブル構成については以下のようになります。

dbname=pd_login
テーブル: userdata
email 　   varchar(255)    utf8mb4_unicode_ci　unique key
password    varchar(255)    utf8mb4_unicode_ci

テーブル: diagnosis-result
email   varchar(255)    utf8mb4_unicode_ci
execution_time  datetime
friendly    int(11)
extrovert   int(11)
emotional   int(11)
positive    int(11)
leader      int(11)

ログイン

htdocs直下にindex.htmlやindex.phpなどのindexという名前のファイルを置いた状態で、ブラウザにhttp://localhostと入力するとindex.phpが表示されます。これがログイン機能の大元になるファイルです。新規登録機能と通常ログイン機能を持たせています。新規登録処理について、メールアドレスとパスワードにはフィルターをかけている。パスワードに関しては正規表現で適切でないものをはじいています。メールアドレスに関してはfilter_varを利用して、RFC822で判定しています。RFC822は判定がガバガバ説があるので、ビジネスで使うときは注意です。パスワードはセキュアにデータベースに保存するためpassword_hash()関数を使ってhash化しています。

if (!$email = filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
  echo '入力された値が不正です。';
  return false;
}

if (preg_match('/\A(?=.*?[a-z])(?=.*?\d)[a-z\d]{8,100}+\z/i', $_POST['password'])) {
  $password = password_hash($_POST['password'], PASSWORD_DEFAULT);
} else {
  echo 'パスワードは半角英数字をそれぞれ1文字以上含んだ8文字以上で設定してください。';
  return false;
}

通常ログイン機能では以下のようにパスワードを処理します。登録時にhash化したパスワードをpassword_verify()で照合しています。

# login.php
if (password_verify($_POST['password'], $row['password'])) {
  session_regenerate_id(true); //session_idを新しく生成し、置き換える
  $_SESSION['EMAIL'] = $row['email'];
  echo 'ログインしました';
  session_write_close();
  header( "Location: ./home.php" ) ;
  exit();

} else {
  echo 'メールアドレス又はパスワードが間違っています。';
  return false;
}

性格診断

index.php内のinputタグからemailとpasswordをpostするとそれをlogin.phpがデータを受け取り、本人確認が済んだらhome.htmlに遷移します。以下がhome.htmlの質問文の箇所です。valueには質問ごとの性格要素の値が入っています。

<form method="post" action="result.php">
    <h2>第一問</h2>
    <p>あなたは外で遊ぶより、家で過ごすほうが好きですか？</p>
    <input type="radio" name="q1" value="1"> かなりそう思う<br>
    <input type="radio" name="q1" value="2"> そう思う<br>
    <input type="radio" name="q1" value="3"> どちらとも言える<br>
    <input type="radio" name="q1" value="4"> あまりそう思わない<br>
    <input type="radio" name="q1" value="5" required> そう思わない<br>

診断結果

home.htmlで入力した値はresult.phpにpostされます。以下はvalueごとの性格要素の値を集計して、4分岐でユーザの性格を判定している箇所です。この例だと質問2と質問6はユーザの興味の対象に関する要素を決定する項目です。この2つの質問のvalueを合算してその合計でユーザの性格を4つに分類しています。

# result.php
if($q2+$q6>8){
              $hito_mono = "非常にモノよりヒト";
              $hito_mono_comment = "あなたは特にこの傾向が強く、ヒトと関わっている時間を楽しみに感じています。
              仕事を選ぶ際にもなるべくヒトと関わる仕事を選ぶとよいでしょう。";
            }elseif($q2+$q6>5){
              $hito_mono = "どちらかといえば、モノよりヒト";
              $hito_mono_comment = "あなたはヒトと関わる時間に楽しみを感じる一方で、モノにも興味をもてます。
              何か自分の興味のあるモノやコトに打ち込みながら、それをヒトとシェアできるバランスの良さをもっています。";
            }elseif($q2+$q6>3){
              $hito_mono = "どちらかといえば、ヒトよりモノ";
              $hito_mono_comment = "あなたはモノやコトに打ち込んでいる瞬間に楽しみを感じる一方で、他人にも興味をもてます。
              何か自分の興味のあるモノやコトに打ち込みながら、それをヒトとシェアできるバランスの良さをもっています。";
            }else{
              $hito_mono = "非常にヒトよりモノ";
              $hito_mono_comment = "あなたは特にこの傾向が強く、モノやコトに打ち込んでいる瞬間を楽しみに感じています。
              仕事を選ぶ際にもなるべく一人で集中できる仕事を選ぶとよいでしょう。";
            }

判定結果の履歴

home.htmlに以下のボタンを設置しています。

<button class="fixed_btn" onclick="location.href='./result-list.php'">過去の診断結果</button>

実はresult.php内でデータベースにそれぞれの結果を保存しています。home.htmlはresult-list.phpに遷移した後、このデータベースに接続します。result-list.phpでは以下のような処理を行っており、ログインしているユーザのemailカラムを参考に、データベース内の全データを取得して表として出力しています。

# result-list.php
function createHtmlTable($result) {

    $html = "<table border='3' cellspacing='4' cellpadding='4'>";

    $ffields = $result->fetch_fields();
    $html .= "<tr>";
    foreach ($ffields as $val) {
        $html .= "<th>" . $val->name . "</th>";
    }
    $html .= "</tr>";

    foreach ($result as $row) {
        $html .= "<tr>";
        foreach ($ffields as $val) {
            $value = $row[$val->name];
            $html .= "<td>${value}</td>";
        }
        $html .= "</tr>";
    }
    $html .= "</table>";

    return $html;
}

Session

ちなみに、ページ遷移してもログイン時のemailを利用できるのはSessionを利用しているからです。login.php内では、以下のような処理をしています。

# login.php
$_SESSION['EMAIL'] = $row['email'];

遷移した後のページでこの$_SESSION['EMAIL']を使うときは、以下のような記述をする必要があります。

  <?php
      session_start();

ハマったこと

データベースの接続

文字列の変数はちゃんと'$hoge'などシングルクオーテーションマーク(あるいはダブルクォーテーションマーク)で囲む必要があります。

# result.php
$pdo = new PDO('mysql:host=localhost;dbname=pd_login;charset=utf8mb4','root','');
            $sql = "INSERT INTO `diagnosis-result`(`email`, `execution_time`, `friendly`, `extrovert`, `emotional`, `positive`, `leader`) VALUES ('$user_email','$current_time',$q2+$q6,$q1+$q7,$q3+$q8,$q5+$q9,$q4+$q10)";
            $qry = $pdo->prepare($sql);
            $qry->execute();
            $pdo = null;

データベースのデータ型

パスワードをhash化していますが、長さには余裕をもたせる必要があります。私はvarchar(16)とやってしばらくハマっていました。varchar(255)にしたら通りました。

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-20T15:19:09+09:00

IEと少し仲良くする方法

　前置き

HTML/CSSの不具合で、
「IEだけアイコンが見切れてるけど？」とか
「IEだけアイコンの位置がズレてるけど？」
みたいな不具合をよく見かけます。

その際の解決策を少し紹介できればなーと。
（間違っていたらごめんやで！こっそり教えてください！）

IEあるある その1 「IEだけアイコンが見切れてるけど？」

SVGファイルに、

viewBox="n n n n"

の記述があるか確認しましょう。
無い場合、アイコンが見切れてしまいます。

ちなみにviewBoxってなんやねん！
って思う人いるかもしれないです。

説明すると
https://www.indetail.co.jp/blog/13002/
という訳です。

解決策

SVGにはviewBoxをちゃんと書きましょう！

IEあるある その2 「IEだけアイコンの位置がズレてるけど？」

これは主にdisplay:flexを使っている時に起きがちです。
ちなみにアイコンの位置以外にも、display:flexを使って
レイアウトを調整している際によく起きます。

原因はflexアイテムの伸び率、縮み率の設定にあります。
それぞれの説明はMDNとか適当に見てください。
https://developer.mozilla.org/ja/docs/Web/CSS/flex

flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;

こやつらです。
この内のflex-basisを設定しないとバグります。

また、ショートハンド記法でも同様で、

flex: 1 30px;

こんな風に書くとバグります。
（左から順にflex-grow、flex-shrink、flex-basis）

上記の場合、flex-basisが記載されていない為、
IEが勝手にflex-basis:autoと解釈します。

flex-basis:autoなんだから
そりゃレイアウト崩れるよねって感じです。

解決策

flex-basisをちゃんと設定しましょう！

まとめ

大した内容では無いですが、
display:flexを使ってレイアウトが逝ってしまった時、
確認する箇所として参考にして頂けたらと思います。

また、個人的な感想ですが、IEは基本全て定義してあげた方が安全です。
定義しないと、autoと解釈されがちなイメージです。

まあ、IEのようなクs使いづらいブラウザは使わないのが
一番いいんですけどねー。
あと数年は我慢です。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-20T08:01:04+09:00

HTMl・CSSで下線を引く方法！デザインの変え方や注意点もご紹介

HTML・CSSを使って文字に下線を引く方法を、

・HTMLだけで下線を引く方法
・CSSで下線を引く方法
・下線のデザインを変える方法

の３つから紹介する。

HTMLで文字に下線を引く方法

HTMLに<u>タグを追加するだけで簡単に下線を引くことができる。

HTML

html
<u>ここに下線が引かれます。</u>

表示イメージ

<u>〜</u>の間の文字全てに下線が引かれる。

非常に簡単である。

ただし、<u>タグは

・綴りエラーの通知
・中国語の文字列の固有名詞記号の記述
・その他の形の注釈

に使われるという意味のもの。

・強調させたい場合
・見た目を変えたいだけの場合

は、<em>タグや<span>タグを使用し、CSSで見た目を変更することをオススメする。

CSSで文字に下線を引く方法

それでは、<em>タグや<span>タグを使った時に見た目を変更する方法を紹介する。

HTMLにCSSを直接書く

HTMLファイルに直接CSSを書く場合、下線を引きたいタグの中にCSSを指定する。

まずはシンプルに下線を引くことができる「text-decoration: underline」を使った場合がこちら。

HTML

html
<span style="text-decoration: underline;">ここに下線が引かれます。</span>

表示イメージ

下線を引きたい文字をタグ<span>タグや<em>タグで囲い、タグの中にCSSを指定している。

この方法はHTMLに直接指定するため、どこに下線が引かれたかわかりやすいのが特徴。

ただし、もし他に同じような下線を引きたい場所があった場合、下線を引きたい場所に毎回同じように長い記述する必要がある。

さらにデザインを変更したくなった場合、タグが使われている全ての箇所を一つずつ修正する必要があるので手間がかかってしまう。

HTMLにclass名をつけリンクしたCSSファイルからスタイルを指定する

そこで便利なのが、HTMLにclass名を指定し、別のCSSファイルからスタイルを変更する方法だ。

HTML

html
<span class="line">ここに下線が引かれます。</span>

CSS

css
.line{
text-decoration: underline;
}

表示イメージ

class名の「line」は好きな名前を指定できる。

これで、HTMLにCSSを直接書いた場合と同じ見た目になる。

この方法だと、HTMLファイル内で同じclass名を指定した箇所は、CSSファイルを編集するだけで一度にスタイルを変更することができて便利である。

下線のデザインを変える

CSSを使えば下線の見た目を自由に変更できますが、大きく分けて２つの方法がある。それぞれの特徴を把握して、どちらを使うか選んでほしい。

・text-decorationの場合

シンプルな下線が引ける。「text-decoration」で下線を引いた場合、自動で文字色と同じ色になる。また、線の太さを変えることはできない。

・border-bottomの場合

borderは要素の周りに線を引くプロパティ。そのため、「border-bottom」というプロパティ名を使うことで要素の下に下線を引くことができるようになる。「border-bottom」を使うと、線の種類・太さ・色で下線のデザインを細かく指定できる。

下線の色を変えてみる

「border-bottom」プロパティを使って下線の色を変えてみよう。「border-bottom」は、「種類・太さ・色」をまとめて１行で指定することができる。

HTML

html
<span class="line">ここに下線が引かれます。</span>

CSS

css
.line{
border-bottom: solid 1px #ff0000
}

表示イメージ

とすると、「#ff0000」が線の色になる。この場合、細い赤の実線が文字の下に引かれる。

下線の太さを変えてみる

太い線を引きたい時は、

HTML

html
<span class="line">ここに下線が引かれます。</span>

CSS

css
.line{
border-bottom: solid 3px #000000
}

表示イメージ


のように、「◯px」で線の太さを指定しましょう。数字に合わせて太さが変わる。

下線を点線にしてみる

下線を点線にしたい時は、

HTML

html
<span class="line">ここに下線が引かれます。</span>

CSS

css
.line{
border-bottom: dotted 1px #000000
}

表示イメージ

「dotted」と記述しよう。実線が点線へと変わっている。

まとめ

以上、HTML・CSSを使って文字の下に下線を引く方法を紹介した。

HTML・CSSのタグを使えば簡単に文字に下線が引けるので、

・文章を強調したい時
・見た目を変更したい時

など場面に合わせた方法を使い、わかりやすいWebサイト作りを目指そう。

かずきち

プログラミング学習サイト「ウェブカツ!!」の顧問。
不動産、保険の営業マンから、エンジニアへ転身。
「HTMLって何？」という状態から3ヶ月の独学のみでエンジニアへ転職し、１年で年収１千万を稼ぐエンジニアへ。
独学時代のプログラミング学習の分かりにくさや、「技術しか出来ずに稼げていないエンジニア」の現状を変えるため「ウェブカツ」を立ち上げ運営している。

【ウェブカツ公式WEBサイト】
https://webukatu.com/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-07-20T06:01:05+09:00

h1 - h6 タグに自動的に番号が付くようにする

概要

html の h タグを使用したとき自動的に見出し番号が付くようにしたい。
とりあえず h6 まで。

コード

==> jsfiddle

  • class="num" が付いている h1 - h6 タグは自動番号

参考

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧