What's New Qiita

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

  • 投稿日：2020-02-07T23:31:01+09:00

ショートコーディングで階乗計算機を作る

ショートコーディングで階乗計算機を作る

動作サンプル　https://www.o--o.cf/

<script>for(a=prompt(),i=1,k=a;k--;)i*=k+1;document.write(i)</script>

たったこれだけ。

メモ帳に貼り付けてやってみてください。

以上

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

ショートコーディングで階乗計算機を作るj

ショートコーディングで階乗計算機を作る

作業おばけのWEBサイト　https://oocf8.localtunnel.me/

<script>for(a=prompt(),i=1,k=a;k--;)i*=k+1;document.write(i)</script>

たったこれだけ。

メモ帳に貼り付けてやってみてください。

以上

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

Tabulatorを使ってみた日

Tabulatorとは

html5の表を簡単に作成できるJavaScriptライブラリー

手順

・jqueryをここからCDNで読み込んだ.
・GitHubリポジトリからTabulatorライブラリーをコピーして、tabulator.cssとtabulator.jsファイルをプロジェクトに読み込む。

hoge.html
<! DOCTYPE html>
<link rel="stylesheet" href="tabulator.css">
<script type="text/javascript" src="tabulator.js">

<div id="example-table"></div>
hoge.js
$("#example-table").tabulator({
  columns:[
    {title:"Name", field:"name", sortable:true, width:200},
    {title:"Progress", field:"progress", sortable:true, sorter:"number"},
    {title:"Gender", field:"gender", sortable:true},
    {title:"Favourite Color", field:"col", sortable:false},
    {title:"Date Of Birth", field:"dob"},
    {title:"Cheese Preference", field:"cheese"},
  ],
});


var sampleData = [
  {id:1, name:"Oli Bob", progress:12, gender:"male", rating:1, col:"red", dob:"", car:1, lucky_no:5, cheese:"Cheader"},
  {id:2, name:"Mary May", progress:1, gender:"female", rating:2, col:"blue", dob:"14/05/1982", car:true, lucky_no:10, cheese:"Gouda"},
  {id:3, name:"Christine Lobowski", progress:42, gender:"female", rating:0, col:"green", dob:"22/05/1982", car:"true", lucky_no:12, cheese:"Manchego"},
  {id:4, name:"Brendon Philips", progress:100, gender:"male", rating:1, col:"orange", dob:"01/08/1980", lucky_no:18, cheese:"Brie"},
  {id:5, name:"Margret Marmajuke", progress:16, gender:"female", rating:5, col:"yellow", dob:"31/01/1999", lucky_no:33, cheese:"Cheader"},
];

参考

HTMLのテーブルをJSONで動的に更新できる「Tabulator」がスゴい！
Tabulatorを使った見やすい表形式のWebアプリの作成

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

【Laravel】デフォルトの管理画面に左メニューをサクッと設置

最近Laravelはじめました。

Laravelにはデフォでユーザ管理機能が存在しますが、そのログイン後の画面はコンテンツエリアのみのレイアウトとなってます。これをよくある固定左メニュー＋コンテンツエリアのレイアウトにしてみます。

（完成形）
スクリーンショット_2020-02-07_17_26_06.png

0. 管理機能の有効化

ver5系ではphp artisan make:authコマンドでユーザ管理機能がセットアップできたのですが、６系の場合は以下のリンク等を参考にセットアップしてください。

Laravel 6系でmake:authを使う方法
Laravel6 備忘録 −ユーザー認証(Auth)−

うまくセットアップできれば、/resources/views下に以下のファイルが生成されているはずです。
home.blade.php
今回は認証後の最初のビューであるこれを元に話をすすめます。

1. home.blade.phpから左メニューの元ネタをコピー

＜div class="col-md-12"＞から閉じの＜/div＞までをコピーします。

/resources/views/home.blade.php
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">

        // 略

2. menu.blade.phpを新規作成

1でコピッたソースを貼り付けて、col-md-12をcol-md-2に変更してお好みに応じてカスタマイズします。

/resources/views/menu.blade.php
  <div class="col-md-2">
      <div class="card">
          <div class="card-header"><i class="fas fa-th-list"></i></i> MENU</div>
          <div class="card-body">
              <div class="panel panel-default">
                  <ul class="nav nav-pills nav-stacked" style="display:block;">
                      <li><i class="fas fa-user-alt"></i> <a href="#">XXXXXXXX</a></li>
                      <li><i class="fas fa-user-alt"></i> <a href="#">XXXXXXXX</a></li>
                      <li><i class="fas fa-user-alt"></i> <a href="#">XXXXXXXX</a></li>
                </ul>
              </div>
          </div>
      </div>
  </div>

3. home.blade.phpを修正

col-md-12をcol-md-10に変更して、その直前の行に@include('menu')を。

menu.blade.php
<div class="container">
    <div class="row justify-content-center">

        <!-- left menu -->
        @include('menu')

        <div class="col-md-10">
            <div class="card">

        // 略

ちなみに今回はこんなCSSをあててみました。

.col-md-2 .card-body {
    padding:0;
}
.col-md-2 ul {
  padding: 0;
  position: relative;
}

.col-md-2 ul li {
  line-height: 1.8;
  padding: 0.5em 0.5em 0.5em 0.7em;
  list-style-type: none!important;
  background: -webkit-linear-gradient(top, #whitesmoke 0%, whitesmoke 100%);
  background: linear-gradient(to bottom, whitesmoke 0%, #dadada 100%);
  text-shadow: 1px 1px 1px whitesmoke;
  color: black;
}

以上、LaravelというようりBootstrapのグリッドシステムを利用した小ネタでした。今回は2:10でメニューとコンテンツエリアを分割しましたが、12（グリッドの個数は最大12）の範囲内で３分割なども可能です。

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

[HTML＆CSS]テキストのオンマウスでポップアップメッセージを表示

概要

自分のアウトプット用の記事です。

テキストのオンマウスでポップアップメッセージを表示させる方法

今回は、JavaScriptやjQueryなどを使わず、HTMLとCSSのみで簡単に実装できるサンプルコードを紹介。

目次

１　１．上にメッセージを出す場合
２　２．下にメッセージを出す場合
３　３．右メッセージを出す場合
４　４．左メッセージを出す場合

オンマウスでポップアップメッセージを出す方法

1.上にメッセージを出す場合

HTML側のソースコード

<div class="Sample1">
    <p>テキストを入力</p>
    <div class="description1">説明を入力</div>
</div>

CSS側のソースコード

.Sample1{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.Sample1 p{
    margin:0;
    padding:0;
}
.description1 {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: #000;
    width: 100px;
}
.description1:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 15px solid transparent;
    border-top: 15px solid #000;
    margin-left: -15px;
}
.Sample1:hover .description1{
    display: inline-block;
    top: -70px;
    left: -30px;
}

.Sample1{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.tooltip1 p{
    margin:0;
    padding:0;
}

2.下にメッセージを出す場合

HTML側のソースコード

<div class="Sample2">
    <p>テキストを入力</p>
    <div class="description2">説明を入力</div>
</div>

CSS側のソースコード

.Sample2{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.Sample2 p{
    margin:0;
    padding:0;
}
.description2 {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: #000;
    width: 100px;
}
.description2:before {
    content: "";
    position: absolute;
    top: -24px;
    right: 60%;
    border: 15px solid transparent;
    border-top: 15px solid #000;
    margin-left: -15px;
    transform: rotateZ(180deg);
}
.Sample2:hover .description2{
    display: inline-block;
    top: 30px;
    left: 0px;
}

3.右にメッセージを出す場合

HTML側のソースコード

<div class="Sample3">
    <p>テキストを入力</p>
    <div class="description3">説明を入力</div>
</div>

CSS側のソースコード

.Sample3{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.Sample3 p{
    margin:0;
    padding:0;
}
.description3 {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: #000;
    width: 100px;
}
.description3:before {
    content: "";
    position: absolute;
    top: 0%;
    right: 95%;
    border: 15px solid transparent;
    border-top: 15px solid #000;
    margin-left: -15px;
    transform: rotateZ(90deg);
}
.Sample3:hover .description3{
    display: inline-block;
    top: 0px;
    left: 80px;
}

4.左にメッセージを出す場合

HTML側のソースコード

<div class="Sample4">
    <p>テキストを入力</p>
    <div class="description4">説明を入力</div>
</div>

CSS側のソースコード

.Sample4{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.Sample4 p{
    margin:0;
    padding:0;
}
.description4 {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: #000;
    width: 100px;
}
.description4:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 130px;
    border: 15px solid transparent;
    border-top: 15px solid #000;
    margin-left: -15px;
    transform: rotateZ(270deg);
}
.Sample4:hover .description4{
    display: inline-block;
    top: 0px;
    left: -130px;
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-02-07T16:34:23+09:00

任意の HTML 要素をフォーカス可能にする tabindex 属性

はじめに

フロントエンド開発をしている皆さんは普段からアクセシビリティを考慮した実装をしていますか？
近年の SPA を中心としてフロントエンド開発の手法が体系化されてきた流れで、アプリケーションの設計や状態管理等の議論は増えましたが、(特に日本では) アクセシビリティについての議論はまだ少ないように思われます。
そこで今回は、HTML の tabindex 属性と具体的な事例を紹介します。

結論

  • アクセシビリティのために Web ページは tab キーのみで操作できるのが理想
  • tabindex 属性を使えば tab キーで任意の要素にフォーカスさせたり、フォーカスされる順番を変更したりできる
  • インタラクティブではない要素に使用すると逆にアクセシビリティが悪化するので注意が必要
  • tabindex 属性を指定することでインタラクティブな要素を作ることができる

なぜ重要なのか

Web は今や世界中の誰もが利用できる場所となっているため公共施設と言っても過言ではありません。そこでは何の不自由もなく利用できる人もいれば 支援技術の力を借りて利用している人 もいます。ビジネスで開発している場合はそのようなユーザーを最初から考慮することは難しいかもしれませんが、彼らを無視して自らターゲットを狭めていること は否めないでしょう。

また、一般のユーザーにとってもアクセシビリティが高い Web サイトはコンテンツを楽しんだり、使いこなしたりする上で重宝されます。特に tab キーによる移動 は一般のユーザーにも広く使われています。

tabindex 属性について

任意の HTML 要素に tabindex 属性を指定すると、その要素をキーボードによる順次ナビゲーション (一般的には tab キーによる移動) に追加するか、どの順番にするかを決めることができます。

指定できる値は整数値ですが、与える値で挙動が変化します。

  • 負の値: 指定された要素はフォーカス可能になるが、順次ナビゲーションでは無視される
  • 0: 指定された要素はフォーカス可能になり、階層順で順次ナビゲーションされる
  • 正の値: 指定された要素はフォーカス可能になり、値の順番でナビゲーションされる

※ 負の値 は fucus() メソッドを使うことでフォーカスできます

採用事例

世界で広く使われている Web サイトでは既に tabindex 属性が活用されています。今回紹介するのは Airbnb の事例です。

トップページで tab キーを押すと、最初にコンテンツにスキップするか問われます。

再び tab キーを押すとヘッダーへの順次ナビゲーションが続き、enter キーを押すとコンテンツへの順次ナビゲーションにスキップされます。

同様の手法は Google の検索画面 や mozilla の MDN でも採用されており、世界では一般的なのかもしれません。

注意事項

便利な tabindex 属性ですが、多用すると不必要な要素もフォーカスされるため逆にアクセシビリティを悪くしてしまいます。

そのため tabindex 属性を使用する要素はインタラクティブな要素のみにすることが強く推奨されています。ここでいうインタラクティブな要素は以下のものです。

  • a (href 属性が存在する場合)
  • audio (controls 属性が存在する場合)
  • button
  • details
  • embed
  • iframe
  • img (usemap 属性が存在する場合)
  • input (type 属性が hidden ではない場合)
  • label
  • object (usemap 属性が存在する場合)
  • select
  • textarea
  • video (controls 属性が存在する場合)

他にも tabindex 属性を指定することで他の要素もインタラクティブな要素にすることができます。

また、1 以上の値を指定すると利用者が意図しない場所にフォーカスされ、特に支援技術に頼って Web を閲覧するユーザーは不便なのでなるべく 負の値 か 0 を使うようにしましょう。

tabindex 属性でインタラクティブな要素を作る

今回作るのは span 要素で作るチェックボックスです。
React と TypeScript、styled-components を使用するので馴染みのない方は雰囲気だけでも掴んでいただけると幸いです。

まずはチェックボックスのコンポーネントです。
親コンポーネントで状態の管理をしているのを想定して、props で checked (チェックされているか) と onChange (チェックを切り替える関数) を受け取っています。
Wrapper に注目すると tabIndex 属性をしていしているのがわかります。(React だと tabindex は tabIndex と記述しなければならない)

Checkbox.tsx
import React from 'react'
import styled from 'styled-components'
import CheckIcon from './CheckIcon'

type Props = {
  onChange: () => void
  checked: boolean
}

const Checkbox: React.FC<Props> = ({ checked, onChange }) => {
  const toggleChecked = (event: React.KeyboardEvent<HTMLSpanElement>) => {
    if (event.key !== 'Enter' || !onChange) return
    onChange()
  }

  return (
    <Wrapper tabIndex={0} onKeyPress={toggleChecked}>
      <FakeCheckbox checked={checked}>
        {checked && <CheckIcon />}
      </FakeCheckbox>
    </Wrapper>
  )
}

const Wrapper = styled.span`
  border: 1px solid #00000020;
  border-radius: 4px;
  cursor: pointer;
  width: 24px;
  height: 24px;
  &:focus {
    border: 1px solid #1976d2;
    outline: none;
  }
`

const FakeCheckbox = styled.span<{ checked: boolean }>`
  background-color: ${({ checked }) => checked && '#1976d2'};
  border-radius: 3px;
  display: flex;
  width: 100%;
  height: 100%;
`

export default Checkbox

CSS は省略していますが親のコンポーネントです。

Form.tsx
import React from 'react'
import Checkbox from './Checkbox'

const Form: React.FC = () => {
  const [isChecked, setIsChecked] = useState(false)
  const toggleChecked = () => {
    setIsChecked(!isChecked)
  }
  return (
    <form>
      <label>
        <Checkbox checked={isChecked} onChange={toggleChecked} />
        利用規約に同意
      </label>
    </form>
  )
}

実際には次のように動きます。

check.gif

これで tabindex 属性を使ってインタラクティブかつフォーカスができる要素を作ることが出来ました。

おわりに

今回はアクセシビリティを向上させるための手段として tabindex 属性を紹介しました。普段アクセシビリティを気にしている方は Light House の結果を気にすることが多いと思いますが、Light House ではフォーカスに関するスコアは出ないので tabindex 属性は目新しい情報だったかもしれません。これを機に Web のアクセシビリティについて検討しようという方が増えると嬉しいです。

もし記事の内容に間違いや誤解を招く箇所があればコメント欄か Twitter (@saitoeku3) で指摘していただけると助かります。

参考

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

HTML&CSS忘備録 "初学者1〜3ヶ月向け”

この記事について

　自分の忘備録のために、HTML&CSSの記事まとめを作成します。そのため、メモがわりに使いながら、随時肉付けをしていきます。また、私は初学者であるため、この記事を見る方は勉強を始めて1〜3ヶ月くらいの方を想定しています。

学習

◆Udemyのおすすめ動画コース①

https://qiita.com/kurosawa_kuro/items/d3927bdaa68b02a42036
世界的に人気のUdemyを使って、学習するおすすめ動画コースのまとめです。
30代半ばから学習をはじめ、ブロックチェーンとデータサイエンスの研究をされている方(@kurosawa_kuro)の記事です。

環境構築

◆フロントエンドの開発環境を構築する

https://qiita.com/C3REVE/items/273646ad028e98758e70
GoogleChromeすらインストールしていない状態でもOKです。
いっぱしの開発がスタートできるようになります。

HTML

CSS

◆Flexboxのチートシート

https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet#flexbox14
Flexboxのビジュアルでわかりやすい解説と、チートシートのダウンロードができます。

◆CSSの擬似要素と擬似クラスの解説

https://www.asobou.co.jp/blog/web/css2

◆リセットCSSまとめ

https://webdesign-trends.net/entry/8137
CSSをリセットする際のおすすめセットです。

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

formのonsubmitが実行されないケース

formにonsubmitを付けているとき、例えば以下のようにするとcalledBeforeSubmit();が実行されない。

<form action="/hoge" onsubmit="return calledBeforeSubmit();">
    <input type="hidden" name="hiddenValue" value="fuga">
    <input type="button" onclick="this.form.submit();"><!-- ここが駄目 -->
</form>

<script type="text/javascript">
const calledBeforeSubmit = () => {
    // 処理...
    return true;
};
</script>

どうやら<input type="button" onclick="this.form.submit();">のようにonclick属性からformをsubmitするとonsubmitが実行されないぽい。

以下のように素直に<input type="submit">を使う必要がある。

<form action="/hoge" onsubmit="return calledBeforeSubmit();">
    <input type="hidden" name="hiddenValue" value="fuga">
    <input type="submit"><!-- これなら大丈夫 -->
</form>

<script type="text/javascript">
const calledBeforeSubmit = () => {
    // 処理...
    return true;
};
</script>

調べてみると、MDNのドキュメントにこんなことが書いてあった。

Gecko ベースのアプリケーションからこのメソッドを呼び出すときに、フォームの onsubmit イベントハンドラ (例 : onsubmit="return false;") はトリガされません。一般的に、ユーザエージェントによる呼び出しは保証されていません (※参照 : http://lists.w3.org/Archives/Public/www-dom/2012JanMar/0011.html)

「Gecko ベースのアプリケーション」が何なのかはイマイチわからないが、ブラウザのUserAgentにはよく「Gecko」という単語を見かけるので、おそらくそれの事なんじゃないかと思っている。

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

overflow-wrap(word-wrap)、word-breakやら、結局どれがいいの？について検証

経緯

この検証をする前は、
こんな感じの知識で仕事をしてました。

「うわっ文章、枠からはみ出ててもうてるやん。」
「とりあえずword-wrapとかword-breakいれといたらええんちゃうか。」

しばらくすると、やっぱ問題が「こんにちは」(^o^)/
本件、一時的には解決。

でも、

やっぱちゃんと知識入れやなあかんなーと思い、この記事を書くことにしました。

ちなみにword-wrapは古い名称で、今はoverflow-wrapを使うといいみたい。

やってみたこと

親要素に500pxの幅を設定。
それぞれの子要素（各文章）にCSSを当てた時、
折り返されずに「はみ出るのか」「はみ出ないのか」を検証しました。
（もちろん文章の長さは500px以上あります。）

環境

PCはMAC、
ブラウザは Firefox、Safari、Chrome、
Edge、IE（どちらもMAC内バーチャルボックスのwindows）

displayの値はこの3つ

・block
・inline-block
・flex

overflow-wrapの値

・break-word

word-breakの値

・brake-all
・brake-word

文章はこの2つ

A: 実際の文章っぽい、半角英数字の文章（英語のダミー文章）
B: 半角英数字の羅列（よくある長いURLを想定）

ぶっちゃけ日本語の文章は大体改行されるし、それよりも今回問題が起こった
「半角英数字の羅列（よくある長いURLを想定）」
よくあるのはめちゃめちゃ長いURL。
URLの後半によくわからない暗号のような半角英数字がしこたま並ぶやつ。

そんなのword-break: brake-all;いれとけば、問答無用で折り返して改行される。
でも、実際の英語の文章も入力される場合もあるし、その場合単語の途中で改行されて欲しくない。
そんなモヤモヤを解消したいのです。

こんな表示のやつはNGとする

上の文章（A）: 実際の文章っぽい、半角英数字の文章（英語のダミー文章）
下の文章（B）: 半角英数字の羅列（よくある長いURLを想定）

NG1

▼どちらも折り返されているけど、Aの文章が単語の途中で折り返されているから微妙
2020-02-06 13.16.33.jpg

NG2

▼Bが折り返されてない、却下
2020-02-06 13.17.01.jpg

NG3

▼枠に収まっているけど、文章だけが折り返されず、はみ出ているIEめ（EdgeとIEでのみ再現）
2020-02-06 13.16.50.jpg

各ブラウザでのチェック

さあ、それでは各ブラウザでの検証スタート！
以下は気になるところだけチェックしてください。

Firefox

display: block;の場合

・word-break: break-all; + overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; + overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

display: inline-block;の場合

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

display: Flex;の場合（row）

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない
※min-width:0;をいれると折り返される

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない
※min-width:0;をいれると折り返される

display: Flex;の場合（column）

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される
※min-width:0;をいれると折り返される

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

Safari

display: block;の場合

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

display: inline-block;の場合

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

display: Flex;の場合

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない
※min-width:0;をいれると折り返される

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない
※min-width:0;をいれると折り返される

display: Flex;の場合（column）

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される
※min-width:0;をいれると折り返される

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

Chrome

display: block;の場合

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

display: inline-block;の場合

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

display: Flex;の場合

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

display: Flex;の場合（column）

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される
※min-width:0;をいれると折り返される

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
○　B: 折り返される

Edge

display: block;の場合

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない（子要素の枠は親要素の枠に収まっているけど、テキストのみはみ出る）

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

display: inline-block;の場合

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

display: Flex;の場合

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない
※min-width: しても文字だけはみ出る;

display: Flex;の場合（column）

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない（子要素の枠は親要素の枠に収まっているけど、テキストのみはみ出る）

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない（子要素の枠は親要素の枠に収まっているけど、テキストのみはみ出る）
※min-width:0;をいれると折り返される

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない（子要素の枠は親要素の枠に収まっているけど、テキストのみはみ出る）

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない（子要素の枠は親要素の枠に収まっているけど、テキストのみはみ出る）

IE11

display: block;の場合

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない（子要素の枠は親要素の枠に収まっているけど、テキストのみはみ出る）

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

display: inline-block;の場合

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

display: Flex;の場合

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない
※min-width: きかん;

display: Flex;の場合（column）

・word-break: break-all; overflow-wrap: break-word;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない（子要素の枠は親要素の枠に収まっているけど、テキストのみはみ出る）

・word-break: normal; overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない（子要素の枠は親要素の枠に収まっているけど、テキストのみはみ出る）
※min-width:0;をいれると折り返される

・word-break: break-all;

×　A: 単語途中の改行あり
○　B: 折り返される

・word-break: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない（子要素の枠は親要素の枠に収まっているけど、テキストのみはみ出る）

・overflow-wrap: break-word;

○　A: 単語途中の改行なし
×　B: 折り返されない（子要素の枠は親要素の枠に収まっているけど、テキストのみはみ出る）

結論と考察

検証なげーわ。
とりあえずスクロールお疲れ様。

結論からいうと、
解決策なし。←マジか。

だからまずこの質問。
「そもそも、英単語の途中で折り返してもOK？」
「しかたねーな。」
「別にかまわんぞ。」なら、

word-break: break-all;

をbodyに入れとく。

これで改行される。
どのブラウザでもはみ出ない。

でももし...
「単語途中はちょっと読みづらいよね...」
「なんとかしたいやん」なら、
・要素やテキストの内容によって当てるcssを考える

その場合、個人的にはこれがいいかなと思う。

word-break: break-word;
overflow-wrap: break-word;

ただ要素がinline-blockだとブラウザ(Edge/IE)によっては効かないので、
できるなら個別にその要素をblockかflexにする。

もしくはURLみたいな半角英数字を使わない想定なら、
個別にword-break: break-all;を設定しておくのがいいかもしれない。

flexの場合にはみ出した場合はmin-widthとmin-heightで改行解消される。
でもIEだけには効かなかった。（なぜだ万能ではないのか）

個人的な結論。

word-break: break-all;
overflow-wrap: break-word;

word-break: break-all;が最強。←やっぱ崩れないのが一番
あと、要素的ごとに設定変更するかもなので、
念のためoverflow-wrap: break-word;を入れておく。
的な感じでいいんじゃないかなと思う。

以上。

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

備忘録

画面の幅に合わせて中央寄せ
親要素のwidthを最小の画面幅以下にしてmargin:o auto;

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

楽天スマホ商品ページにiframeを入れる

対象読者

  • 楽天市場に開店したての人
  • 楽天GOLD（FTP）を契約している人
  • スマホの商品ページ上部を自由にレイアウトしたい人

つまり

スマホの見た目をこんな風にしたい方向けです。

000.jpg

読み終わった後に得られるもの

  • 楽天GOLDでできることが少し分かる
  • 楽天商品ページにおいて、CSSのどこをいじれば何がどう変わるかがチョットワカル
  • 次のステップに進む準備ができるヒントを得るカモ（バナー以外にも、いろいろ自由にレイアウトを作れる）

説明しないこと

  • 楽天GOLDの契約手順
  • FTPへのアップロード方法
  • HTMLやCSSの基礎

手順

早速説明していきます。
手順と同時に、ソースコードの説明なども適宜挟んでいきます。

あ、ちなみに楽天禁止タグを含む内容なので実施については自己責任でお願いします。

前提

今回は、以下の前提の上に説明を進めます。

  • ショップURL & GOLDアカウント名: myshop

FTPサーバ内のファイル構成

今回はこの様にファイルを構成しました。

myshop/
├── iframe/
│   ├── sp-header.html
│   └── css/
│       ├── sp-header.css
│       └── sp-header-reset.css
└── shop-banner/
    ├── myshop.jpg
    └── cashless.jpg

※ /で終わるものはディレクトリ名（=フォルダ名）です
※ myshop/はFTPのroot（一番上のフォルダ）で、新規作成の必要はありません

GOLD以外に編集するもの

当然ですが、GOLD上にファイルを保存だけではやりたいことができません。先にそちらを済ませてしまいましょう。

RMSメニューの下記ページに飛びます。

店舗設定 > 2 デザイン設定 > スマートフォンデザイン設定 > 商品ページ共通パーツ設定

そうしたら、商品ページ共通説明文の項目に以下を追加しましょう。

<!--sp header -->
<iframe class="sp-header" frameborder="0" scrolling="no" src="https://www.rakuten.ne.jp/gold/myshop/iframe/sp-header.html" width="100%" frameborder="0" =""></iframe ="">
<link rel="stylesheet" href="https://www.rakuten.ne.jp/gold/myshop/iframe/css/sp-header.css" ="">

はい。RMSでの設定は以上です。
ここでやっている事はごく単純です。

  • 全てのスマホ商品ページ共通で、GOLD上のiframeとCSSを読み込ませる

商品ページでsp-header.cssを読んで、sp-header.htmlの中でもsp-header.cssを読み込んでいます。1

GOLDで作るもの

iframeに画像を表示してみる

まずはiframeに画像を表示するだけ、というのをしてみます。
ごく普通のHTML5ファイルをGOLD上に置くだけです。

sp-header.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>myshop sp header</title>
  <link rel="stylesheet" href="css/sp-header.css">
</head>
<body class="sp-header">

<div>
  <div>
    <!-- ショップバナー -->
    <a href="https://www.rakuten.ne.jp/gold/myshop/" target="_top">
      <img src="https://www.rakuten.ne.jp/gold/myshop/shop-banner/myshop.jpg">
    </a>

    <!-- キャッシュレス還元バナー -->
    <a href="https://event.rakuten.co.jp/campaign/cashless/" target="_top">
      <img src="https://www.rakuten.ne.jp/gold/myshop/shop-banner/cashless.jpg">
    </a>
  </div>
</div>

</body>
</html>

注意点としては、iframe内のaタグにはtarget属性を付けるのを忘れないことです。
興味のある方はtargetを取り除いてトライしてみてください。リンククリックしたときに妙なことになります。

で、ここで商品ページを見てみるとこうなっています。ちゃんと画面下の方にiframeがありますね。
でも位置がココジャナイですし、画像の縮尺も変です。妙な余白もあります。次はこれをなんとかしていきます。

001.jpg

iframe内の画像を画面幅に合わせ、上部に配置する

画面上部のパーツは図のようになっています。

  • ヘッダ部分150px
  • ショップ名の高さ45px
  • 商品画像スライドショー id="irtemImageSlider"

002.jpg

これを利用して、CSSで次のことを実装します。

  • iframeの絶対位置を画面の一番上から150pxに合わせる
  • iframeのbodyに付いている余計な余白を取り除く
  • iframe内の画像の幅を画面幅に合わせる
  • iframeの高さを、iframeの中身の高さに合わせる
  • #itemImageSlider の上余白を、iframeの高さと同じだけ開ける

結果、このようになります。

003.jpg

sp-header.css
@import url(sp-header-reset0.css);
sp-header-reset.css
/* 商品画像スライダーの上隙間を作る */
#itemImageSlider {
  /**
  * 100vw * 240 / 750 = ショップバナーの高さ
  * 100vw * 120 / 616 = キャッシュレス還元バナーの高さ
  * -45px = ショップ名の高さ
  */
  margin-top: calc(
    100vw * 240 / 750
    + 100vw * 120 / 616
    - 45px
  );
}

/* 作った隙間に iframe を差し込む */
iframe.sp-header {
  height: calc(
    100vw * 240 / 750
    + 100vw * 120 / 616
  );
  position: absolute;
  top: 150px;
  left: 0;
  width: 100%;
}

/* iframe内 */
body.sp-header-body {
  margin: 0;
}

.sp-header-body img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

補足

ショップ名のパーツはバナーがあるから不要だろうということで、iframeで覆い隠しています。
これをしたくない場合は- 45pxを削除して、iframe.sp-header { top: calc(150px + 45px); }としてください。

また、sp-header.cssに書かずに、わざわざsp-header-reset.cssに記述しているのを不思議に思った方もいるでしょう。
もちろん、sp-header.cssに全て書いても同じことができます。その場合sp-header-reset.cssは不要です。
これは、ソースコードの保守性を考えてのことです。
iframeの位置や高さなどの大前提となる記述をsp-header-reset.cssに書き、それ以外のパーツ専用記述をsp-header.cssに書くことで、変更があった時にどのファイルを修正すればよいか分かりやすいでしょう。（分かりやすくないですか...？）

私が1ファイルにいろんな役割を持たせて全部書いちゃう、というスタイルが嫌いだからってのもあります。
無駄に長くなって、修正箇所を探すの面倒じゃないですか。

calc()について

cssにcalc()という記述がありますが、これは計算式を作るためです。

vw(viewport width)という単位は便利なもので、画面幅を100vwとした単位のことです。
これは%とは明確に異なり、%の場合は親要素の幅が100%なので、親要素に左右されます。
vwの場合は親要素の幅に関係なく、画面幅を基準にできるのです。

さて、今回用意したショップバナーは幅750px／高さ240pxのものです。
これを画面幅にリサイズすると高さがどうなるか、100vwという数字を使えば計算できますよね。

「iPhoneXの画面幅は375pxだから、高さは半分の120px！ 120pxって書いたろ！」
としてはいけませんよ。スマホというのはiPhoneXだけではなく、いろんな画面幅がありますから。

バナーの数を増やしたい場合

さて、バナーを足したり他のパーツをiframe内に配置したりした時はどうしたらいいでしょうか。
答えはこうです、かんたんですね。

  • (sp-header.htmlにバナーを足す)
  • iframeの高さを修正する
  • #itemImageSlider の上余白を修正する

  1. ちなみに私は「2回読み込むの無駄じゃん！」と思って片方だけで試したことがありますが、デザインが崩れて結局うまくいきませんでした。実際は2回読み込む記述をしてもキャッシュの活用等でダウンロードは1回なのかもしれませんが、釈然としません。誰かスッキリする方法を知っている方はコメント欄にて教えて下さい。 ↩

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

コンポーネント単位の設計をしたらデザインガイドラインをつくろう

こんにちは、しがないwebデザイナーです。
去年の11月に、Spotlightという仮想通貨を使ったCtoCメディアサービスをリリースしました。（担当箇所はデザインと画面コーディングです。）

そして、2019年5月31日に可決された改正資金決済法に含まれる「暗号資産カストディ業務に対する規制」に伴って1月31日のサービス内容変更と同時にデザインの改修も行いました。

そのときに、デザインガイドラインなるものを作成したので、つくりかたと重要性とか作ってからどう変わったかとかお話しします。

デザインガイドラインとは

カタカナで書くとあまりにダサい。
ロゴとか、ホームページとかいろいろあると思いますが、今回はCSSフレームワークのDocみたいなもの、と捉えてください。

どんなものを作成したか

Notionで簡易的なDocをつくりました。

Screen Shot 2020-02-06 at 13.21.29.png

デザイナーがいなくても、画面デザインを実装できるような仕組みを作れるのは、コンポーネント化したときの強みだと思います。

これをつくることで、細かい修正の無駄なコミュニケーションがなくなります。

つくりかた

  1. Notionでてきとーにカード型の並びのドキュメントを作成します。
    Screen Shot 2020-02-06 at 13.56.00.png

  2. 新規ドキュメントを作成して、見出し、利用方法、画像、コードを記載します。
    Screen Shot 2020-02-06 at 13.21.29.png

  3. URLを発行して共有します。

作成してから変わったこと

  • よりコンポーネント化を意識したデザインと実装をするようになった
  • ドキュメントを作成、掲載することを意識するのでコードがもっと整うようになった
  • class名をコンポーネント単位でつけることを意識できるようになった

正直、現状エンジニア2人、デザイナー1人でやってるのでそこまで成果がでている印象はないですが（画面コーディングもわたしが担当してるので）、チーム規模が大きくなればなるほどこういうものが必要になる印象です。

無駄なコミュニケーションを無くしてサービスをよりよくできるように取り組めたらと思います。

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

日付別

タグ一覧