20200720のCSSに関する記事は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

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

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

× 存在しないフォントや読み込んでないフォントを指定
font-family: "aiueo-font", "リュウミン";
※iphoneは読み込めないフォントを指定したままだと、明朝体になってしまうので注意！！！

× 日本語名のフォントを（" "）ダブルクォーテーションで閉じない
font-family: ヒラギノ角ゴ ProN;
まとめ

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

おそまつ！

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

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

　 Tweet
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で見るとこんな感じです。

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

面白いコンポーネント

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

Action Bar

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

Banner

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

Coach Mark

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

Dial

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

Slider

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

Tree View

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

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

その他

ダークモード対応

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

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

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を参照する必要があるようです。

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-20T20:34:30+09:00

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

100日チャレンジの376日目

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

おはようございます
昨日の作業・やったこと⇩

●寝る直前の筋トレ5分、kindle読書 10分
●ブログ1記事作成
●プログラミング学習376日目 10h
・架空LP作成(@ririru_123 )
・pc版お問い合わせ部分以外を作成

汗疹できた#駆け出しエンジニアとつながりたい #100DaysOfCode #早起きチャレンジ
— ぱぺまぺ@社畜✕投資✕ブロガー (@ppmp65) July 19, 2020

　 Tweet
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() )
}
今回発生したエラーについて

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

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

最初は、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」）

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

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

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

最後に

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

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-20T18:26:30+09:00

Tailwind on Rails

なぜTailwind on Rails?

クラス名を決める必要がなくなる

クラス名の衝突がなくなり、BEMやCSS設計から開放される

デザインの修正により不要になったCSSが残ってしまうことがなくなる

どの要素にどんなスタイルが当たっているかがすぐにわかる

カラーコードやフォントサイズ、ブレイクポイント等の統一性を保ちやすい

ネット上に転がっているサンプルコードを気軽に取り入れやすい(他の人が書いたコードでもカスタマイズが楽)

スタイルの修正のたびにapp/assets/stylesheets/任意のフォルダ/任意のファイルを開く必要がなくなる

環境

Rails 6.0.3

導入
$ yarn add tailwindcss
$ yarn tailwindcss init
$ mkdir app/javascript/css
$ touch app/javascript/css/tailwind.css
app/javascript/css/tailwind.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
app/javascript/packs/application.js
import '../css/tailwind.css';
postcss.config.js
module.exports = {
  plugins: [
    //...
    require("tailwindcss"), //追加
    require("autoprefixer"), //追加
    require("postcss-preset-env")({
      autoprefixer: {
        flexbox: "no-2009",
      },
      stage: 3,
    }),
  ],
};
動作確認
$ rails g controller test index
config/routes.rb
root to: 'tests#index'
app/views/tests/index.html.erb
<div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block mx-auto sm:mx-0 sm:flex-shrink-0 h-16 sm:h-24 rounded-full" src="https://randomuser.me/api/portraits/women/17.jpg" alt="Woman's Face">
    <div class="mt-4 sm:mt-0 sm:ml-4 text-center sm:text-left">
      <p class="text-xl leading-tight">Erin Lindford</p>
      <p class="text-sm leading-tight text-gray-600">Customer Support Specialist</p>
      <div class="mt-4">
        <button class="text-purple-500 hover:text-white hover:bg-purple-500 border border-purple-500 text-xs font-semibold rounded-full px-4 py-1 leading-normal">Message</button>
      </div>
    </div>
  </div>
</div>
applyを使う

Tailwind CSSにはapplyという機能があり、複数のクラスをまとめて適用することができます。例えば同じボタンがあらゆる箇所に出現する場合、毎回font-bold py-2 px-4 rounded bg-red-500 text-white hover:bg-red-700などと書くのは大変なので、btnというクラスを指定するだけで上記のクラスを適用するためにapplyを使います。

TailwindをRailsで利用する場合applyを使用するのが難しいので、helper関数で対応することにします。

(こちらの記事ではRailsでapplyを使っているようですが、この通り設定するとapplyを適用した箇所以外のスタイルが効かなくなってしまいました)
$ rails g helper tailwind
app/helpers/tailwind_helper.rb
module TailwindHelper
  def btn
    'fosnt-bold py-2 px-4 rounded bg-red-500 text-white hover:bg-red-700'
  end
end
app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  helper TailwindHelper
end
app/views/tests/index.html.erb
<a href='#' class='<%= btn %>'>ボタン</btn>
懸念点

TailwindCSSでは、想定されうるあらゆるユーティリティークラスが用意されているので、他のCSSフレームワークよりファイルサイズが大きいです。
この問題を、PurgeCSSという機能を使いビルド時に実際に使われているクラスに関するスタイルだけを抽出する方法で解決しています。

しかしRails上でTailwindを使う場合、PurgeCSSが使えません。(正確には設定方法がわかりません。分かる方がいたら教えてください。)
そのため通常よりファイルサイズが大きくなってしまいます。

当初この点を懸念して、Tailwind on Railsは無理ではないかと考えていました。

Tailwindの公式サイトを確認したところ

Using the default configuration, the development build of Tailwind CSS is 1996kb uncompressed, 144.6kb minified and compressed with Gzip, and 37.kb when compressed with Brotli.

とあり、要はminify&gzip済で144.6kbとのこと。Bootstrapが22.1kbってことを考えるとまあ重いですが、許容範囲なんじゃないかと思っています。

gzipの設定、ブラウザにキャッシュさせる期間の設定、CDNの活用とかをちゃんとやっていればクリティカルではないでしょう。

参考

RailsでTailwind CSSを使用する - Qiita

　 Tweet
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)にしたら通りました。

参考

phpで作る簡素なログイン機能

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-20T12:00:06+09:00

modern CSS resetでaltテキストを指定しないと画像がぼやける

特に設定していないはずなのに画像がぼやける現象に悩んでいた。

解決しなかった方法

まずGoogleで適当に検索したところ、以下のようなサイトがヒットした。
Chromeで画像を縮小表示すると文字がなんだかぼやける現象を回避するTips

これに従って-webkit-backface-visibility: hidden;を適用させてみたが変化なし。

結論

modern CSS resetに以下のようなコードがあった。
/* Blur images when they have no alt attribute */
img:not([alt]) {
  filter: blur(10px);
}
解決法：該当部分を削除する(非推奨)か、imgタグにalt要素を設定する。

まとめ

Altテキストはスクリーンリーダを利用している方にとって重要なので、必ず設定するようにする。

　 Tweet
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/

　 Tweet
Qiitaで続きを読む

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

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

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

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

font-family 指定例

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

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

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

まとめ

おそまつ！

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

Spectrum CSS とは？

面白いコンポーネント

Action Bar

Banner

Coach Mark

Dial

Slider

Tree View

その他

ダークモード対応

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

IE11未満では使えない

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

100日チャレンジの376日目

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

計算機を作る

きっかけ

今回作る機能

完成物

サンプルコード

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

参考サイト

今後の構想

最後に

Tailwind on Rails

なぜTailwind on Rails?

環境

導入

動作確認

applyを使う

懸念点

参考

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

性格診断アプリ

前書き

構成

ログイン

性格診断

診断結果

判定結果の履歴

Session

ハマったこと

データベースの接続

データベースのデータ型

参考

modern CSS resetでaltテキストを指定しないと画像がぼやける

解決しなかった方法

結論

まとめ

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

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

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

HTMLにCSSを直接書く

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

下線のデザインを変える

下線の色を変えてみる

下線の太さを変えてみる

下線を点線にしてみる

まとめ

かずきち

日付別

タグ一覧

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

Spectrum CSS　とは？