20200711のHTMLに関する記事は12件です。

【初心者でもわかる】line-heightのせいでデザインを崩さないためのコーディング方法

どうも、7noteです。今回は初心者が落ち入りやすいline-heightの罠を解説し、対応策についてもしっかり書いていきます。

過去の記事でも書いたのですが、デザイナーは1pxの細かいデザインまでこだわってWEBデザインを作成しています。コーディングを担当するものとして、またコーダーとして、ブラウザで見たときにデザインを完璧に再現するのがコーダーの仕事の一つです。

そんなとき、厄介なのがline-heightの存在です。今までこんな経験はないでしょうか?

  • 「あれ、デザインでしっかりpx測ったのになんか余白が広い気がする。」
  • 「ここって、こんなに空いてたっけ?」

この問題、実は「line-height」の影響かもしれません。

「line-height」って何?

「line-height」は日本語でいうと「行間」です。

文字を読む際にはこの行間はとても大切です。行間がないと文字が詰まりすぎて読み難かったり、場合によっては文字が重なって読めなくなるなんて事もあります。

本なんかでも、文字がギュウギュウに詰まった本は読みにくいですよね。一行一行ある程度の感覚が空いているのでストレスなく本を読むことができます。これはWEBでも同じで、WEBサイトにはたくさんの文字が書かれています。特にニュース記事やブログなどはたくさんの文字が書かれていますよね。WEBサイトでもたくさんの文字が使われるということは行間もとても大切になってきます

タイトルで「line-heightのせいで・・・」みたいに書いてますが、line-heightはとても重要なcssの一つだと思っています。ですが・・・

余白の計算が狂う元凶に・・・

例えばこんなデザイン。
line-height_1.png

見出し(【初心者でもわかる】CSS〜〜)と書いている部分をコーディングする時で考えてみましょう。
数字やCSSは以下の通りとします。
line-height_2.png

line-heightを無視するならこんな感じで書きますが。。。

index.html
<div class="header">    
    <h1>【初心者でもわかる】CSSのセレクタ3種類の書き方(隣接セレクタ・間接セレクタ・直下セレクタ)<h1>
</div>
style.css
h1 {
    font-size: 20px;
    line-height: 1.4;
    margin-top: 40px;
}

ですが、実際には上側に4pxのズレが生じます。
line-height_3.png

なぜズレる?

そう、これがline-heightの罠なのです!!!
なぜズレるのか。line-height分の余白があるからです。

行間があるということは文字の上下に余白がつきます。今回はline-heightに1.4を指定しています。つまり1行の高さはこうなります。

【font-size × line-height = 1行の高さ】
20px × 1.4 = 28px

1行の高さは28pxになります。それに伴い文字サイズの20pxを引くと上下につく余白は8pxとなります。

【1行の高さ - font-size = 上下の余白】
28px - 20px = 8px

上下の余白の合計が8pxになるので、文字の上についている余白は半分の4pxとなります。

8px ÷ 2 = 4px(文字の上側の余白)

これが4pxズレる罠です。

「line-height」のズレを考慮して、余白を指定

style.css
h1 {
    font-size: 20px;
    line-height: 1.4;
    margin-top: 36px; /*line-height分の4pxを考慮して指定*/
}

line-height_4.png

いかがでしょうか。これでデザイン通りの余白がとれましたね!

まとめ

注意点としては、文字サイズやline-heightの値で考慮しないといけない余白の大きさはその都度変わってきます
またデザインによってline-heightの値が統一されておらず、こっちでは行間が1.5で、こっちでは行間は1.8などになっている場合もよくあります。その都度その都度しっかり計算して正しい余白をとるようにしましょう!

今回はわかりやすくするために「2020年06月〜〜」の部分のline-heightはあえて無視していますが、取りたい余白の上下どちらにも文字があるときは上の文字の行間と下の文字の行間の両方を考慮して余白をとるようにしましょう!
これをマスターすればline-heightに関しては脱初心者と言っても過言ではありません!

おそまつ!

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

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

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

100日チャレンジの367日目

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

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

[PHP] Markdownも書ける掲示板「ぼやログ」を作ってみた

これなに

自粛期間中遠隔授業で暇を持て余し,思いつきで匿名掲示板「ぼやログ」を作成した記録です。
ぼくのかんがえたさいきょうの掲示板を作ろうと思って没頭していたら,ポストするカードの枠線色を変えたりMarkdown記法が使えたり出来るようになっちゃったサービスです。
他に同じようなサービスを作りたいと思っている方や勉強等に役立てれば幸いです。

開発環境

  • Windows 10 Pro
  • VisualStudio Code
    • Pluginもりもりのやつ
    • Powershell
  • XAMPP
  • 自分の好きなキーボード (だいじ)

いずれも記事作成時点で最新のstable版を利用

利用したサービス

今回はサービスをローンチさせるために,無料でPaaSを利用できるherokuを選びました。
またDBも同様にherokuの無料プランを利用しています。

herokuについての詳細は記事下部の参考からどうぞ。

ぼやログ」について

名前の由来は私がとある短文投稿サイト1の情報量の多さに疲れて引退,しかし普段のちょっとした"ぼやき"は投稿したい....そんな作成者の願いを叶えるために生まれました。
デザインはMaterial Designをちょっとだけ参考にした独自のデザイン,背景色とアクセントのブルーは今は亡きCyanogenmod.incのbackgroundとaccentをパクって参考にさせていただきました。

ぼやログ画面

投稿は右上のプラスボタンからできます。

4k + 125%拡大表示

スマホでのビュー

できること

Markdown記法による文章記述

Parsedown

ParsedownというPHPで使えるMarkdown Parserを組み込んでいます。
Parsedownの利用できるMarkdown方言は次の通り:

  • Github flavored Markdown
  • Markdown Extra
GitHub Markdown CSS

Markdown記述用のCSSはGitHub Markdown CSSが適用されます。

Highlight.js

さらにさらに,Markdown内のコードブロックにはSyntax Highlightも適用されます。
テーマはAtom One Darkに設定しています。かっこいい!

ポストするカードのカラー変更

これは既存のサービスにはない独自の機能をつけたいと思い考えていた結果,投稿した文字色でなく投稿そのものに色を付けることができるのは魅力的ではないか?とトイレで思いつき実装しました。
画像はポストフォームと,グリーンに指定されたポストです。

ポスト削除

あたりまえですが,ポストの削除も出来ます。削除はポスト時間横のゴミ箱アイコンです。
ただ,記事作成時点では削除ボタンを押すと一発で投稿が削除される仕様です。ご利用は計画的に

できないこと・実装予定

Markdown記法による一部の表現

確認したところだと, <details>タグ,および<summary>タグが利用できませんでした。
おそらくParsedownの設定の問題で,投稿内のhtmlのタグがはじかれているからでしょう。
これは今後セッティングにより対応可能になるかと思います。
他にも表現できないものがあるかと思いますが,確認中です。

過去30ポスト以前の参照

これはページャーを実装することにより参照が可能になりますが,クリックするタイプのページャーはこのサイトにはUX的に相性が悪いので,無限スクロールで対応を検討中です。(infinite-scrollとかajaxとか)
が,作成者の知識不足で未だ実装には至っていません。

画面更新なしの投稿・更新・削除

これはポーリングやロングポーリング,Websocketによって実装可能で,実際にテストしたところ投稿機能は動作しました。
が,どの技術を利用するにしても現在の無料サーバでは実現困難でした。(herokuにおこられちゃう)
今後利用者が増えれば資金を出して実装できます。

ポストに対するコメント

要望があれば(利用者が増えれば)検討します。

ポスト内容の編集

でも削除できるからいらないでしょ?(怠惰)

セキュリティ

これに関しては作成者は未だに不安です。
このサイトに導入されているセキュリティのフロートしては,

  1. [ぼやぼや]送信
  2. htmlspecialcharsでHTMLエンティティ化
  3. DBに保存
  4. DBから取り出し,htmlspecialchars_decodeでデコード
  5. ParsedownのsetSafeModetrueにしてMarkdownからHTMLにパース

という流れです。が,現状この方法ではDBに保存する前に文字列のまま出力してしまっているので,SQLインジェクションが可能です。
ただこのサイトは完全匿名でログイン等がないので,悪くても投稿全削除とかサーバ荒らしとかでしょう。
サーバには無料プランだと同時接続数や遅れるクエリの数が制限されるかと思いますのでたぶんいまのとこ大丈夫。(甘い)

対応策としてはHTMLエンティティ化の代わりに入力された値をハッシュかなんかに変換しちゃえば問題ないかと思います。

また描画する際もParsedownに頼り切っているので,セキュリティホールを突けばXSSも可能です。
対応策として,ParsedownのHPにも記載されている通りにCSPも導入するなどしたほうが良さそうです。

In both cases you should strongly consider employing defence-in-depth measures, like deploying a Content-Security-Policy (a browser security feature) so that your page is likely to be safe even if an attacker finds a vulnerability in one of the first lines of defence above.
Parsedown

さいごに

思いついた瞬間から作り始めましたが当方HTMLとPHP(それもちょっと)くらいしか知識がなかったので他のJSやgitについては実際に動かしながら学びました。
動かしていく上で必要な情報を集めるにつれ,様々なソリューションや知見に触れることが出来ました。
またサーバとやり取りする時に重要なセキュリティに対する考えや対応策なども,言葉自体は知っていたが実際にどうなるのかなどを身を以て実感させられました。
このサービスを作って得た知識や考えは今後,他のサービスを触ったり運用するための大きな勉強になったかと思います。

参考・リンク

めちゃめちゃお世話になった投稿


  1. 後はわかるな? 

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

CSS フォントサイズの変更 クラス指定なし

html

あいうえお


かきくけこ

css
p{
fontsize
}

pタグにクラス名を指定せずに、「あいうえお」「かきくけこ」のフォントサイズを別々にできる方法はありますか?(「あいうえお」フォントサイズ10px、「かきくけこ」フォントサイズ20px)のように

これ以外で外部cssで記述する方法があれば知りたいです。

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

vscode・Emmet Snippetでhtml, cssを手っ取り早くかく

もし不明なところや、間違いとかがあればご指摘頂けると幸いです。

やること

  • vscodeに基本提供されているemmet snippetsを使い、手っ取り早くhtml, cssを書くことを試みる
  • emmetはどういうものかをざっくり目を通す

vscodeのEmmet Snippetsとは?

image.png

https://code.visualstudio.com/docs/languages/html#_emmet-snippets

vscodeは、基本的にemmetのauto-completionを提供している。

htmlのauto-completion例

ul>li*3>span.hello$

を書くと

<ul>
    <li><span class="hello1"></span></li>
    <li><span class="hello2"></span></li>
    <li><span class="hello3"></span></li>
</ul>

こういうふうに、HTMLを自動で完成してくれる。

cssのauto-completion例

p10

を書くと

padding: 10px;

こういうふうに、css属性を自動で完成してくれる。

Emmetとは

Emmetは既定形式の入力補完機能によりHTML、XML、XSL等を素早く編集できる、テキストエディタ用プラグイン
vscodeは、このプラグインを基本搭載している。

Emmetでできること

html, css, xslのauto-completion

Emmet Documents

Cheat Sheetsのいくつかを覚えておくと便利

● Cheat Sheets(html, css, xsl)
https://docs.emmet.io/cheat-sheet/

● Syntax & Documentation
https://docs.emmet.io/abbreviations/syntax/

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

vscode・Emmet Snippetでhtml, cssを手っ取り早くかく(備忘録)

もし不明なところや、間違いとかがあればご指摘頂けると幸いです。

やること

  • vscodeに基本提供されているemmet snippetsを使い、手っ取り早くhtml, cssを書くことを試みる
  • emmetはどういうものかをざっくり目を通す

vscodeのEmmet Snippetsとは?

image.png

https://code.visualstudio.com/docs/languages/html#_emmet-snippets

vscodeは、基本的にemmetのauto-completionを提供している。

htmlのauto-completion例

ul>li*3>span.hello$

を書くと

<ul>
    <li><span class="hello1"></span></li>
    <li><span class="hello2"></span></li>
    <li><span class="hello3"></span></li>
</ul>

こういうふうに、HTMLを自動で完成してくれる。

cssのauto-completion例

p10

を書くと

padding: 10px;

こういうふうに、css属性を自動で完成してくれる。

Emmetとは

Emmetは既定形式の入力補完機能によりHTML、XML、XSL等を素早く編集できる、テキストエディタ用プラグイン
vscodeは、このプラグインを基本搭載している。

Emmetでできること

html, css, xslのauto-completion

Emmet Documents

Cheat Sheetsのいくつかを覚えておくと便利

● Cheat Sheets(html, css, xsl)
https://docs.emmet.io/cheat-sheet/

● Syntax & Documentation
https://docs.emmet.io/abbreviations/syntax/

jsxでも使えるように設定(react)

設定▶拡張機能▶emmet項目でsetting.jsonを開き、以下の設定を追加

setting.json
{
  "emmet.includeLanguages": {
     "javascript": "javascriptreact"
  }
}

image.png

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

vscode・Emmet Snippetでhtml, css, jsxを手っ取り早くかく(備忘録)

もし不明なところや、間違いとかがあればご指摘頂けると幸いです。

やること

  • vscodeに基本提供されているemmet snippetsを使い、手っ取り早くhtml, css,jsxを書くことを試みる
  • emmetはどういうものかをざっくり目を通す

vscodeのEmmet Snippetsとは?

image.png

https://code.visualstudio.com/docs/languages/html#_emmet-snippets

vscodeは、基本的にemmetのauto-completionを提供している。

htmlのauto-completion例

ul>li*3>span.hello$

を書くと

<ul>
    <li><span class="hello1"></span></li>
    <li><span class="hello2"></span></li>
    <li><span class="hello3"></span></li>
</ul>

こういうふうに、HTMLを自動で完成してくれる。

cssのauto-completion例

p10

を書くと

padding: 10px;

こういうふうに、css属性を自動で完成してくれる。

Emmetとは

Emmetは既定形式の入力補完機能によりHTML、XML、XSL等を素早く編集できる、テキストエディタ用プラグイン
vscodeは、このプラグインを基本搭載している。

Emmetでできること

html, css, xslのauto-completion

Emmet Documents

Cheat Sheetsのいくつかを覚えておくと便利

● Cheat Sheets(html, css, xsl)
https://docs.emmet.io/cheat-sheet/

● Syntax & Documentation
https://docs.emmet.io/abbreviations/syntax/

jsxでも使えるように設定

reactなどで便利

設定▶拡張機能▶emmet項目でsetting.jsonを開き、以下の設定を追加

setting.json
{
  "emmet.includeLanguages": {
     "javascript": "javascriptreact"
  }
}

image.png

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

html 基本パーツ

今回はhtmlを初めて触ったので基本パーツとかを簡単にまとめて行こうかなと思います。
参考資料はudemyのThe Web Developer Bootcampコースです。

簡単パーツ

h タグ

<h1>h1 tag</h1>
<h2>h2 tag</h2>
<h3>h3 tag</h3>
<h4>h4 tag</h4>
<h5>h5 tag</h5>
<h6>h6 tag</h6>

スクリーンショット 2020-07-11 14.11.23.png

p タグ

<p>p tag</p>

スクリーンショット 2020-07-11 14.13.27.png

a タグ

<a href="URL">リンク先へ</a>

スクリーンショット 2020-07-11 14.15.43.png

img タグ

<img src="画像のURLまたはパス">

ol タグ

<ol>
  <li>HTTP Requests</li>
  <li>IP Address</li>
  <li>Servers</li>
</ol>

スクリーンショット 2020-07-11 14.18.04.png

ul タグ

<ul>
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
</ul>

スクリーンショット 2020-07-11 14.20.06.png

table タグ

<table border="1">
  <thead>
    <th>Name</th>
    <th>Age</th>
    <th>Breed</th>
  </thead>
  <tbody>
    <tr>
      <td>Rusty</td>
      <td>2</td>
      <td>Mutt</td>
    </tr>
    <tr>
      <td>Wyatt</td>
      <td>13</td>
      <td>Golden</td>
    </tr>
  </tbody>
</table>

スクリーンショット 2020-07-11 14.24.32.png

form タグ編

formタグはログイン画面などで入力した文字などをリクエスト先に送信する際に使用する。
タグにはたくさんの属性があり、属性はkeyとvalueで指定することができる。入力したテキストなどをリクエストで送信する際に属性を指定することでリクエストの内容を変更することができる。

textarea タグ

<form>
  <textarea name="paragraph" rows="8" cols="80"></textarea>
  <button type="submit">go!</button>
</form>

スクリーンショット 2020-07-11 14.31.23.png
リクエスト内容:paragraph=abc
rowsとcolsでテキストエリアの大きさを調整できる

select タグ

<form>
  <select name="color">
    <option value="red">RED</option>
    <option value="yellow">YELLOW</option>
    <option value="BLUE">blue</option>
  </select>
  <button type="submit">go!</button>
</form>

スクリーンショット 2020-07-11 14.33.51.png
リクエスト内容:color=red

radio button タグ

<form>
  <label for="dogs">Dogs:</label>
  <input name="petChoice"id="dogs" type="radio"
   value="DOGS">

  <label for="cats">Cats:</label>
  <input name="petChoice"id="cats" type="radio"
   value="CATS">

  <button type="submit">go!</button>
</form>

スクリーンショット 2020-07-11 14.35.43.png
リクエスト内容:petChoice=CATS

input タグ

<form>
  <label for="username">Email:</label>
  <input id="username"type="email" name="username" placeholder="email"
  required>

  <label for="password">password:</label>
  <input id="password"type="password" name="password" placeholder="password"
  required>

  <button type="submit">go!</button>
</form>

スクリーンショット 2020-07-11 14.38.59.png

リクエスト内容:username=test%40gmal.com&password=pass
required: 入力しないとフォームでリクエストできない
type="email": emailの書式じゃないと認識されない
placeholder="email": テキストフィールドに薄く文字が出る
password:: 今はあまり関係ないがあとあと使用する。id="password"とfor="password"で結びつけている。

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

カブトムシを様々な種類にトランスフォームさせたくなったときの簡単なTIPS

【 完成形 】

See the Pen MWKXrmO by daisukeibi (@daisukeibi) on CodePen.

まず初めにGSAPのライブラリを読み込む。

index.html
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=2314"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js"></script>

使いたいSVGをダウンロードしてコードエディタで開き、
svgタグのviewBoxとpathタグのd属性をコピーして貼り付ける。

index.html
<svg id="svg" viewBox="(viewBox属性を貼り付ける)" fill="#4F392B">
  <path id="icon1" d="(一匹目のカブトムシのd属性を貼り付ける)">
  <path id="icon2" d="(二匹目のカブトムシのd属性を貼り付ける)">
  <path id="icon3" d="(三匹目のカブトムシのd属性を貼り付ける)">
</svg>

cssで初期表示しないpath要素を隠す。

style.css
#icon2,#icon3{
visibility: hidden;
}

jsで動かす。

script.js
var tl = gsap.timeline({repeat:-1});

tl.to("#icon1", 1,{
  morphSVG: "#icon2"
}).to("#icon1", 1,{
  morphSVG: "#icon3"
}).to("#icon1", 1,{
  morphSVG: "#icon1"
})

以上で完成です!

morphSVGPluginは有料ですが、他にもAnime.jssnap.svgなど無料で使えるのもいっぱいあるので、「SVG モーフィング」で調べてみてください。(モーフィング時の滑らかさとか実装の難しさに差があって面白いです)

JS苦手な方や手っ取り早く動かしたいという方には短い記述で簡単に実装できるので、有料にはなりますがmorphSVGPluginがおすすめです。


使用ライブラリ:https://greensock.com/morphsvg/

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

個人アプリ作成#1

雛形の作成

rails バージョン new app名 -d MySQL で作成

Git hub Desk topと連携してコードの保存

トップページの作成

スクリーンショット 2020-07-11 3.25.35.png
この後に、投稿一覧を作りたいと思う。

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

HTML,CSSだけでホームページ作成『開発環境編』「前編」

はじめに

HTMLとCSSでホームページを作成するためには

  • エディタ
  • ブラウザ

この2つが必要になってきます。

スクリーンショット 2020-07-11 0.28.00.png

グラフを見て分かるようにエンジニアの3人に1人がVisual Studio Codeを使用
していることになります。

なので、今回はVisual Studio Codeを使用していきます。

1.VisualStudioCodeをインストール

  • サイトにアクセス

今回はmacOSでやっていきます。
下記のリンクからアクセスして「Download for Mac」をクリック
https://code.visualstudio.com/
スクリーンショット 2020-07-11 1.01.19.png

  • ダウンロード

クリックすると自動でダウンロードが開始されます。
スクリーンショット 2020-07-11 1.04.51.png

  • zipファイルを解凍

画面右下の ① のアイコンをクリックすると、ダウンロードフォルダに入ったファイル一覧が出てくるので、該当の ② をクリックします。

※Finderから直接でも上記でもどちらからでも良いです
スクリーンショット 2020-07-11 1.08.31.png

  • アプリケーションフォルダに移動

ダウンロードフォルダVisualStudioCode表示されると思いますが、まだ開かないでおきましょう。
そのアイコンをドラッグアンドドロップで、サイドメニューの「アプリケーション」に移動させます。

スクリーンショット 2020-07-11 1.15.10.png

  • 認証ボタン押す

画面が表示されたら「認証」ボタンを押して、管理者のログイン情報を入力し認証してください。

スクリーンショット 2020-07-11 1.20.33.png

  • アプリケーションフォルダから「VisualStudioCode」を開く

スクリーンショット 2020-07-11 1.21.10.png

これでエディタの開発環境は終わりです。
お疲れ様でした!

まとめ

今回、ブラウザのことまで書きたかったんですが長くなりそうなので「前編」「後編」と言った形に分けさせてもらいます。

今回ご紹介したVisualStudioCodeは、デフォルトで便利な機能が備わっていますし、扱いやすさも抜群なので、初心者の方でも使っていて不便ということがほぼないと思います。

もし機能で困ったことがあっても、VSCodeは認知度が高く、ネットに多くの情報が載っているため、検索すればいくらでも解決策が出てきます。
※Qiitaを有効活用しましょう!!!!

ただ、初めのうちはどのエディタを使用しても違いがよくわからないと思います。

しかし、使っていくうちに『こんな機能をつけたい』『これが便利』と感じることが増えてくると思いますので、その後に自分に適したテキストエディタを見つけてどんどんコードを書いていきましょう!

参考文献

【2020年最新版】プログラミング効率を上げるテキストエディタ
https://frontend-diary.com/programming-editor/
MacOSでVisual Studio Codeをインストールする手順
https://qiita.com/watamura/items/51c70fbb848e5f956fd6

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

HTML5の全要素の振り返りをかねて整理する(整理中)

はじめに

HTML5の学習を兼ねて全要素を確認中。

HTML5全要素

image.png

グローバル属性

image.png

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