レスポンシブ設計　キホンの基本　part2~flex-wrap: wrap;

February 4, 2020, 10:33 am

≫ Next: 固定幅の親要素の子要素を横幅100%にするCSS

≪ Previous: CSSのみで表示をコントロールする時に使える便利な記法

前回はレスポンシブのための一歩目をやりました⤵︎
https://qiita.com/zakaryo/items/ee0a799f4d1bb61f2517

今回は折り返しについてやっていきます。

いざdisplayをflexにし横並びにすることができたとしても、

そのままだと子要素のコンテンツが増えたときに、延々と詰め込まれてしまいうことになります。

こんな感じに。

style.css

.container{display:flex;}.box{width:300px;height:300px;margin:10px5px;}

Image may be NSFW.
Clik here to view.

本来300x300の正方形を並べたいのに、画面いっぱいに詰め込まれ縮んでしまいます。

そこで親要素にflex-wrap:wrap;を指定してみましょう。

style.css

.container{display:flex;flex-wrap:wrap;}.box{width:300px;height:300px;margin:10px5px;}

そうするとこうなります。
Image may be NSFW.
Clik here to view.

このように無理につめこまれるのではなくて、width:300px;が適用され

はみ出る分は一段下に落とされます。

さらに親要素にmax-widthを指定してあげれば１段に何個の子要素を入れるかを決めることができます。

style.css

.container{display:flex;flex-wrap:wrap;max-width:700px;}.box{width:300px;height:300px;margin:10px5px;}

Image may be NSFW.
Clik here to view.

実際は下に子要素の数分続いています。

以上のようにするとflexboxにおいて折り返しができるのではないでしょうか。

↧

固定幅の親要素の子要素を横幅100%にするCSS

February 4, 2020, 3:17 pm

≫ Next: Jenkinsの成果物HTMLにCSSを適用する

≪ Previous: レスポンシブ設計　キホンの基本　part2~flex-wrap: wrap;

子要素をブラウザ横幅100%表示するCSSです。
レスポンシブデザインでコンテンツが固定幅、画像は横幅100%という場面で
多く使うためmixinで登録しておくと便利です。

デモ

See the Pen OJVLZLv by harumi-sato (@harumi-sato) on CodePen.

コード

横幅をブラウザ幅に設定=100vw
左右のmarginを-50vwで計算している。
（子の数値に影響されずスマートな解決方法ですね！Image may be NSFW.
Clik here to view. :grinning: ）

SCSS

//@include fullsize@mixinfullsize{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;}.contents{width:600px;//固定幅margin:0auto;background:lightgreen;}.child{@includefullsize;img{width:100%;height:auto;}}

HTML

<divclass="contents"><p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p><divclass="child"><imgsrc="//via.placeholder.com/350x150"alt=""></div><p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p></div>

まとめ

-50vwでマイナスmarginを設定するため、
子要素の幅に影響されず横幅100%に指定できる。

↧

Jenkinsの成果物HTMLにCSSを適用する

February 4, 2020, 9:28 pm

≫ Next: 初心者によるプログラミング学習ログ 230日目

≪ Previous: 固定幅の親要素の子要素を横幅100%にするCSS

はじめに

Jenkinsのビルド結果を確認するためにHTMLを成果物として登録したはいいものの、インラインで定義したCSSが適用されない…
という状況に遭遇したのでメモ

原因

JenkinsはContent Security Policy(CSP)のデフォルト設定をキツめにしているようです。以下がデフォルト設定です。

sandbox;default-src'none';img-src'self';style-src'self';

CSSは自ドメインのファイルのみ許可されていて、インラインでの実行は許可されていません。

解決方法

解決方法としては以下の2つが考えられますが、今回は後者を選択しました。

デフォルト設定を変更し、インラインで実行できるようにする
デフォルト設定に従う(CSSを表示できる状態に変更する)
- CSSをファイル化して、Jenkinsと同ドメイン配下に配置
- HTMLは上記CSSファイルを読み込む

Jenkinsはユーザが静的コンテンツを配置するための仕組みを用意していますので、そこにCSSファイルを配置します。

例として、$JENKINS_HOME/userContent/assets/css/test.cssに配置した場合、https://[任意のドメイン]/jenkins/userContent/assets/css/test.cssでアクセス可能となります。

あとはHTMLでCSSファイルを読み込むようにすれば完了です。

...
<linkrel="stylesheet"href="/jenkins/userContent/assets/css/test.css">
...

終わりに

今回は、

成果物のHTMLはJenkins上でのみ閲覧
自作のHTML

という前提条件だったのでCSPを変更せずに解決できましたが、大体の場合はCSPを変更する必要があると思います。その場合は、以下のように設定を変更して対応できるかと思います。
JenkinsのClover pluginを利用したカバレッジレポートページにCSSが適用されない

参考リンク

↧

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

February 5, 2020, 3:03 am

≫ Next: Prettierとstylelintで保存するときに自動整形する

≪ Previous: Jenkinsの成果物HTMLにCSSを適用する

100日チャレンジの230日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

230日目は

おはようございます
230日目
・udemyで、css＋javascript講座
・webサイト部分的模写#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) February 4, 2020

↧

Prettierとstylelintで保存するときに自動整形する

February 5, 2020, 3:44 am

≫ Next: Next.jsでCSSを読み込む方法

≪ Previous: 初心者によるプログラミング学習ログ 230日目

概要

CSSの記述をPrettierとstylelintで保存するときに自動整形できるようにします。
最小限の設定です。
プロパティの並びはアルファベット順にします。

手順

インストールと設定ファイル作成

npm i -D stylelint stylelint-config-recommendedでインストール
npm i -D prettier stylelint-config-prettier@7.0.0 stylelint-prettierでインストール
バージョンを指定しないとstylelint-plusとの組み合わせ時に動作しないため
参考
npm i -D stylelint-order stylelint-config-recess-orderでインストール
ルートディレクトリに.stylelintrc.jsonファイルを作成し、中身を記述↓

.stylelintrc.json

{"extends":["stylelint-config-recommended","stylelint-config-recess-order","stylelint-prettier/recommended"]}

package.jsonにscriptを追加

package.json

"scripts":{"lint:css":"stylelint --fix ./**/*.css"}

VScodeにExtensionを追加

インストールするExtensionstylelint-plus
setting.jsonを開く
下記を追加

setting.json

{"css.validate":false,"scss.validate":false,"stylelint.autoFixOnSave":true,"[css]":{"editor.formatOnSave":false},"[scss]":{"editor.formatOnSave":false}}

これで保存時に自動で整形されます。

↧

Next.jsでCSSを読み込む方法

February 5, 2020, 5:31 am

≫ Next: IFRAMEにコンテンツをフィットさせるには

≪ Previous: Prettierとstylelintで保存するときに自動整形する

Next.jsでCSSを読み込むときは、Headを定義しlinkタグにて読み込む

以下のような感じ

import React from "react";
import Header from "../includes/header";
import Head from "next/head";

const MainLayout = props => {
  return (
    <>
      <Head>
        <title>My Awesome app</title>
        <link
          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
          rel="stylesheet"
        />
        <link
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
          crossorigin="anonymous"
        />
        <link href="#" rel="stylesheet" />
      </Head>
      <Header /> {props.children}
    </>
  );
};

export default MainLayout;

↧

IFRAMEにコンテンツをフィットさせるには

February 5, 2020, 7:27 am

≫ Next: htmlとcssの雛形

≪ Previous: Next.jsでCSSを読み込む方法

固定サイズのHTMLを、それよりも小さいサイズのIFRAMEに縮小して表示したかったので、その対処方法です。

課題

たとえば1440px X 1000pxの大きさのHTMLを幅800pxのIFRAMEに表示します。

解決方法

index.html

<!DOCTYPE html><htmllang="ja"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"crossorigin="anonymous"><linkrel="stylesheet"href="default.css"></head><body><divid="wrapper"><h1>Resize 1440px X 1000px iframe to width 800px</h1><iframeid="iframe"src="iframe-content.html"></iframe></div><ahref="iframe-content.html"target="_blank">iframe-content.html</a></body><script src="https://code.jquery.com/jquery-3.4.1.min.js"integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script><script src="default.js"></script></html>

default.css

body{text-align:center;}#wrapper{margin:0auto0auto;overflow:hidden;width:800px;}#iframe{height:1000px;width:1440px;}

default.js

(function(window,document,$){letiframe=$('#iframe');letwrapper=iframe.parent();letwidth=wrapper.width();letratio=width/iframe.width();console.log(`Ratio: ${ratio}`);// IFRAME自体は読み込みページの大きさにCSSで適用している。// それを#wrapperのサイズにスケールインする。// https://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframeiframe.css('-ms-transform',`scale(${ratio})`).css('-moz-transform',`scale(${ratio})`).css('-o-transform',`scale(${ratio})`).css('-webkit-transform',`scale(${ratio})`).css('transform',`scale(${ratio})`).css('-ms-transform-origin','0 0').css('-moz-transform-origin','0 0').css('-o-transform-origin','0 0').css('-webkit-transform-origin','0 0').css('transform-origin','0 0');// #iframeのひとつ上のラッパー#wrapperの高さを同じ倍率で変更する。// これをしないとうまくもともとのIFRAMEの高さのままになる。wrapper.height(wrapper.height()*ratio);})(window,window.document,window.jQuery);

ポイント

同じ倍率で高さも変える必要もあるので、JavaScriptで対応します。
参考サイトにある通り、CSSで縮小します。
IFRAMEのサイズは読み込んでいるコンテンツのサイズと同じにしておく。
IFRAMEをラッパーで囲みます。CSSで指定したサイズの領域が取られているのでラッパーのdivで高さを調整しています。
面倒だったのでjQueryを使用。

demo

参考サイト

How can I scale the content of an iframe?

↧

htmlとcssの雛形

February 5, 2020, 6:29 am

≫ Next: HTML+CSSコーディングの言語化

≪ Previous: IFRAMEにコンテンツをフィットさせるには

自分用のメモです．

最初のページ

home.html

<!DOCTYPE html><html><head><linkrel="stylesheet"href="home.css"></head><body><h2id="home_title">機能一覧</h2><form><buttonclass="btn-flat-logo">機能１</button></form><form><buttonclass="btn-flat-logo">機能２</button></form></body></html>

home.css

h2#home_title{color:#505050;/*文字色*/padding:0.5em;/*文字周りの余白*/display:inline-block;/*おまじない*/line-height:1.3;/*行高*/background:#dbebf8;/*背景色*/vertical-align:middle;border-radius:25px0px0px25px;/*左側の角を丸く*/}h2#home_title:before{content:'●';color:white;margin-right:8px;}.btn-flat-logo{position:relative;display:inline-block;font-weight:bold;font-size:1.0em;padding:10px30px;margin:10px30px;text-decoration:none;color:#FFF;background:#00bcd4;transition:.2s;border-radius:25px25px25px25px;}.btn-flat-logo:hover{background:#1ec7bb;}

機能１の入力フォーム

func1.html

<!DOCTYPE html><html><head><linkrel="stylesheet"href="func1.css"></head><body><h2id="func1_title">機能１</h2><divclass="box26"><spanclass="box-title">機能説明</span><p>機能１では製品とその製品情報を指定することで，データベース中から指定した情報を検索しデータを整形して出力する．
      </p></div><table><pclass="form-items">製品名</p><tr><td><inputclass="textarea"type="text"></td></tr></table><div><aclass="form-items">詳細設定</a><buttonclass="btn-change">＋</button></div><table><tr><td><inputclass="textarea"type="tel"></td><td><buttonclass="btn-change">ー</button></td></tr><tr><td><inputclass="textarea"type="tel"></td><td><buttonclass="btn-change">ー</button></td></tr><tr><td><inputclass="textarea"type="tel"></td><td><buttonclass="btn-change">ー</button></td></tr></table><buttonid="button-search"class="simple_square_btn6">検索
    </button><div></div><buttonid="button-back"class="btn-open">戻る
    </button></body></html>

func1.css

body{font-family:"Avenir Next";}h2#func1_title:first-letter{font-size:1.5em;color:#7172ac;}.box26{position:relative;margin:2em0;padding:1em1em;width:20%;border:solid3px#95ccff;border-radius:8px;}.box26.box-title{position:absolute;display:inline-block;top:-13px;left:10px;padding:09px;line-height:1;font-size:18px;background:#FFF;color:#95ccff;font-weight:bold;}.box26p{font-size:12px;margin:0;padding:0;}.textarea{/* width: 50%; 親要素いっぱい広げる */padding:10px15px;/*ボックスを大きくする*/font-size:16px;border-radius:3px;/*ボックス角の丸み*/border:2pxsolid#ddd;/*枠線*/box-sizing:border-box;/*横幅の解釈をpadding, borderまでとする*/}table{border-collapse:separate;border-spacing:10px;}.form-items{color:#2b546a;font-weight:bold;margin:0;}.form-items:before{content:'●';color:#2b546a;margin-right:8px;}.btn-change{display:inline-block;position:relative;box-sizing:border-box;text-decoration:none;width:30px;height:30px;padding:5px;border-radius:50%;text-align:center;font-weight:bold;box-shadow:inset02px0pxrgba(255,255,255,0.25),inset0-2px0pxrgba(0,0,0,0.18);transition:.2s;}.btn-change:hover{box-shadow:none;}.btn-change:active{-webkit-transform:translateY(1px);transform:translateY(1px);box-shadow:002pxrgba(0,0,0,0.35);border-bottom:none;}.center-obj{text-align:center;}.simple_square_btn6{left:30px;display:block;position:relative;width:160px;padding:0.8em;text-align:center;text-decoration:none;color:white;background:#0bc8b6;border-radius:30px;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;font-weight:bold;font-size:12px;}.simple_square_btn6:hover{cursor:pointer;text-decoration:none;-webkit-animation:simple_square_btn60.5sboth;-moz-animation:simple_square_btn60.5sboth;animation:simple_square_btn60.5sboth;}@-webkit-keyframessimple_square_btn6{0%{-webkit-transform:scale(1);transform:scale(1);}100%{-webkit-transform:scale(1.1);transform:scale(1.1);}}@-moz-keyframessimple_square_btn6{0%{-webkit-transform:scale(1);transform:scale(1);}100%{-webkit-transform:scale(1.1);transform:scale(1.1);}}@keyframessimple_square_btn6{0%{-webkit-transform:scale(1);transform:scale(1);}100%{-webkit-transform:scale(1.1);transform:scale(1.1);}}.btn-open{display:inline-block;top:50px;/* left: 200px; */left:0;width:50px;height:35px;text-align:center;background-color:#9ec34b;font-size:10px;border-radius:10px;color:#FFF;text-decoration:none;font-weight:bold;border:2pxsolid#9ec34b;position:relative;overflow:hidden;z-index:1;}.btn-open:after{width:100%;height:0;content:"";position:absolute;top:50%;left:50%;background:#FFF;opacity:0;transform:translateX(-50%)translateY(-50%)rotate(45deg);transition:.2s;z-index:-1;}.btn-open:hover{color:#9ec34b;}.btn-open:hover:after{height:240%;opacity:1;}.btn-open:active:after{height:340%;opacity:1;}

機能１の結果

result1.html

<!DOCTYPE html><html><head><linkrel="stylesheet"href="result1.css"></head><body><table><pid="product-title">製品名</p><pid="product-name">プリンター</p></table><table><pid="spec-title">スペック一覧</p><tr><tdclass="form-items">電力</td><td>&nbsp;&nbsp;&nbsp;&nbsp;2.0</td></tr><tr><tdclass="form-items">最大消費電力</td><td>&nbsp;&nbsp;&nbsp;&nbsp;2.0</td></tr><tr><tdclass="form-items">大きさ</td><td>&nbsp;&nbsp;&nbsp;&nbsp;2.0</td></tr></table><buttonid="button-back"class="btn-open">戻る
    </button></body></html>

result1.css

body{font-family:"Avenir Next";}p#product-title{max-width:70px;font-size:20px;font-weight:bold;/*線の種類（点線）2px 線色*/border-bottom:dashed2px#6594e0;}p#product-name{margin:100;font-size:20px;color:#2b546a;}p#spec-title{max-width:140px;font-size:20px;font-weight:bold;/*線の種類（点線）2px 線色*/border-bottom:dashed2px#6594e0;}.form-items{color:#2b546a;font-weight:bold;margin:0;}.form-items:before{content:'●';color:#2b546a;margin-right:8px;}.btn-open{display:inline-block;top:50px;left:0;width:50px;height:35px;text-align:center;background-color:#9ec34b;font-size:10px;border-radius:10px;color:#FFF;text-decoration:none;font-weight:bold;border:2pxsolid#9ec34b;position:relative;overflow:hidden;z-index:1;}.btn-open:after{width:100%;height:0;content:"";position:absolute;top:50%;left:50%;background:#FFF;opacity:0;transform:translateX(-50%)translateY(-50%)rotate(45deg);transition:.2s;z-index:-1;}.btn-open:hover{color:#9ec34b;}.btn-open:hover:after{height:240%;opacity:1;}.btn-open:active:after{height:340%;opacity:1;}

↧

HTML+CSSコーディングの言語化

February 5, 2020, 7:27 pm

≫ Next: スクロールしても背景固定

≪ Previous: htmlとcssの雛形

はじめに

HTML＋CSSコーディングにおける制作者の思考や判断、アプローチ、コード化に至るまでの流れなどを分解し、コードの状態なども含めてそれぞれを短い言葉で言語化しました。

以下のような効果が期待できます。

HTMLとCSSを使っておこなってきた事を客観視・再認識できる
始原的な動機を把握することで、手法を別の視点で捉えられるようになる
認識合わせや熟練度確認に利用し、制作時のコミュニケーションを円滑にする

場合によっては、ぼんやりと捉えていたことや、詰まりやすかったポイントなどがハッキリと認識できるようになるかもしれません。

言語化の概要

まずは、全体像が分かる概要図を掲載します。
この記事は、以下のステップと各項目について順に説明するものになります。

Image may be NSFW.
Clik here to view.

前提事項・環境について

言語化するにあたって前提となる考え方や環境について記載します。

HTMLとCSSの役割
- HTML→ データに意味を持たせるためにマークアップした、情報表示の基礎となるもの
- CSS→ HTMLでマークアップされた情報を、よりよく伝達するために装飾や機能を持たせるためのもの
業務フロー
- コーディングをおこなう以前にデザインやWFなどを作成する
  - これらは、Webページという納品物をつくるための「完成予想図」と言える
  - 完成予想図は成果物がプロジェクトの目的を達成できるかどうかを事前に検討・確認するためのもの
- 業務上ではコーディングから開始するケースは稀であるため、何らかの「図」や「絵」が存在しているものとする
コーディングのゴールと目的
- 何らかの「完成予想図」に求められる視覚情報や動きや働きをコードに変換しつくすこと
- 情報や機能などを、Webページとして利用者に提供可能な状態にすること

コーディング行動の流れ

ここから、HTML＋CSSコーディングの言語化に関する具体的な説明です。

コーディングを制作者（人間）中心に捉えると、コード化までには一連の流れがある事に気づきます。
最終的にコードを記述するまでの流れを分解すると以下のようになります。

Image may be NSFW.
Clik here to view.

制作者はこれらを一瞬、もしくは短時間で連続的に流れるようにおこなっているため、恐らく普段はこのような事を意識する事は少なく、また、実際には全てが直線的な訳ではありません。

例えば「完成予想図」を確認した直後であれば、頭の中でHTML構造を組み立てながら、CSSの設計のために共通部分を見つけようとするかもしれません。
HTMLコードを記述している時であれば、同時にCSSの実装を考えるでしょうし、CSSコードの記述中にHTMLの修正に移る事もあります。
また、その視野についても、「広い範囲」と「狭い範囲」の両視点を切り替えながら進める事が多く、本来の思考や行動は放射状や螺旋、ジグザグといった形に近くなります。
上記のステップは、こういった行動を分解・細分化し、直線に組み替えたときの基本の流れとなります。

以下、このステップに準じて説明を記載します。

【STEP-1】関心の対象

「関心の対象」とは、制作者が心の焦点をあてたもの、意識したものです。
すべての思考や行動は、対象が定まることから始まります。

その対象は、例えば完成予想図を確認した時の大きな面や塊、その中の小さな部品など様々です。ほかにも、既にコード化し終わったものであったり、何らかの補助用classそのもの、あるいは何らかのアニメーションや動きといったものが対象になることもあります。
こういったものを全く意識することなく「文字列を入力し、それから対象を考える」といったことは、少なくとも業務効率を意識している制作者であればおこなわないはずです。

ここから先、「対象」と記載しているものは、常に制作者の「関心の対象」を意味します。

【STEP-2】対象への欲求

対象が定まると、次に「それをどうしたいか」という欲求が発生します。
コーディングにおける対象への欲求は、大きく以下の4つに分類できます。

Image may be NSFW.
Clik here to view.

1. 新たな部品や役割・働きをつくりたい: まだコード化されていないものを新たに作成したいという欲求

2. 類似した部品や役割・働きをつくりたい: 既に存在している対象の「似て非なるもの」を新たに作りたいという欲求

3. 対象を変化させたい: 既に存在している対象を何らかの方法によって変化させたいという欲求

4. 現状の問題をよりよく改善したい: 既に存在している対象の問題を修正したり、改善したいという欲求

これらはどれか1つだけの事もあれば複数同時に発生する事もありえます。
例えば、何かを新規作成したいと思ったと同時に、類似したものが必要になると判断した場合や、新たなものを作るには、既存で影響を受ける対象の問題解決が必要。といったようにです。

いずれにしても、コード化に向けて次の「確認・想定」に移行します。

【STEP-3】確認・想定

「対象への欲求」が発生したら、次はそれを実現するために以下の内容を判定・確認・予測します。

Image may be NSFW.
Clik here to view.

以下、それぞれについての詳細説明です。

A-1. 規模・粒度

「規模・粒度」は、対象の表示面積や範囲、コードの行数・情報量といった、それそのものの規模感です。

Image may be NSFW.
Clik here to view.

最終の表示が「面」を持つスクリーンである場合、そこに映し出されるものには「面積」や「範囲」といったものが伴います。
制作者は、大きいものなら他への影響、小さいものなら受ける影響があるのを知っており、また、HTMLコードの行数、情報量が必ずしも表示面積に比例するとは限らない事も知っているため、これらを含めた「規模・粒度」を意識しています。

HTMLコードの記述前、つまり「完成予想図」の特定箇所に関心を寄せている段階であるなら、その対象をどれくらいのコード量で再現できるかを予測・想定するでしょうし、記述後のHTMLコードが対象の場合は、それはどこで区切られたもので、どんな表示になるのか。といったことを、レンダリング結果と照らし合わせながら確認することになります。

Image may be NSFW.
Clik here to view.

もし既に、規模感を定義したルールを使っているなら、上記の語句や判定・認識は別のものになるかもしれません。

A-2. 構造

「構造」は、HTMLコードのネスト状態を指します。

Image may be NSFW.
Clik here to view.

HTMLには文書構造のほかに、コード自体のネスト構造が存在します。
対象である視覚情報をはじめてコードに置き換えていく時には、CSSを想定しながらHTMLのネスト構造を設計する事になるでしょう。HTMLを記述した後のスタイリング段階では、CSSセレクタの記述のために構造の把握が必要となります。
これらも、HTMLとCSSを扱う制作者であれば自然と判定・認識・予測しているものであり、その状態はいずれか1つ、もしくは複数にあてはまる場合もあります。

以下は、コードの状態を言語化したものの説明です。

Image may be NSFW.
Clik here to view.

A-3. CSS読解

「CSS読解」は、現在のCSSのセレクタやプロパティがどのような状態になっているのかを把握することです。

Image may be NSFW.
Clik here to view.

CSS読解の目的は、そのコードを記述したのが自分自身であれば「再度確認」といった意味になるでしょう。
他者が作成したコードの場合、かつ情報が何も無いところからのスタートであれば、影響がありそうな箇所のすべての状況を調査・把握して「仕様のマップ」を頭の中に作成する事になります。
いずれにしても、既存コードの影響や状況把握のための行動で、必要に応じて随時実行することになります。

A-4. JS読解

「JS読解」は、現在のJavaScriptのコードがどのような状態になっているのかを把握することです。

Image may be NSFW.
Clik here to view.

JS読解の目的は、JavaScriptのコードが「何に対してどのような影響を与えているか」を把握するためです。
直接的なアニメーションをおこなっているのか、classを追加する事でCSS側で何かを変化させているのか、直接スタイルを付与しているのか。などを確認することになります。
JSコードの作成に関する言語化はおこないませんが、リファクタリングの時などにJSコードが関わっている場合は、必ず確認することになるでしょう。

【STEP-4】コード化のための思考

対象の状況確認や想定が終われば、コード化のために以下のような思考（設計）が必要となります。

このうち上段の2つ（B群）は「【STEP-2】対象に対する欲求」で挙げた、「類似した部品や役割・働きをつくりたい」と「対象を変化させたい」の2つにそれぞれ対応し、下段の3つ（C群）は共通しておこなう思考内容となります。

Image may be NSFW.
Clik here to view.

以下、1つずつ個別に説明します。

B-1. 類似複製

「類似複製」は、とある部品や役割、働きの「似て非なるもの」が必要となった時に検討する内容です。

Image may be NSFW.
Clik here to view.

Webページやサイトには、類似した部品が多数必要となることも少なくありません。例えば「形状は同じだが色が異なる」「形状のみが少しが異なる」といったケースです。
対象の「バリエーション」が必要な状況であり、どのように実装するのかを検討する事になります。
Image may be NSFW.
Clik here to view.

これらの表示変化は、以下の二つのアプローチによって実現可能です。

別名複製

「別名複製」は、複製元に類似した見栄え・役割・働きのものを新たに作成するために、複製した対象に対して単一の別の英単語や文字列（※多くの場合はシングルクラス）を与え、似て非なるものを作成する方法です。
複製物の名前を、複製元の名前と類似させる事によって、制作者は二つの関連性を予測できるようになりますが、機械からすれば全く別のものになるため、CSSプロパティは同一のものや似たコードが多くなります。

HTML例

※似て非なる部品を作成した場合

複製元：<a class="btn-primary">
複製物：<a class="btn-secondary">

文字列追加

「文字列追加」も類似品を作成する行動です。
複製対象に新たな単語や文字列を追加（※多くの場合はマルチクラス）することによって、対象のCSSプロパティを追加・キャンセル・上書きし、意図した表示を完成させる方法です。

対象そのものに直接語句を追加する方法と、親要素や先祖要素に語句を追加して間接的に対象をスタイリングする方法があり、併用するパターンも合わせれば合計3つのパターンがあります。

A. 「直接」のHTML例

.btnが複製元で、複製したものを似て非なる見栄えにする場合。直接btn-largeという文字列を付与している。

複製元：<a class="btn">
複製物：<a class="btn btn-large">

B. 「間接」のHTML例

.innerがスタイリングの対象の場合。対象の親要素にbox-pattern1という文字列を追加している。

複製元：<div class="box"><div class="inner"> … </div></div>
複製物：<div class="box box-pattern1"><div class="inner"> … </div></div>

C. 「直接・間接の両方」のHTML例

※.boxと.innerがスタイリングの対象の場合。HTMLはBと同じ（CSSで目的の状態にしている）

複製元：<div class="box"><div class="inner"> … </div></div>
複製物：<div class="box box-pattern1"><div class="inner"> … </div></div>

B-2. 状態変化

「状態変化」は、対象に何らかの変化を与えたい場合に検討する内容となります。

Image may be NSFW.
Clik here to view.

Webページやサイトは、人の行動（クリックやタップ、スクロールなど）と共に利用されます。
このため、その動作に対する色や形状の変化、アニメーションなど、行動に対する反応も必要とされる事が多いと言えます。

※ JavaScriptなどの外部プログラムによって直接対象を操作する場合もありますが、こちらはプログラムの領域となるため、CSSによる変化の場合を対象として説明します。

Image may be NSFW.
Clik here to view.

効果付与

「効果付与」は、目的の対象を変化させるために、対象そのもの、もしくは対象の親や先祖要素に語句を追加する方法です。
アプローチそのものは「類似複製」の「語句追加」と同一であり、パターンも同様に以下の3つがあります。※ これらは静的に追加（記述）することもあれば、JavaScriptなどによって動的に追加する事もあります。

A. 「直接」のHTML例

.boxを直接変化させたい場合。直接is-closeという文字列を付与している。

変化前：<div class="box"> … </div>
変化後：<div class="box is-close"> … </div>

B. 「間接」のHTML例

変化させたい対象が、内部のpの場合。親要素にis-activeの文字列が付与され、それを起点にセレクタを記述するパターン。

変化前：<div class="text_box"><p>テキスト</p></div>
変化後：<div class="text_box is-active"><p>テキスト</p></div>

C. 「直接・間接の両方」のHTML例

変化させたい対象が、.boxと.inner両方の場合。is-fixedの文字列を加え、両方をスタリング。

変化前：<div class="box"><div class="inner"> … </div></div>
変化後：<div class="box is-fixed"><div class="inner"> … </div></div>

「効果付与」と「文字列追加」との違い

状態変化の「効果付与」と、類似複製の「文字列追加」は、HTML要素に対する命名のアプローチが同じです。

「効果付与」の欲求は対象に状態変化を与えることであり、「類似複製」の「文字列追加」は、似て非なるものを作成したいという欲求が起点となっています。二つの違いを言い表すと、「表示要素が増える前提であったかどうか」と言えます。

Image may be NSFW.
Clik here to view.

「効果付与」した後のものを、単独かつ別用途で再利用する事になれば「類似複製」とも言えますし、「効果付与」したものにCSSプロパティを書き足していけば、変化に伴うバリエーションを作成した事にもなりえます。
つまり「元々どう望んでいたか」は後でどうとでも変容し、曖昧になりがちで、変容しても画面上にエラーが表示される訳ではありません。

どのように使っているのかは、HTML上からは命名から予測するしかなく、実装方法はCSSコードを見る事でしか判断できません。この2つを区分けして制御したりルール化するかどうか。といった事も制作者の意思によるものと言えます。

C-1. 活用方法

「活用方法」とは、その対象を全体の中でどのように扱いたいのか、制作者の意思を指します。

Image may be NSFW.
Clik here to view.

Webページの表示部品は、ページ間で再利用するものや、その場所でしか使用しないもの、その場でしか使用しないと思っていても後々再利用の必要が発生した。などの様々なケースがあります。
このため、その対象を成果物（Webページ・サイト）の全域でどのように活用するのかを定めることが必要になります。

HTMLタグそのままの状態とclass属性で名前を与えたものは、どちらも「仕様上は」すべて共用として扱える状態になりますが、制作者がその仕様通りに望んでいるかどうかは別の話です。
HTMLとCSSの仕様は自由度が高く「絶対に表示されない」といった制約が少ないため、制作者の意思による制御が必要となります。

C-2. 命名判断

「命名判断」は、対象のHTMLタグに独自の名前を与えるかどうかの判断を指します。

Image may be NSFW.
Clik here to view.

名前を与えると、何も命名しなかった時と比べCSSからその要素を指定するのが容易になり、さらに、その単語は制作者の予測・判断のための「道しるべ」としての役割も兼用することになります。

対象の表示を考える時、「どんな名前を与えるか」の前に「名前を与えるかどうか」を先に判断しており、「無名」の場合は、何らかの判断により「命名しない事を選んだ」という事になります。

C-3. 特定方法

「特定方法」は、CSSのセレクタの記述方法を指します。
最終的なセレクタ記述は様々な意図や意思、複数の影響を踏まえて総合的に決定する事になります。

Image may be NSFW.
Clik here to view.

公共的: 「公共的」なアプローチとは、第一セレクタにその対象を指定することによってCSSの詳細度を低く抑える方法です。命名の法則によって「活用方法」を「一意」に扱うという意図がある場合は、「公共的」な記述をしたとしても「一意」になります。（BEMなどの単語連結規則による命名一意化がこれにあたります）

詳細的: 「詳細的」なアプローチとは、対象のCSSの詳細度を上げるため、もしくは他の要素へのスタイリングとの影響を分離するために、子セレクタや子孫セレクタを利用する方法です。

条件的: 「条件的」なアプローチとは、隣接セレクタや以降のセレクタ、記述の順番などのセレクタ、クラスや属性のマッチなど、HTMLの記述条件をセレクタに利用する方法です。

局所的: 「局所的」なアプローチとは、HTMLのid属性による指定方法です。; HTMLのid属性の名前は仕様上ページの中に1つと定められていますが、実際のブラウザレンダリングでは複数のid属性を利用していても意図した通りに表示される事も多くあります。しかし、与えられた役割そのものと、役割違いの状態をソフトウェアが柔軟にレンダリングする事とは別の話といえます。 id属性をCSSのセレクタに使用するかどうかはその環境やプロジェクトのルール次第となります。

【STEP-5】コードの記述

最終的に物理的なファイルにコードを記述します。
大抵の場合はデータ表示の基礎となるHTMLコードを記述する所からはじまります。

Webページとしてスクリーンに表示するにはHTMLとCSSの両方のコードが必要であり、この二つは同時には記述できないため、実際には「確認・想定」と「コード化のための思考」を行き来しながら記述する事になります。

実際にどのようなコードを記述するのかは制作者の役割であり、この記事の目的とは異なるため割愛します。

さいごに

この試みは「CSS設計手法に振り回されない、何か不変的なものは無いのか」という疑問からはじまりました。
そのための方法として選んだのが今回の「コーディングを短い言葉で言い表してみよう」というものです。2019年初頭に完成した原文には用例と思考パターンによる裏付け情報もあります（※こちらはまた機会があれば公開します）

そして、これらの情報を背景として構築した「HTML＋CSSコーディングの標準化」のノウハウがあるのですが、一連の情報を「Ultimate Coding」と題して、今後順次、情報を公開していく予定です。

最後になりましたが、この記事の内容に対し、仕事として貴重なレビューを下さった次の方々に感謝いたします。

レビュワー（※五十音順）

酒井優　@glatyou - Twitter
深沢幸治郎　@kojirofukazawa - Twitter
YAT @yat8823jp - Twitter

以下は、レビュー頂いた内容の一部です。

普段やっている事が言語化されている
頭の中で起こっている事と遜色なし
初学者と読み合わせして反応を見れば、どこで詰まっているかが分かる
書き方を変えれば教育用に使えるのでは
コーディングを公平かつ中立的な視点で捉えたコンテンツ
（原文の状態では）図が無く、情報がぱっと頭に入ってこない
※ ⇒ これを受け、今回、図を追加して公開

クレジット

Ultimate Coding

設計・考案／構築／記事投稿
- croco_works - Twitter
技術検証／設計パートナー
- wildwest_kazya - Twitter

↧

スクロールしても背景固定

February 5, 2020, 10:52 pm

≫ Next: z-indexでわけがわからなくなった君へ

≪ Previous: HTML+CSSコーディングの言語化

参考サイト
 参考デモ

html

<divclass="fixed-bg bg01"><h1>見出し</h1></div><divclass="scroll-bg bg-color01"><p>コンテンツ</p></div><divclass="fixed-bg bg02"><h1>見出し</h1></div><divclass="scroll-bg bg-color02"><p>コンテンツ</p></div>

背景画像をつけるセクションに「background-attachment: fixed」を設定する

css

.fixed-bg{min-height:100vh;background-attachment:fixed;background-size:cover;background-position:center;}.bg01{background-image:url(../images/bg01.jpg);}.bg02{background-image:url(../images/bg02.jpg);}

↧

z-indexでわけがわからなくなった君へ

February 6, 2020, 12:53 am

≫ Next: 初心者によるプログラミング学習ログ 231日目

≪ Previous: スクロールしても背景固定

HTMLとかCSSとかの基本はこれや

・後に記述してるやつほど表にくる

以下みたいにすると、試してないけど、たぶん画面は青くなるんちゃうかなって思うねん

<style>.a,.b{position:fixedtop:0;left:0;width:100%;height:100%;}.a{background-color:red;}.b{background-color:blue;}</style><divclass="a"></div><divclass="b"></div>

ようするに、モーダル出したり、画面にカーテンみたいな効果かけたりしたいとき、上に乗りたい要素の後に記述すれば、そもそもz-indexは使う必要ないねん　z-index: 999 とか z-index: 9999 とかは不毛や

↧

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

February 6, 2020, 3:13 am

≫ Next: 27歳、未経験ですあっ・・・（察し）

≪ Previous: z-indexでわけがわからなくなった君へ

100日チャレンジの231日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。

100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。

231日目は

おはようございます
231日目
・udemyで、css+javascript講座
・webサイト部分的模写#早起きチャレンジ #駆け出しエンジニアと繋がりたい #100DaysOfCode
— ぱぺまぺ@webエンジニアを目指したい社畜 (@yudapinokio) February 5, 2020

↧

27歳、未経験ですあっ・・・（察し）

February 6, 2020, 8:17 am

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

≪ Previous: 初心者によるプログラミング学習ログ 231日目

はじめに

なんだこのオッサン！？（驚愕）

近年半導体業界が不景気になり業界丸ごとタイタニック並みに沈没しました。

請負先も「クビだクビだクビだ」ということでお仕事なくなってしまったので

学生時代に興味があったWebエンジニアとして働きたく転職活動を始めました。

インプットした事を忘れないようにする為Qiitaでサボらずアウトプットして行きます。

あっ! 遅れましたがQiita初投稿になります。

今後は生暖かく見守もってください!

本日のアウトプット

divタグとfloatの仕組みを理解する。

divタグに関して

divタグはブロック要素のため縦並びになる。
親要素内の子要素は抱合され、また親要素どうしは互いを抱合しない。
Image may be NSFW.
Clik here to view.

index.html

<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>  float  </title><linkrel="stylesheet"href="style.css"></head><body><divclass="parent1"><divclass ="child1"></div></div><divclass="parent2"><divclass ="child2"></div></div></body></html>

style.css

.parent1{width:100px;height:100px;background-color:black;}.child1{width:50px;height:50px;background-color:blue;}.parent2{width:100px;height:100px;background-color:red;}.child2{width:50px;height:50px;background-color:yellow;}

floatに関して

divタグはブロック要素のため縦並びになるが横並びにする際はfloat:left;を使用する。
親要素を横並びに変更してみる(.parent1,2にfloat: left)。
Image may be NSFW.
Clik here to view.

style.css

.parent1{width:100px;height:100px;background-color:black;float:left;}.child1{width:50px;height:50px;background-color:blue;}.parent2{width:100px;height:100px;background-color:red;float:left;}.child2{width:50px;height:50px;background-color:yellow;}

子要素に(.child1,2にfloat: right)させた場合floatの範囲は親要素内である。
Image may be NSFW.
Clik here to view.

style.css

.parent1{width:100px;height:100px;background-color:black;float:left;}.child1{width:50px;height:50px;background-color:blue;float:right;}.parent2{width:100px;height:100px;background-color:red;float:left;}.child2{width:50px;height:50px;background-color:yellow;float:right;}

おわりに

今回はfloatのみでしたが次はfloatの解除方法が
複数あるのでどれを使えば良いかを調べて行きます。

↧

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

February 6, 2020, 7:29 pm

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

≪ Previous: 27歳、未経験ですあっ・・・（察し）

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

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

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

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

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

どんなものを作成したか

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

Image may be NSFW.
Clik here to view.

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

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

つくりかた

Notionでてきとーにカード型の並びのドキュメントを作成します。
Image may be NSFW.
Clik here to view.
新規ドキュメントを作成して、見出し、利用方法、画像、コードを記載します。
Image may be NSFW.
Clik here to view.
URLを発行して共有します。

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

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

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

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

↧

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

February 6, 2020, 9:46 pm

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

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

対象読者

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

つまり

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

Image may be NSFW.
Clik here to view.

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

楽天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 --><iframeclass="sp-header"frameborder="0"scrolling="no"src="https://www.rakuten.ne.jp/gold/myshop/iframe/sp-header.html"width="100%"frameborder="0"=""></iframe=""><linkrel="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を読み込んでいます。¹

GOLDで作るもの

iframeに画像を表示してみる

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

sp-header.html

<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>myshop sp header</title><linkrel="stylesheet"href="css/sp-header.css"></head><bodyclass="sp-header"><div><div><!-- ショップバナー --><ahref="https://www.rakuten.ne.jp/gold/myshop/"target="_top"><imgsrc="https://www.rakuten.ne.jp/gold/myshop/shop-banner/myshop.jpg"></a><!-- キャッシュレス還元バナー --><ahref="https://event.rakuten.co.jp/campaign/cashless/"target="_top"><imgsrc="https://www.rakuten.ne.jp/gold/myshop/shop-banner/cashless.jpg"></a></div></div></body></html>

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

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

Image may be NSFW.
Clik here to view.

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

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

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

Image may be NSFW.
Clik here to view.

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

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

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

Image may be NSFW.
Clik here to view.

sp-header.css

@importurl(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-bodyimg{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 の上余白を修正する

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

↧

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

February 6, 2020, 6:39 pm

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

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

経緯

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

「うわっ文章、枠からはみ出ててもうてるやん。」
「とりあえず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の文章が単語の途中で折り返されているから微妙
Image may be NSFW.
Clik here to view.

NG2

▼Bが折り返されてない、却下
Image may be NSFW.
Clik here to view.

NG3

▼枠に収まっているけど、文章だけが折り返されず、はみ出ているIEめ（EdgeとIEでのみ再現）
Image may be NSFW.
Clik here to view.

各ブラウザでのチェック

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

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;

・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;を入れておく。
的な感じでいいんじゃないかなと思う。

以上。

↧

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

February 6, 2020, 8:35 pm

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

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

この記事について

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

環境構築

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

https://qiita.com/C3REVE/items/273646ad028e98758e70

HTML

CSS

◆CSSの擬似要素と擬似クラスとは

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

↧

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

February 7, 2020, 12:13 am

≫ Next: Bulmaのアルファベット順クラス一覧

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

概要

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

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

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

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

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

HTML側のソースコード

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

CSS側のソースコード

.Sample1{position:relative;cursor:pointer;display:inline-block;}.Sample1p{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:15pxsolidtransparent;border-top:15pxsolid#000;margin-left:-15px;}.Sample1:hover.description1{display:inline-block;top:-70px;left:-30px;}.Sample1{position:relative;cursor:pointer;display:inline-block;}.tooltip1p{margin:0;padding:0;}

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

HTML側のソースコード

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

CSS側のソースコード

.Sample2{position:relative;cursor:pointer;display:inline-block;}.Sample2p{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:15pxsolidtransparent;border-top:15pxsolid#000;margin-left:-15px;transform:rotateZ(180deg);}.Sample2:hover.description2{display:inline-block;top:30px;left:0px;}

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

HTML側のソースコード

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

CSS側のソースコード

.Sample3{position:relative;cursor:pointer;display:inline-block;}.Sample3p{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:15pxsolidtransparent;border-top:15pxsolid#000;margin-left:-15px;transform:rotateZ(90deg);}.Sample3:hover.description3{display:inline-block;top:0px;left:80px;}

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

HTML側のソースコード

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

CSS側のソースコード

.Sample4{position:relative;cursor:pointer;display:inline-block;}.Sample4p{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:15pxsolidtransparent;border-top:15pxsolid#000;margin-left:-15px;transform:rotateZ(270deg);}.Sample4:hover.description4{display:inline-block;top:0px;left:-130px;}

↧

Bulmaのアルファベット順クラス一覧

February 7, 2020, 12:51 am

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

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

Bulma歴3日目のド素人による自分用メモです。

動機

Bulmaのドキュメントはとても分かりやすいのですが、カテゴリ別に整頓してあるのが微妙に使いづらいなぁと思っています。例えばtitleクラスの使い方を確認したいと思ったときに、「どのカテゴリを見ればいいんだっけ？Components？ちがった。Elementだった」ということがあるのでちょっと辛い。一覧になっているとページ内検索で一発でたどり着けて少し楽なので、リンクのリストを作りました。

最初は機能ごとに整理しようと思いましたが、面倒になったのでアルファベット順に並べました。また、全部網羅出来ているわけでもありませんのでご注意ください。例えばmodal,modal-contentなどの親子関係になるようなクラスについてはmodalだけしか記載していません。

クラス一覧(Bulma 0.8.0)

クラス名	メモ
box	枠・影つきのコンテナ
breadcrumb	パンくずリスト
button	ボタン
card	カード
checkbox	チェックボックス
columns	列レイアウト
container	汎用コンテナ
content	コンテンツ用のコンテナ。`<UL>`等のHTMLタグを使うときはこれで囲む
control	フォーム要素用のコンテナ。`<input>`を使うときはこれで囲む
delete	×ボタン
dropdown	ドロップダウンメニュー
field	フォーム要素用のコンテナ。`<label>`と`<input>`をまとめて囲む
file	ファイル選択用ボタン
footer	フッタ
has-addons	フォーム用。inputの右にボタン付ける等の用途に
has-addons-centered
has-addons-right
has-arrow-separator	breadcrumb用
has-background-<type>	背景色の指定
has-bullet-separator	breadcrumb用
has-dot-separator	breadcrumb用
has-fixed-size	`<textarea>`リサイズ禁止
has-icon-<position>	input内アイコンの位置
has-name	File用。ファイル名表示するプレースホルダ
has-ratio	エレメントのアスペクト比指定
has-succeeds-separator	breadcrumb用
has-text-<color>	文字色の指定
has-text-<position>	文字のアラインメント指定
has-text-weight-<weight>	文字サイズ指定
help	フォーム用。inputの下に緑や赤文字でヒント出すやつ
hero	ヒーローヘッダー
icon	アイコン
image	画像。指定のサイズに収めたり、丸の形にくり抜いたり
input	フォーム用。文字入力用
is-<color>	要素のカラーバリエーションを指定する。 black/danger/dark/info/light/link/primary/success/warning/white
is-<size>	Title用。要素の文字の大きさを指定する(H1～H6に対応)
is-<x>	Columns用。要素の幅を指定する。 is-3 → (3/12 = 25%) is-one-fifths → (1/5 = 20%) その他にis-half/is-fullがある
is-<x>by<y>	画像の表示アスペクト比を指定
is-<x>x<y>	画像の表示サイズを指定
is-active	要素がアクティブであることを示す
is-ancestor	Tiles用
is-block	display:block
is-bold
is-bordered	テーブル用。枠をつける
is-boxed	Fileで使用すると大きいボタンになる。Tabで使用するとタブがクラシックスタイルとなる
is-capitalized	先頭を大文字に
is-centered	中央寄せ
is-child	Tile用
is-clearfix
is-clipped
is-delete	Tags用。×ボタン追加
is-desktop	レスポンシブデザイン: デスクトップ向け要素
is-expanded	フォーム用。inputのサイズを最大化
is-family-*	フォントファミリーの指定
is-flex	display:flex
is-focused	フォーカスが当たっているときの見た目に固定する
is-fullhd	Container用
is-fullheight-with-navbar
is-fullwidth
is-gapless	Columns用。Column間の間隔を削除
is-grouped	フォーム用。要素のグルーピング(横に整列する)
is-grouped-centered
is-grouped-multiline
is-grouped-right
is-hidden	要素を非表示(display: none)
is-horizontal	フォーム用。複数のFieldを横に並べる
is-hoverable	マウスホバー時に反応するようにする
is-hovered	Button/TextArea用。マウスホバー時の見た目に固定する
is-inline	display:inline
is-inline-block	display:inline-block
is-inline-flex	display:inline-flex
is-invisible	要素を非表示(visibility: hidden)
is-italic	文字をイタリック体にする
is-large	要素を大きくする(効果はコンポーネントによる)
is-left
is-loading	Button用。スピナーを表示
is-lower-alpha	`<ol>`要素の連番を小文字のアルファベットにする
is-lower-roman	`<ol>`要素の連番を小文字のローマ数字にする
is-lowercase	文字列を小文字にする
is-marginless	マージンを消去する
is-medium	要素を標準と大きいの中間程度の大きさにする(効果はコンポーネントによる)
is-mobile	レスポンシブデザイン: モバイル向け要素
is-multiline	Columns用。複数行にわたってColumnを並べる
is-multiple	Select用。複数選択可能にする
is-narrow	Column用。幅を縮めてもよいカラムであることを指定
is-narrow-<target>	レスポンシブデザイン: ターゲット毎のis-narrow設定
is-normal	要素を標準の大きさにする
is-offset-*	Column用。カラムの開始位置を指定
is-outlined	ボタン用。枠線に色を付ける
is-overlay
is-paddingless	パディングを消去する
is-parent	Tiles用。要素が親タイルであることを示す
is-pulled-left
is-pulled-right
is-radiusless	border-radiusを0にする
is-relative	position: relative
is-right
is-rounded	コンポーネントの角を丸める
is-selected	Table用。指定した行を選択した状態にする
is-shadowless	box-shadow: none
is-size-<x>	文字サイズを指定する(1～7)
is-small	要素を小さくする(効果はコンポーネントによる)
is-spaced	Title/Navbar用。スペースを空ける
is-sr-only
is-static	Button/Input用。枠と背景を消す。readonly属性と合わせて固定フィールドとして使える
is-srtiped	Table用。行が交互にしましま
is-toggle	Tabs用。タブがラジオボタン風になる
is-toggle-rounded	Tabs用。タブのボタンが丸くなる
is-transparent
is-unselectable	テキストを選択できないようにする
is-up	Dropdown用。ドロップダウンの表示をボタンの上側にする
is-upper-alpha	`<ol>`要素の連番を大文字のアルファベットにする
is-upper-roman	`<ol>`要素の連番を大文字のローマ数字にする
is-uppercase	大文字にする
is-variable
is-vcentered	Columns用。Columnを上下中央揃えにする
is-widescreen
label	フォームのラベル
level	汎用の列レイアウトコンテナ。コンテンツが左と右に分かれる(e.g. Navbar)場合向け
list	リストコンポーネント ※ドキュメントから到達できない
media	Qiitaの記事作成者欄やコメント欄みたいなの
menu	メニュー(階層付きインデックス的な)
message	タイトル付メッセージボックス。あるいはToastのようなもの
modal	モーダルダイアログ(Javascript実装は各自で)
navbar	ナビゲーションバー
notification	タイトルなしメッセージボックス
number	ドキュメントなし。数値を強調したい場合に
pagination	ページ番号
panel	Listの上位互換のような高機能コンポーネント
progress	プログレスバー
radio	フォームのラジオボタン
section	ページ分割用のレイアウトコンテナ
select	フォームのセレクトボックス
table	テーブル
tabs	タブバー
tags	(分類用)タグコンポーネント
textarea	フォームのテキストエリア
tile	タイルレイアウト用のコンテナ
title	タイトル・見出し用

↧

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

February 7, 2020, 5:25 pm

≫ Next: 初心者によるプログラミング学習ログ 232日目

≪ Previous: Bulmaのアルファベット順クラス一覧

最近Laravelはじめました。

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

（完成形）
Image may be NSFW.
Clik here to view.

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

<divclass="container"><divclass="row justify-content-center"><divclass="col-md-12"><divclass="card">

        // 略

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

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

/resources/views/menu.blade.php

<divclass="col-md-2"><divclass="card"><divclass="card-header"><iclass="fas fa-th-list"></i></i> MENU</div><divclass="card-body"><divclass="panel panel-default"><ulclass="nav nav-pills nav-stacked"style="display:block;"><li><iclass="fas fa-user-alt"></i><ahref="#">XXXXXXXX</a></li><li><iclass="fas fa-user-alt"></i><ahref="#">XXXXXXXX</a></li><li><iclass="fas fa-user-alt"></i><ahref="#">XXXXXXXX</a></li></ul></div></div></div></div>

3. home.blade.phpを修正

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

menu.blade.php

<divclass="container"><divclass="row justify-content-center"><!-- left menu -->
        @include('menu')

        <divclass="col-md-10"><divclass="card">

        // 略

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

.col-md-2.card-body{padding:0;}.col-md-2ul{padding:0;position:relative;}.col-md-2ulli{line-height:1.8;padding:0.5em0.5em0.5em0.7em;list-style-type:none!important;background:-webkit-linear-gradient(top,#whitesmoke0%,whitesmoke100%);background:linear-gradient(tobottom,whitesmoke0%,#dadada100%);text-shadow:1px1px1pxwhitesmoke;color:black;}

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

↧

デモ

コード

まとめ

はじめに

原因

解決方法

終わりに

参考リンク

概要

手順

インストールと設定ファイル作成

package.jsonにscriptを追加

VScodeにExtensionを追加

Next.jsでCSSを読み込むときは、Headを定義しlinkタグにて読み込む

課題

解決方法

ポイント

参考サイト

最初のページ

home.html

home.css

機能１の入力フォーム

func1.html

func1.css

機能１の結果

result1.html

result1.css

はじめに

言語化の概要

前提事項・環境について

コーディング行動の流れ

【STEP-1】 関心の対象

【STEP-2】 対象への欲求

【STEP-3】 確認・想定

A-1. 規模・粒度

A-2. 構造

A-3. CSS読解

A-4. JS読解

【STEP-4】 コード化のための思考

B-1. 類似複製

別名複製

HTML例

文字列追加

A. 「直接」のHTML例

B. 「間接」のHTML例

C. 「直接・間接の両方」のHTML例

B-2. 状態変化

効果付与

A. 「直接」のHTML例

B. 「間接」のHTML例

C. 「直接・間接の両方」のHTML例

「効果付与」と「文字列追加」との違い

C-1. 活用方法

C-2. 命名判断

C-3. 特定方法

【STEP-5】 コードの記述

さいごに

レビュワー（※五十音順）

クレジット

背景画像をつけるセクションに「background-attachment: fixed」を設定する

100日チャレンジの231日目

はじめに

本日のアウトプット

divタグとfloatの仕組みを理解する。

divタグに関して

floatに関して

おわりに

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

どんなものを作成したか

つくりかた

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

対象読者

つまり

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

説明しないこと

手順

前提

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

GOLD以外に編集するもの

GOLDで作るもの

【STEP-1】関心の対象

【STEP-2】対象への欲求

【STEP-3】確認・想定

【STEP-4】コード化のための思考

【STEP-5】コードの記述