【flexbox】space-betweenで最後の行を左から揃える

# 【flexbox】space-betweenで最後の行を左から揃える

メモアプリを作る中で、カード型アイテムの配置に関して色々調べたのでメモ。
対処方法は、前提条件によって変わってきます。

今回は、
「カラム数が決まっていない（画面幅で増減）」
「アイテム幅は固定」
「幅を狭めても最低限の余白を確保、それ以上は均等に配置」
となっています。

最後にspace-between関係ないですが、
「カラム数：固定」
「アイテム幅：可変」
「余白：固定」
のバージョンもメモとして残しています。

## 困った

数日前にflexboxを知った私は、何でもかんでもflexboxで対処しようとしていました。

アプリでメモを増やしていくと、

【厳選8個】フロントエンド開発でちょっとした時に役立つCSS Tips集

Webアプリのフロントエンド開発をしているときによくあるケースのCSSのTips集です。

私はWebエンジニアをしていてCSSもたまに書くのですがたまにしかないため、「こういう時どうやってCSSを書けばいいんだっけ？」となることが多く、都度、調べています。

自分の備忘録的な目的でまとめていますが、もし同じような問題に遭遇してやり方がわからないという方のお役に立てれば幸いです。

**環境**

以下の環境で確認をしています。(2020年9月時点で最新版の環境です。)

– macOS Catalina ：10.15.6
– Chrome：85.0.4183.102

## 1. 一行に収まらない長さのテキストの場合は「…」で切る

**やりたいこと**

**解決策**

テキストのスタイルに`overflow-x: h

slimの長い構文を途中で改行する

Railsアプリ開発時にslimを使ってhtmlを書いているときに、このような長い構文がある。これを改行する方法。

“`slim
.card-toolbar
a.btn.btn-primary.status-editable data-confirm=”全ユーザーの編集権限を「編集可」に変更します。よろしいですか？” style=”font-size: 15px; margin: 0 10px;” href=”#{toggle_status_editable_admins_supplier_company_path(supplier_company_code: model.code, supplier_company_id: model.id)}” role=”button” 編集可
a.btn.btn-danger.status-editable data-confirm=”全ユーザーの編集権限を「編集可」に変更します。よろしいですか？” style=”font-size: 15px; margin: 0 10px;” href=”#{toggle_status_not

Safariのオートコンプリートを防ぐ方法

　
# iphone Safariでの入力補完に関して
　Webサイトの入力欄において、iphoneのSafariで入力補完が行われ、想定した値が入力できないという話がありました。
この入力補完の厄介な点は以下の通り
・on/offはユーザのデバイスの設定でしか制御できない
・autocomplete=”off”を無視して入力補完してくる
・近くのテキストから候補を予測して、値を入力してくる

下記のサイトを参考にしたがどうやらサイト側で入力補完自体を無効にする手段はないっぽいということが分かりました。
・[Safariのオートコンプリートの不思議な挙動](https://qiita.com/ymrl/items/bd24b9850a5a403b4c0d)
・[Safariのパスワードの自動入力を防ごうとしたら結構めんどくさかった話](https://www.aipacommander.com/entry/2016/09/09/092351)
・[iPhone Safari の「連絡先を自動入力」機能が賢くなりすぎて、電話番号じゃない入力欄に電話番号を自動補完しちゃうから困った話](h

【初心者でもわかる】画像の上に半透明の背景と文字を乗せる方法

#どうも7noteです。画像の上に文字を表示させたい時の方法

こんな感じに写真の上に文字が乗ったデザインを作ります。


## 作り方

作り方は、画像と文字をくくる親要素を作り、position指定で好きな位置に文字をもってきます。

“`index.html

画像の名前が入るよ

“`

“`style.css
.onimg {
width: 300px; /* 画像の横幅（自由に指定） */
position: relative; /* 帯の表示位置の基準とする */
}

.onimg img {
width: 100%;
}

.onimg p {
col

PHP の閉じタグは書かないらしい

PHPのみのファイルを書く場合は、閉じタグは書かない方がバグが起きにくいらしいです。
参考→https://www.php.net/manual/ja/language.basic-syntax.phptags.php

htmlに挿入する場合は必要になります。

また、echoの場合も省略する書き方があるようです。

“`example.php


//どちらも同じ動きをする
“`

見出し要素（h1~h6）とセクショニングコンテンツの関係

# 概要
見出し要素とセクショニングコンテンツについて細かい部分を毎回忘れるので記憶定着のためにまとめる。
それとまた忘れても大丈夫なように標準へのリンク集の役割も兼ねて。

「セクショニングコンテンツとセクショニングルートの要素どれがどれだっけ」
「h1ってどこで使って良いんだっけ？」
「h1って一つのHTML文書の中に複数存在してても良いの？」
「h1がないのにh2使って良いの？」

みたいに思ったら読む文章です。
ただし、再確認の趣旨が強いため、わかる人にしかわからない文章になってるかも。

# 参考

参考にするのはもちろんこちらのHTML5 Living Standard。
英語：[HTML Standard – WhatWG](https://html.spec.whatwg.org/multipage/)
日本語：[HTML Standard 日本語訳](https://momdo.github.io/html/)

ありがたいことに日本語訳をされてる方がいるので利用させていただきます:pray:
この記事執筆時点（2020/09/12）で（英語/日本語共に）最終更新日は

ExcelからMarkdownのtableをコピペで変換するWebツール「MarkDown Convert」

Markdownの表を簡単に変換するWebツールをご紹介します。
QiitaでMarkdownの表を作成する場合などに大変便利です。

ツールやエディタなどむずかしい方法を使わずに
コピペするだけの方法です。

# Webツール「MarkDown Convert」で変換

Markdown表変換ツール – MarkDown Convert
https://markdown-convert.com/ja/tool/table

Excelで作成したデータを左側に貼り付けて、
メニューのExcelを選択すると右側にMarkdownの表が生成されます。とっても簡単です。


メニューを選択すると表のテキストを右寄せ／中央寄せ／左寄せにすることが可能です。


Excelからサクッと表を作りたい時に重宝する方法です。
お役

知らなかった便利そうなショートカットキー

コピー＆ペースト等は使用していたけど…
もっと便利なショートカットキーを利用していくべきだと思い、自分用にまとめておきます。

* **⌘command + F**
ページ内検索
ひらいてるページ内に指定のキーワードがあるか簡単に調べられる

* **⌘command + tab**
起動中アプリケーションの切り替え

* **control + tab**
複数開いているブラウザタブの切り替え

* **⌘command + W**
開いているウィンドウを閉じる。（現在のタブ）

* **⌘command + T**
新規タブ作成

###テキスト入力系
* **control ＋ K：**カーソルの右側の文字を全て削除する

* **control ＋ H：**カーソルの左側の文字を削除する

* **control ＋ A：**カーソルを行頭（左側）に移動する

* **control ＋ E：**カーソルを行末（右側）に移動する

* **control ＋ P：**カーソルを一行上に

* **control ＋ N：**カーソルを一行下に

* **control ＋

ExcelからHTMLのtableをコピペで変換するWebツール「Excel to Table」

Excelで作成したデータから
HTMLのtableを生成する方法をご紹介します。

ツールやエディタなどむずかしい方法を使わずに
コピペするだけです。

# Excel to Tableにコピペする

Excel to TableというWebツールにExcelデータをコピペするだけ。

Excel to Table | Excel表からHTMLテーブルへ一発変換 | すぐに使える便利なWEBツール | Tech-Unlimited
https://tech-unlimited.com/exceltable.html


こちらのツールの素晴らしいところは、1行目のtdをthにしたり、
左から1番目のtdをthに変換できるところです。簡単すぎて感動です。

お役に立てたらうれしいです！

関連記事
ExcelからMarkdownのtableをコピペで変換するWebツール「MarkDown Convert」 – Qiita
https://qiit

idとclassの違い

## そもそもid、classとはなにか…

1ページで何度も同じ要素が出てくる際にid・classを用いてピンポイントで個別に要素を指定することができる。

**idは#でclassは.で表す**

##実際の使用例

“`html

CSSの入門

“`

というHTMLに対して

“`css

#title {
color: red;
}
.description {
color: blue;
}
“`

このように指定ができる。

一見、idとclassは同じ役割に見て取れるが、その役割は明確に異なっている。

##それぞれの役割

* **class：**同じclass名を1ページ内で何度でも使える
（種別名を割り当てるイメージ）

* **id：**同じid名は1ページ内で1度しか使えない。
（固有の名前を割り当てるイメージ）

CSSの指定は：class
JavaScriptで操作する時には：id
というのが基本となる。

packsファイルの.jsに記載したのに反応しない

【概要】
—————————————-
1.結論

2.どのように使うか

3.なぜjsファイルに書き込まなかったのか

4.ここから学んだこと

1.結論
—————————————-
直にhtml.erbファイルで”script”を記述しscript内にjavascript言語を記載する！

2.どのように使うか
—————————————-
任意のhtml.erb内で

“`ruby:****.html.erb

“`
と記載してJavascriptを記載するだけです！
注意点としてapplication.html.erbで
<%=yiled%>を使用してヘッダーフッダーを適用している場合は反映させる順番に注意です。
HTMLが読み込まれるよりも前にJavascriptを適用させてしまうとブ

日本のエリア・県名 ローマ字表記

Webサイトやプログラムで日本の地名をローマ字表記する場合、
スペルを間違っていると困るのでリファレンスをメモしておきます。

#日本のエリア ローマ字表記

|番号|地名|ふりがな|ローマ字表記|
|:—-|:—-|:—-|:—-|
|1|北海道|ほっかいどう|Hokkaido|
|2|東北|とうほく|Tohoku|
|3|関東|かんとう|Kanto|
|4|中部|ちゅうぶ|Chubu
|5|近畿|きんき|Kinki|
|6|中国|ちゅうごく|Chugoku|
|7|四国|しこく|Shikoku|
|8|九州|きゅうしゅう|Kyushu|
|9|沖縄|おきなわ|Okinawa|

## HTML

“`HTML:HTML
選択してください北海道東北関東HTML、CSSの実践の書き方

BEMとSMACSSを組み合わせる
※Sassを覚えたらSassも取り入れる

#【BEM】
“`
{Block}__{Element}
{Block}-{Modifier}
{Block}__{Element}-{Modifier}
“`

—– 例 —–

“`
.archiveItem {
margin-bottom: 20px;
}
.archiveItem__inner {
display: flex;
padding: 10px;
}
.archiveItem__thumb {
margin-right: 20px;
}
“`

#【SMACSS】

– Base
– Layout
– Module
– State
– Theme

—– 例 —–

“`
body {}
html {}

/*———- Layout ———-*/

.l-header {}
.l-footer {}
.l-main {}
.l-sidebar {}

/*———- Module ——-

元記事を表示

jQueryプラグインでオリジナルのダイアログを表示する方法

#デフォルトで表示
特にカスタマイズせず、confirm()で表示すると下記のような表示になります。
OK/キャンセルの2択だけ選択させたい場合であれば、初期ダイアログで事足りますが、
ボタンや選択肢を追加したい場合、カスタマイズする必要があります。

あと、個人的に初期デフォルトだとIPが表示されてかっこ悪い印象を持ちます:sweat_smile:
このあと、カスタマイズする方法を説明します。

## 準備
オリジナルのダイアログを表示するにはjQuery UIのDialogプラグインを用います。
jQuery UIに必要なファイルは下記3つになります。

+ jQueryのJavaScriptライブラリ
+ jQuery UIのJavaScriptライブラリ
+ jQuery UI用のCSSテーマファイル

“`