投稿日：2019-12-15T23:36:17+09:00

ブログ始めました

プログラミングスクールに通う

TECH::EXPERTを受講し、時の流れに身を任せていたら１週間がいとも簡単に過ぎ去りました。
ブログを書くのも１０年以上ぶりでお目汚し感が物凄いですがご容赦ください。

Qiitaに投稿

ガイドラインに目を通すと価値のある役に立つ記事を書けとのことですがとりあえず最初は無視することに決めました。
「質」よりも「継続」をスローガンにして、できたら誰かの役に立てる記事を投稿していきたいとおもいます。

アウトプット

ツイッターとブログをとりあえず感は否めないものの開設しました。
身の回りの「友人」や「知人」または「過去の自分」の助けになれるような内容を意識してアウトプットに努めていきたいです
そして何よりもコミュニケーション力の最大化が求められている……！！

最後に

もっと凝った編集もできるはずなのでしょうけどこれが精一杯です
１週間に二回は更新したい！！

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-15T22:17:57+09:00

半々人前のフロントエンドエンジニアが成長するために必要だと感じたこと

はじめに

　私は今年の4月から初めてMacを使い始めてプログラミングというものに触れ、今日まで約８ヶ月間勉強をしてきました。
今は、フロントエンドの分野で月に約3本のWeb案件に取り組んでいます。（まだ独り立ちはできていませんが...）
今まで勉強してきて、効率的に勉強を進め最も近道に成長をしていくためにはどうしたらいいのか、自分なりの考えをまとめ、初心を忘れないようにするためにも記事にしたいと思います。

今までやってきたこと

　4~6月前半...pythonチュートリアルを基本1人で学び、わからないところは教えてもらう

　6月前半~9月中旬...初めての案件に参加(バックエンド)

　9月中旬~１０月中旬...フロントエンドの勉強

　~現在...フロントエンドの案件でアウトプット＆お勉強

できるようになったこと（まだまだ未熟ですが...）

Git、Github

html、css

Wordpress

Figma

インフラ、セキュリティ周り（ほんーの少し）

実践してみてよかったこと

pythonチュートリアル→なんとなーくプログラミングの様子がわかり、操作に慣れた

スキルが全くないにも関わらず案件に参加→急成長できた

自分で調べてもわからなかったらためらわずに質問する

習うより慣れろ！

案件に初めて参加させていただいた時にはpythonしか知らず(それもほんの少し)、いきなりDjangoやDocker、Git、Gihubなどを使い、最初はわからないことが多すぎてパンクしそうでした。任せていただいた仕事も私1人の力で終わらせることはできず、いつも先輩に教えてもらってばっかりでした。でも、思ったのは...習うより慣れろ！
自分で勉強を進めるだけでは世界が狭く、モチベーションを保つのも大変です。案件に参加することで先輩方のコードを見ながら勉強することができました。
仕事を振ってもらう→調べる→少しは自己解決→わからないところを教えてもらう→理解する→成長→新たな仕事を振ってもらう、という好循環が生まれ、短期間(?)でいろいろなことができるようになりました。

教えてもらう立場

教えてもらうには受け身ではなく、積極的に動き、教えてもらえるような人になるということが大切だなと思いました。
自己解決できない時には、
1. 現状報告
2. コードを見せる
3. 何をどう改善したいのか
4. 試してみたこと
これらを報告することは絶対必要です。見た目だけ見せられてもどういうコード書いているのか、考えてもらう手間が発生してしまいます。教えてもらうために開発や休憩する時間を奪って教えてもらうので、少しでも手間を減らさなければいけないと感じました。

これから

将来的には、フロントエンドの分野だけではなく、バックエンドの分野も理解できるようになりたいです。
まだまだ勉強しなければならないことはたくさんありますが、少しずつ自分の理解していることをアウトプットする機会が増えていきます。
今まで親切に教えてくださったように自分も教えられるようになりたいです。

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-15T22:02:41+09:00

head要素と関連ファイル

HTMLのhead要素内の記述と、関連ファイルについて毎回調べるのは手間なのでまとめました。

基本

文字コードを指定
html
<meta charset="utf-8" />
IEで標準モードで表示
html
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
viewportの指定
html
<meta name="viewport" content="width=device-width,initial-scale=1" />
ページタイトル
html
<title>任意のタイトル</title>
ページの説明を約100文字以内で記述
html
<meta name="description" content="ページの説明文" />
クローラーにインデックス拒否(拒否時のみ記述)
html
<meta name="robots" content="noindex,nofollow" /> 
URLの正規化
html
<link rel="canonical" href="正規化するURL" />
CSSファイルの読み込み
html
<link rel="stylesheet" href="/css/style.css" />
JavaScriptファイルの読み込み
html
<script src="/js/mian.js"></script>
フィードページのURLを指定
html
<link rel="alternate" type="application/rss+xml" title="フィード" href="フィードのURL" />
分割ページ用のタグ
html
<link rel="prev" href="前のページのURL" />
<link rel="next" href="次のページのURL" />
電話番号やメールアドレスの変換設定
html
<meta name="format-detection" content="email=no,telephone=no,address=no" />
アンドロイドでタブの色を変更する
html
<meta name="theme-color" content="#2c3e50">
アイコン

favicon

ブラウザのタブやブックマーク時のアイコンとして表示される
html
<link rel="icon" href="/favicon.ico">
favicon変換ツール

X Icon editor
ICO converter

apple-touch icon

iPhoneやiPadのsafariや、AndroidでWebサイトをホーム画面に追加した時に表示します。

項目値

サイズ 180px×180px

ファイル名 apple-touch-icon.png

位置ルートフォルダ
html
//光沢あり
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">　

//光沢なし
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/apple-touch-icon.png">

//タッチアイコン用のタイトル半角11文字(全角6文字)まで
<meta name="apple-mobile-web-app-title" content="タイトル半角11文字(全角6文字)まで">
OGP

URLが共有された際に、設定された画像やタイトル・説明文を表示できます。
The Open Graph protocol

共通部分(必須)
html
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
  <meta property="og:title" content="page title">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/">
  <meta property="og:image" content="https://example.com/img/ogp.png">
  <meta property="og:description" content="">
</head>
必須のプロパティ内容

og:title 表示させたいタイトル　省略時はtitleタグの内容になる

og:type トップページは「website」か「blog」、下層ページは「article」

og:url 表示するページのURL(httpsからはじめてパラメータ無しの正規のURL)

og:image 表示する画像のURL(絶対パス)　縦630px×横1200px 未指定の場合はページ内の画像が選ばれる

og:description ページの説明文

共通部分(任意)
html
<meta property="og:site_name" content="site name" >
<meta property="og:email" content="example@example.com" >
<meta property="og:phone_number" content="xxxx-xxxx-xxxx" >
<meta property="og:locale" content="ja_JP" >
<meta property="og:image:secure_url" content="https://exsmple.com/img/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:updated_time" content="2018-04-09T16:43:43+09:00" />
任意のプロパティ内容

og:site_name サイト名

og:email 連絡先を設定

og:phone_number 連絡先を設定

og:locale サポートしている言語を設定　日本語のみの場合「ja_JP」　英語のみの場合は「en_US」

og:image:secure_url WebページがHTTPSを必要とする場合のURL

og:image:type 画像のMIMEタイプ(image/jpeg, image/gif, image/png,等)

og:image:width 画像の幅

og:image:height 画像の高さ

og:updated_time データのアップデートが行われた時刻

Facebook用の記述

FacebookのアプリIDは必須にはなっているが、指定がなくてもOGPとして表示はされる
html
<meta property="fb:app_id" content="[app_id]" />
Facebook for Developers (アプリID登録)

ウェブ管理者向けシェア機能ガイド

Facebook Debugger (FBのログインが必要)

Twitter用の記述
html
//必須
<meta name="twitter:card" content="summary_large_image">

//任意
<meta name="twitter:site" content="@サイト用のTwitterアカウント" />
<meta name="twitter:creator" content="@製作者のTwitterアカウント" />
twitter:cardの値内容

summary 通常のサイズの画像

summary_large_image 大きいサイズの画像

Optimize Tweets with Cards

Twitter Card Validator (Twitterのログインが必要)

画像サイズ

SNS 横幅縦横比

Twitter 300px～4,096px 2:1

Facebook 1,080 px以上 1.91:1

両対応 1200px × 630px 1：1.91

png推奨(jpgも可)

OGP画像シミュレータ

デバッグツール

Twitterのデバッグツール

Card Validator | Twitter Developers

Facebookのデバッグツール

シェアデバッガー
「次のプロパティは必須です: fb:app_id」が表示されても表示はされます。

多言語サイト

hreflang属性

googleは下記は見ていないので、代わりにhreflang属性を使います。
html
<html lang="ja">
hreflang属性は同内容の他言語版を指定するときに使います。
hreflangタグは多言語に対応しているページ全てに記述が必要です。
使用言語が１つだけの場合は「hreflang」の指定は不要です。
html
<link rel="alternate" href="http://ja.example.com/" hreflang="ja" />
<link rel="alternate" href="http://en.example.com/" hreflang="en" />
html
<link rel="alternate" hreflang="ja" href="http://example.com/jp/">
<link rel="alternate" hreflang="en" href="http://example.com/en/">
言語が同じで、地域別にも作る場合はcanonicalが必要です。
例：enとen-ca(カナダ)など
html
<link rel="canonical" href="http://en.example.com/" />
<link rel="alternate" href="http://ja.example.com/" hreflang="ja" />
<link rel="alternate" href="http://en.example.com/" hreflang="en" />
<link rel="alternate" href="http://en-ca.example.com/" hreflang="en-ca" />
言語コード

言語言語コード

日本語 ja

英語 en

フランス語 fr

スペイン語 es

イタリア語 it

ロシア語 ru

中国語 zh

画像以外のファイル

.htaccess

できること

ファイル一覧の拒否

ベーシック認証

エラーページ

デフォルトページ

WWW有無統一

リダイレクト

アクセス制限

ファイル一覧の拒否

.htaccess Editor

manifest.json
html
<link rel="manifest" href="/manifest.json">
例
manifest.json
{
  "name": "app name",
  "short_name": "short name",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "browser",
  "Scope": "/",
  "start_url": "/",
  "icons": [{
      "src": "img/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}
Web App Manifest Generator

sitemap.xml

設置場所：http://www.example.com/sitemap.xml

sitemap xml generator

sitemap xml editor

robots.txt

設置場所：http://www.example.com/robots.txt
headへの記述は不要

robots.txtメーカー

命令必須/任意内容

User-agent 必須命令を与えるユーザーエージェントの名称を記入

Disallow 任意クロールをブロックするディレクトリやページを記入

Allow 任意クロールを許可するディレクトリやページを記入

Sitemap 任意 sitemap.xmlのURLを記入(複数ある場合は複数記入可)

User-agent

例内容

User-agent : * 全てのクローラーが対象

User-agent : Googlebot Googlebotのみ対象

User-agent : Baiduspider 百度のみ対象

DisallowとAllow

例内容

Disallow: / サイト内の全てのページをブロック(/はTOP配下全てを表す)

Disallow: ブロックなし

Disallow: / aaa/bbb.html ページ(/aaa/bbb.html)のみブロック

Disallow : /ccc/ ディレクトリ(/ccc/)配下全てのページをブロック

Allow : /ccc/ddd.html ページ(/ccc/ddd.html)のみクロール許可

humans.txt

http://humanstxt.org/JA/Standard.html
html
<link rel="author" href="humans.txt" />
設置場所：http://www.example.com/humans.txt
設置は任意
書式は自由で人が読めるようになっていれば良いようです。

項目	値
サイズ	180px×180px
ファイル名	apple-touch-icon.png
位置	ルートフォルダ

必須のプロパティ	内容
og:title	表示させたいタイトル　省略時はtitleタグの内容になる
og:type	トップページは「website」か「blog」、下層ページは「article」
og:url	表示するページのURL(httpsからはじめてパラメータ無しの正規のURL)
og:image	表示する画像のURL(絶対パス)　縦630px×横1200px 未指定の場合はページ内の画像が選ばれる
og:description	ページの説明文

任意のプロパティ	内容
og:site_name	サイト名
og:email	連絡先を設定
og:phone_number	連絡先を設定
og:locale	サポートしている言語を設定　日本語のみの場合「ja_JP」　英語のみの場合は「en_US」
og:image:secure_url	WebページがHTTPSを必要とする場合のURL
og:image:type	画像のMIMEタイプ(image/jpeg, image/gif, image/png,等)
og:image:width	画像の幅
og:image:height	画像の高さ
og:updated_time	データのアップデートが行われた時刻

twitter:cardの値	内容
summary	通常のサイズの画像
summary_large_image	大きいサイズの画像

SNS	横幅	縦横比
Twitter	300px～4,096px	2:1
Facebook	1,080 px以上	1.91:1
両対応	1200px × 630px	1：1.91

言語	言語コード
日本語	ja
英語	en
フランス語	fr
スペイン語	es
イタリア語	it
ロシア語	ru
中国語	zh

命令	必須/任意	内容
User-agent	必須	命令を与えるユーザーエージェントの名称を記入
Disallow	任意	クロールをブロックするディレクトリやページを記入
Allow	任意	クロールを許可するディレクトリやページを記入
Sitemap	任意	sitemap.xmlのURLを記入(複数ある場合は複数記入可)

例	内容
User-agent : *	全てのクローラーが対象
User-agent : Googlebot	Googlebotのみ対象
User-agent : Baiduspider	百度のみ対象

例	内容
Disallow: /	サイト内の全てのページをブロック(/はTOP配下全てを表す)
Disallow:	ブロックなし
Disallow: / aaa/bbb.html	ページ(/aaa/bbb.html)のみブロック
Disallow : /ccc/	ディレクトリ(/ccc/)配下全てのページをブロック
Allow : /ccc/ddd.html	ページ(/ccc/ddd.html)のみクロール許可

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-15T20:34:36+09:00

HTMLとCSSでカレーライスを作った

カレーライスを作りました

※スマホではバグりますすみません

See the Pen カレーライス by Thugumi Ishimaru (@thugumi-ishimaru) on CodePen.

どうやって作ったの

この記事ではカレーライスをHTMLとCSSで作ったときのポイントをいくつか抜粋したものを紹介します。
実業務ではきっと役には立ちませんので、
「CSSってこんな表現できるんだな」・「CSS楽しい」と思っていただければ幸いです。

パーツを細かく作る

カレーのカレーによるカレーのためのAtomic Designの記事で言及した、
Atomic Designの考えを元にして作りました。

Atomsの用意

にんじん

じゃがいも

牛肉

切った具材

米

皿

これらをどう作ったか後ほど解説します。
（厳密には米はMoleculesですが、まぁよしとしましょう。）

これらを全て組み合わせることで、カレーライスを完成させました。

では、次に実際によく使ったCSSプロパティを紹介します。

秘伝のカレー3つのスパイス（プロパティ）

今回カレーライスを作るにあたって以下を意識しました。

影

丸みや、曲線の表現

~~逆に言うとこの2点しか抑えてなかった~~

box-shadow：立体感を持たせるスパイス

https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

box-shadowは、要素に対して影をつけることができます。
これによってより立体的なになるように表現します。

じゃがいもの影のグラデーション、人参の棒線、切った具材の影、皿の凹凸等を再現しました。
じゃがいもを例にとってみます。

じゃがいものdivを用意します。
  <div class="jaga"></div>
作成したdivに対して、box-shadowで土感を、
border-radiusでじゃがいも特有の丸み・曲線を表現します。
.jaga {
    width: 300px;
    height: 250px;
    background: #E8CD7F;
    border-radius: 40% 40% 44% 40% / 35% 65% 40% 70%;
    box-shadow: inset 17px -20px 36px 24px rgba(203, 163, 44, 0.7), 
                inset 7px 8px 8px 2px rgba(149, 94, 55, 0.3),
                10px 9px 11px -13px rgba(178, 113, 49, 0.64), 
                inset 31px 0px 96px -21px #B07331;
}
※border-radiusについてはこの後に解説します。

box-shadowは以下の値を設定できます。
box-shadow: {横にズラす値} {縦にズラす値} {ボカす値} {色};
また、insetを指定することで要素の内側に影をつけることができ、
さらにカンマ区切りにすることで上下左右それぞれに異なった影をつけることが可能です。
今回はじゃがいもの内側に影をつけてボカしたかったので、以下を指定しました。
box-shadow: inset 17px -20px 36px 24px rgba(203, 163, 44, 0.7),
            inset 7px 8px 8px 2px rgba(149, 94, 55, 0.3), 
            10px 9px 11px -13px rgba(178, 113, 49, 0.64), 
            inset 31px 0px 96px -21px #B07331;
これで、じゃがいものベースが出来上がりました。

中にじゃがいもの芽を記述して完了です。
（ここでは省略するので、詳細はcodepenをみてください）
https://codepen.io/thugumi-ishimaru/pen/abzvGaq

border-radius：より自然な形にするスパイス

https://developer.mozilla.org/ja/docs/Web/CSS/border-radius

border-radiusは要素の角を丸めるのに使います。
円形や、真四角のボタンを角丸にするために使用することが多いです。
今回はじゃがいもの曲線や、牛の体、切った具材の形等の変形・ご飯のモコモコ感を再現するのに使用しました。
ここでは、切った具材とご飯を例にあげます。

左上・右上・右下・左下の丸みの数値を個別で指定します。
  <div class="ninjin"></div>
  <div class="jaga"></div>
  <div class="niku"></div>
$ninjin: #FF5F00;
$ninjinShadow: #F44A1C;
$jaga: #F2BD38;
$jagaShadow: #CE8117;
$niku: #BE6B21;
$nikuShadow: #882B11;

.ninjin {
  width: 75px;
  height: 100px;
  background: $ninjin;
  border-radius:80% 26px 60px 23px; // 左上80%,左上26px,右下60px,左下23px
  box-shadow: inset -10px 10px 0 $ninjinShadow;
  transform: rotate(95deg);
}

.jaga {
  width: 115px;
  height: 100px;
  background: $jaga;
  border-radius: 80% 76px 70px 33px;// 左上80%,左上76px,右下70px,左下33px
  box-shadow: inset -11px -5px 0 $jagaShadow;
}

.niku {
  width: 97px;
  height: 57px;
  background: $niku;
  border-radius: 70px 26px 80px 23px;// 左上70px,左上26px,右下80px,左下23px
  box-shadow: inset -6px -5px 0 $nikuShadow;
}
この結果がこちらです。
にんじん、じゃがいも、肉それぞれいろんな丸みを持ったものができました。
上記で紹介したbox-shadowを使って影をつけて完了です！

また、丸みのあるdiv同士を重ねることでご飯のもこもこ感を表現します。

まず、ご飯の中央部分とその周りを取り巻くもこもこ用のdivを作ります。
<div class="rice">
  <div class="rice_around">
    <div class="rice_aroundItem rice_aroundItem-1"></div>
    <div class="rice_aroundItem rice_aroundItem-2"></div>
    <div class="rice_aroundItem rice_aroundItem-3"></div>
    <div class="rice_aroundItem rice_aroundItem-4"></div>
    <div class="rice_aroundItem rice_aroundItem-5"></div>
  </div>
</div>
このままではカッピカピの白米です。
インド人もびっくりです。

歯が割れちゃいけないので.rice_aroundItemに対して、border-radius:50%をつけ、丸みを出しご飯を柔らかくします。

あとは、高さ・位置をpositionを駆使して調節・中の盛られている米粒たちを
表現すれば完成です。

mask-image：角がある味（鋭角）をまろやかにするスパイス

mask-imageは要素のマスクレイヤーとして使用する画像の設定を行います。
上記の、「丸みのあるdiv同士を繋げたけど、鋭角が気になる。。。」といったところの解決方法として使用しました。

今回はカレールーの下記枠部分の曲線を表現するのに使いました。

参考にした記事は以下です。
HTML + CSSでリアルな目玉焼きを作る

mask-imageとradial-gradientを使用して、曲線部分を作成しました。

では具体的な作り方です。

まず上記のご飯と同様に丸みのあるdivを用意します。
<div class="roux">  
  <div class="roux_item roux_item-1"></div>
  <div class="roux_item roux_item-2"></div>
  <div class="roux_item roux_item-3"></div>
  <div class="roux_item roux_item-4"></div>
</div>
原始人の肉みたいなのができました。
このままでは、角があり、カクカクしててカレールーには見えません。
トロッと感を出すために、ここでmask-imageとradial-gradientの登場です。

まず、鋭角を隠すために.roux_hideを作成します。
作成した.roux_hideに対して、mask-imageとradial-gradientを設定します。
/*色々省略*/


.roux {
    &_hide {
        background: $roux;
        position: absolute;
        z-index: 2;
        &-1 {
        width: 70px;
        height: 60px;
        -webkit-mask-image: radial-gradient(circle at 50% -170%, rgba(0, 0, 0, 0) 80%, #BB5B2A 80%);
        top: -43px;
        left: 108px;
        transform: rotate(-1deg);
        }
        &-2 {
        width: 70px;
        height: 50px;
        right: -32px;
        top: 92px;
        transform: rotate(85deg);
        -webkit-mask-image: radial-gradient(circle at 50% -180%, rgba(0, 0, 0, 0) 80%, #BB5B2A 80%);
        }
        &-3 {
        width: 60px;
        height: 80px;
        -webkit-mask-image: radial-gradient(circle at 20% -130%, rgba(0, 0, 0, 0) 90%, black 90%);
        transform: rotate(-173deg);
        top: 95%;
        right: 32%;
        }
        &-4 {
        width: 40px;
        height: 80px;
        -webkit-mask-image: radial-gradient(circle at 20% -160%, rgba(0, 0, 0, 0) 90%, black 90%);
        transform: rotate(-93deg);
        top: 150px;
        left: -39px;
        }
    }
}
その結果がこちらです。

mask-imageで作成した要素（.roux_hide）のくり抜きを設定し、radial-gradientで円の中心位置、サイズ、色を指定し透明にくり抜くようにしています。

盛り付け：お母さん「ご飯よーーーーーーー！！！！！」

色々と端折りましたが、ついに盛り付けです。

~~実家のカレーはルーを真上からかけます。~~

1つ1つのパーツをAtomsから作成したので、codepenで作成したもの1つ１つをコピペでペッと貼るだけです。
その後、位置・サイズ調整等を行い、カレーライスの！！！完成です！！！！！！

さいごに

HTMLとCSSだけでカレーライスを作りました。
CSSでお絵かきする時に以下3つを覚えてってください！

box-shadow：影をつけるよ

border-radius：丸みを出してふんわりさせるよ

mask-image（IEは対応してません?）：滑らかな曲線にするよ

Twitterやってます！よかったらフォローしてみてください！

ありがとうございましたー！
カレーアドベントカレンダー引き続きよろしくお願いします。

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-15T18:32:37+09:00

HTMLのtextarea でインデント、アンインデント

HTMLのtextareaでタブを入力すると次のフィールドにフォーカスが移動しますが、そのままタブを入力したい。ついでに複数行選択しているときは、まとめてインデントしたい。更にスペースでのインデント、アンインデントにも対応したい。
ということで、書いてみました。
作ってから IE/Edge で setRangeText がサポートされていない事に気づいたけれど、このまま載せておきます．．．

indent_sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta http-equiv="Content-Type" context="text/html; charset=UTF-8" />
  <meta charset="UTF-8" />
  <title>インデントのサンプル</title>
<script type="text/javascript">
'use strict';

window.onload = function() {
    const onKeyDown = function(ev) {
        if (((ev.keyCode != 9) && (ev.keyCode != 32)) || ev.ctrlKey || ev.altKey) { return true; }
        ev.preventDefault();
        const str = (ev.keyCode == 32) ? " " : "\t", TABWIDTH = 4, CRLF = [13, 10];
        let e = ev.target, start = e.selectionStart, end = e.selectionEnd, sContents = e.value, top = e.scrollTop;
        if ((start == end) || !sContents.includes("\n")) {
            e.setRangeText(str, start, end, "end");
            return;
        }
        if (CRLF.indexOf(sContents.charCodeAt(end - 1)) < 0) {
            for ( ; end < sContents.length; end++) {
                if (CRLF.indexOf(sContents.charCodeAt(end)) >= 0) { break; }
            }
        }
        for ( ; start > 0; start--) {
            if (CRLF.indexOf(sContents.charCodeAt(start - 1)) >= 0) { break; }
        }
        let v = sContents.substring(start, end).split("\n");
        for (let i = 0; i < v.length; i++) {
            if (v[i] == "") { continue; }
            if (!ev.shiftKey) {     //indent
                v[i] = str + v[i];
            } else {                //unindent
                if (str == "\t") {
                    for (let j = 0, c = " "; (j < TABWIDTH) && (c == " "); j++) {
                        c = v[i].substring(0, 1);
                        if ((c == " ") || (j == 0 && c == "\t")) { v[i] = v[i].substring(1); }
                    }
                } else if (v[i].substring(0, 1) == " ") {
                    v[i] = v[i].substring(1);
                }
            }
        }
        e.setRangeText(v.join("\n"), start, end, "select");
    }

    document.getElementById("txtSample").addEventListener("keydown", onKeyDown);
}
</script>
</head>
<body>
<ul>
<li>文字列を未選択でスペース → スペース入力</li>
<li>文字列を未選択でタブ → タブ入力</li>
<li>文字列を選択してスペース → スペースインデント</li>
<li>文字列を選択してタブ → タブインデント</li>
<li>文字列を選択してシフト＋スペース → スペースアンインデント</li>
<li>文字列を選択してシフト＋タブ → タブアンインデント</li>
</ul>
<textarea id="txtSample" rows="30" style="width:100%;resize:none;"></textarea>
</body>
</html>

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-15T17:27:04+09:00

classの小話　（cssが適用されないエラーについて）

はじめに

Haml Sassでありがちなミスについて書いてみました。

実行

次のようなビューファイルがあるとします
.top
  .top__contents
    = image_tag src = "https://image.png", class: ".top__contents__image"
画像表示させるコードです。
画像はリンクで表示させ、imageというクラスを設定してみます。
この画像の大きさを、height: 100px, width: 120pxにするために、次のようなCSSを適用してみます。
.top{
  &__contents{
    &__image{
      height: 100px;
      width:  120px;
    }
  }
}
この状態では、画像は思った通りの大きさになりません。
一見すると問題なさそうですが、実は画像のクラスと、CSSが適用させようとしているクラスが間違っているからです。
最初のコードで、画像のクラスをclass: ".top__contents__image"としていますが、実は最初の.が必要なく、全く別のコードとして認識されています。
正しいコードは次のようになります。
.top
  .top__contents
    = image_tag src = "https://image.png", class: "top__contents__image"
これで狙った画像の大きさになります。
この問題の厄介なところが、他の箇所は問題なくCSSが適用されるので、問題がどこにあるのかがわかりにくいことです。
延々と間違いのないCSSを編集し続けることもありえます。
なので、もしCSSが上手く適用されない時は、クラスが正確にかけているかどうかを確認すると良いかと思います。

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-15T12:50:18+09:00

【Qiita記事】続きを読むもっと詳しく

Qiita記事で挨拶、はじめに、前振り、要約や概要、自分語り、以下略等が長い時に read more
アコーディオンメニュー折りたたみ CSSなし

詳細折りたたみ要素 detales summary タグを使用する。
改行するとはみ出る。

Markdownの何が機能するのか

続きを読む　Read more

text 強調（太字）
text 強調（斜体）
~~text~~ 打ち消し線
code コードのインライン表示
title リンク
画像埋め込み

ruby:qiita.rb puts 'code with syntax'
\
| Left align | Right align | Center align |
|:-----------------|------------------:|:------------------:|
| This | This | This |
| column | column | column |
| will | will | will |
| be | be | be |
| left | right | center |
| aligned | aligned | aligned |

HTMLの何が機能するのか

続きを読む　Read more

A：

a.mp4

B：

b

A B

C D
read_more.html
<details>
<summary>続きを読む</summary>

</details>

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-15T12:50:18+09:00

【Qiita】記事で使える続きを読むもっと詳しく

Qiita記事で挨拶、はじめに、前振り、要約や概要、自分語り、以下略等が長い時に read more
アコーディオンメニュー折りたたみ CSSなし

詳細折りたたみ要素 detales summary タグを使用する。
改行するとはみ出る。

Markdownの何が機能するのか

続きを読む　Read more

text 強調（太字）
text 強調（斜体）
~~text~~ 打ち消し線
code コードのインライン表示
title リンク
画像埋め込み

ruby:qiita.rb puts 'code with syntax'
\
| Left align | Right align | Center align |
|:-----------------|------------------:|:------------------:|
| This | This | This |
| column | column | column |
| will | will | will |
| be | be | be |
| left | right | center |
| aligned | aligned | aligned |

HTMLの何が機能するのか

続きを読む　Read more

A：

a.mp4

B：

b

A B

C D
read_more.html
<details>
<summary>続きを読む</summary>

</details>

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-15T10:40:40+09:00

cssだけでうんち書いてみた

?世界はうんちで満ちている?

大人が1日に排せつするうんちの量は平均して400～500g、これは1年で換算すると142kgに相当します。142kgという重さはパンダ1頭分だそうです。

地球上の人間が1年で排せつするうんちの量は、約2900億kgに相当するとのこと。

これだけ世界を満たしている?！
こりゃcssだけで書く需要ありそうです！???

?cssだけで書く?

といってもhtmlも使わないといけない。
でも、それでも、極力使わない方法で書いてみたぞ！???

See the Pen unchi by petapetapeta (@petapetapeta) on CodePen.

ちょっと僕の形（アイコン画像）からは遠のいてしまった。
だがしかし、ある程度似ているはずだから許してもらいたい。
ポイントは、backgorund-imageのradial-gradient()でゴリ押ししていくことだ！
backgorund-sizeとbackgorund-positionも併用してゴリ押しする！
before afterの疑似要素を使って目と口を添えてやれば、立派なうんちの出来上がりだ！???

?参考?

人は一生でどのくらいのうんちをするのか？をイラストで解説するとこうなる

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-15T02:03:53+09:00

HTMLでGoogleマップを挿入する（２）

OpenStreetMapを表示し、地図上をクリックすると、その場所にマーカが設置されるようなプログラム。また、その際に、マーカーに”1″, “2”, “3”とタイトルが設定される。
html

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>4</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
</head>
<body>
  <div id="map"></div>
  <ul>
    <li>lat: <span id="lat"></span></li>
    <li>lng: <span id="lng"></span></li>
  </ul>

  <script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap" async defer></script>
</body>
</html>

css

    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map {
      height: 80%;
      width: 80%;
    }

javascript

    var num = 1;
    function initMap() {

      // マップの初期化
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: {lat: 35.388276, lng: 139.427348}
      });

      // クリックイベントを追加
     map.addListener('click', function(e) {
        getClickLatLng(e.latLng, map);
        num=num+1;
      });
    }

    function getClickLatLng(lat_lng, map) {

      // 座標を表示
      document.getElementById('lat').textContent = lat_lng.lat();
      document.getElementById('lng').textContent = lat_lng.lng();

      // マーカーを設置
      var marker = new google.maps.Marker({
        position: lat_lng,
        map: map
      });

      var infoWindow = new google.maps.InfoWindow({ // 吹き出しの追加
        content: '<div style="width: 30px;"><p>' + num + '</p>', // 吹き出しに表示する内容
     });
      marker.addListener('mouseover', function() { // マーカーにマウスオーバーしたとき
       infoWindow.open(map, marker); // 吹き出しの表示
     },false);
     marker.addListener('mouseleave', function() { // マウスがマーカーから離れたとき
      infoWindow.close(); // 吹き出しの表示
    },false);
      console.log(num);
      // 座標の中心をずらす
      map.panTo(lat_lng);
    }

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-15T01:59:00+09:00

HTMLでのGoogleマップの挿入の仕方

OpenStreetMapを表示するプログラム

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>1</title>
  </head>

  <body>

    <div id="map" style="width:300px;height:300px"></div>

  <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>
  <script type="text/javascript" src="mymap.js"></script>


      <button onclick="関数名()">ラベル</button>

      <input type="text" name="" placeholder="テキストを入力してください" id="input">

      <canvas id="canvas" width="200" height="200">描画領域</canvas>


      <script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
      <script type="text/javascript">

      $(function(){

      });

      function changeColor() {
      $("").css("");
      }

      function initMap() {
        var latlng = new google.maps.LatLng(35.388276, 139.427348);

        var opt = {
          zoom: 15,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map'), opt);
      }

      </script>

  </body>

</html>

OpenStreetMapを表示し、地図上をクリックすると、その場所の緯度経度が表示されるプログラム

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>2</title>
  </head>

  <body>


    <div id="map" style="width:300px;height:300px"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>
<script type="text/javascript" src="mymap.js"></script>


      <button onclick="関数名()">ラベル</button>

      <input type="text" name="" placeholder="テキストを入力してください" id="input">

      <canvas id="canvas" width="200" height="200">描画領域</canvas>

      <script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
      <script type="text/javascript">

      $(function(){

      });

      function changeColor() {
      $("").css("");
      }

      function initMap() {
        var latlng = new google.maps.LatLng(35.388276, 139.427348);

        var opt = {
          zoom: 15,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map'), opt);

        function click_callback(e) {
          alert(e.latLng.toString());
        }

        map.addListener('click', click_callback);
      }
      </script>

  </body>

</html>

OpenStreetMapを表示し、地図上をクリックすると、その場所を中心とした地図が表示されるプログラム

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>3</title>
  </head>

  <body>

    <div id="map" style="width:300px;height:300px"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap" type="text/javascript"></script>
<script type="text/javascript" src="mymap.js"></script>


      <button onclick="関数名()">ラベル</button>

      <input type="text" name="" placeholder="テキストを入力してください" id="input">

      <canvas id="canvas" width="200" height="200">描画領域</canvas>

      <script type="text/javascript" src="https://ipl.sfc.keio.ac.jp/text/info2-2018-9/lib/jquery-3.3.1.min.js"></script>
      <script type="text/javascript">

      $(function(){

      });

      function changeColor() {
      $("").css("");
      }

      function initMap() {
        var latlng = new google.maps.LatLng(35.388276, 139.427348);

    var opt = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById('map'), opt);

    function click_callback(e) {
      latling = map.setCenter(e.latLng);
    }

    map.addListener('click', click_callback);

  }
      </script>

  </body>

</html>

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-15T01:36:01+09:00

Sassのmixinを用いたレスポンシブ化

Sassを導入した

CSSにも慣れてきたが
ベタベタのベタ書きがあまりにもひどくて目も当てられず

どこに何を書いたか分からなくなる

同じようなスタイルを繰り返し書いている

テーマ全体の色味をコントロールしにくい

とにかく長すぎる

ある程度セクションごとにわけて書いていたが上記のような問題を早めに解決しておきたいと考えてました。

そこでよく聞くSassはどうやらこれらの問題を解決してくれる今をときめくCSSだとか。

Sassには「Sass」と「SCSS」の2種類の記法がありますがSCSSの書き方が一般的との事だったので早速取り入れました。

今回は1番理解が難しかったレスポンシブ化についてフォーカスして書いてみました。

mixinで画面状態を保存して使い回す

SCSSの細かい記法は置いておいて

@mixinでスタイルをあらかじめ作っておいて
@includeで呼び出して使いまわせる

という強力な能力があり
SCSSの入れ子で記述ができるという特徴と組み合わせるとメディアクエリが簡単かつ可読性の高い作り方ができる。

↓イメージ↓
style.scss
@mixin lg {
  //画面サイズがlg以下を意味する記述をする//
}
@mixin md {
  //画面サイズがmd以下を意味する記述をする//
}
@mixin sm {
  //画面サイズがsm以下を意味する記述をする//
}

p{
  color: black;
  @include lg{
    color: red;
    @include md{
      color: blue;
      @include sm{
        color: green;
      }
    }
  }
}
これだけの記述で
lgサイズ以上では黒色
lgサイズ以下では赤色
mdサイズ以下では青色
smサイズ以下では緑色
というレスポンシブ化が可能なのです。

mixinの記述方法

じゃあ肝心のmixin中身はどーすんよって話ですが
まずキーとブレイクポイントの値からなる変数を定義します
style.scss
$breakpoints : (
  "lg":"screen and (max-width:1024px)",
  "md":"screen and (max-width:768px)",
  "sm":"screen and (max-width:480px)"
);
これで
lgのキーは１０２４px以下
mdのキーは７６８px以下
smのキーは４８０px以下
と定義付けができました。

一方mixinはどう書くかというと
style.scss
@mixin mq($breakpoint:md){
  @media #{map-get($breakpoints, $breakpoint)}{
    @content;
  }
}
mqというmixinの引数に上記設定した変数のキーをいれることでメディアクエリの処理をさせる。

まあ＠contentとかmap-getとか、しっかりと理解はしてません。
コピペは強い！
ちなみに引数内の$breakpoint:mdは引数の初期値をmdに設定するよってもの。

実際に使ってみる

実際に使うとどうなるか。
index.html
<body>
  <div class="box red">
    <p>1028px以下で丸に変形</p>
    <p>７６８px以下で非表示</p>
  </div>
  <div class="box blue">
    <p>768px以下で拡大</p>
    <p>４８０px以下で非表示</p>
  </div>
  <div class="box green">
    <p>480px以下で縮小</p>
  </div>
</body>
上記htmlに対し記述するscssは
style.scss
.red{
  background-color: red;
  @include mq(lg){
    border-radius: 50%;
    @include mq(){
      display: none;
    }
  }
}
.blue{
  background-color: blue;
  @include mq(){
    height: 400px;
    width: 400px;
    @include mq(sm){
      display: none;
    }
  }
}
.green{
  background-color: green;
  @include mq(sm){
    height: 100px;
    width: 100px;
  }
}
結果こんな動きをします。

結論

便利！！

おわりに

個人的にやりやすいからmax-widthで指定して
〇〇以下の時どうのこうの
のような書き方をしてましたが、
様々なサイトを参考にするとmin-widthを用いてるのが多かったです。
モバイルファーストを意識するなら〇〇以上の時〜の書き方に慣れるべきですね。

　 Tweet
Qiitaで続きを読む

投稿日：2019-12-15T01:19:58+09:00

僕のP2HACKS譚

はじまり

　12月7日～15日に開催される「P2HACKS」に参加してきました！当初に予定していたRailsではなく全く触ったことのない「React」で製作しました。というより、していますのほうが正しいんですが。しかし、全く触ったことのないものでアプリ製作を行って生じる苦労が１つや２つで収まるわけがないんです。

　とういうわけで、アプリ製作中に僕が学んだことや苦労したことのいくつかを書いていこうと思います。注意：書いてることの正確さは保証しません。

１index.htmlをいじらない

　まずそこからかよって思う人もいると思いますが、そこからなんです。HTMLとCSSは少しわかるがJavaScriptはあんまりわからない、という状況で僕はまず初めに脳死でindex.htmlをいじり始めました。
　Reactは基本的にindex.htmlをいじりません。App.js以下をいじっていれば何か変なことをしない限り勝手にindex.htmlを書き換えてくれます。少しだけ具体的に説明します。

index.htmlでは「root」という名前のidを読み込むことになっています。下記の画像は実際のindex.htmlのコードの一部です。

次にindex.jsですが、「ReactDOM.render(, document.getElementById('root'));」の部分でAppの部分を編集すれば'root'という名前のidの場所でhtmlを書き換えてくれます。さらに、上の方にある「import App from './App'」でApp（fromの後）という名前でexport defaultされたモジュールをApp（fromの前）という名前で受け取ってます。
下記の画像はindex.jsのコードです

最後にApp.jsです。ここで直接HTMLを操作したりするコードを書きます。下記の画像を見てください。これはApp.jsのコードです。一番下の「export default App」でこのファイルのデフォルトとしてAppというものをexportするよって意味です。だからfunction App(){ ~ }の中を書き書きすれば動きます。

２jQueryとReactを併用するな

　jQueryとReactを併用してはいけない。理由はjQueryは本物のDOMをいじるがReactは仮想のDOMを使ってコンポーネントを描画するから処理がコンフリクトするらしい。...正直、説明聞いてもよくわからなかったので「併用してはいけない」という知見しか僕は得ることが出来なかった。それとjQueryを使うと問答無用で猫先輩に怒られる。下記は併用してはいけないことを知らずに僕がどや顔で書いたコードです。やりたかったことは画像をクリックしたとき、それが何の画像でも、src属性の値を持ってくるということです。それ自体は成功しましたが、当然没になりました。

３flexboxについて（css）

　実装した機能の中に、HTMLでulとliを使って画像をたくさん表示するものがありました。しかし、何もしないままだと画像が縦一列に並んでしまうのでとても見にくいUIになってしまいます。
　そこで利用したものが「flexbox」というレイアウトモジュールです。flexboxでは要素を縦や横に柔軟に配置するためのものらしいです。今回やったことは画像をたくさん表示するときに横に３つずつ並べて居れていくことです。4つ目は次の行の一番左に…って感じです。要素を左から右に、入りきらなくなったら下に行を追加していく、ということを実装するには親要素に「flex-wrap:wrap;」を加えてあげればできます。その後、配置する要素の大きさを(100% /n)の大きさにしてあげれば、横一列にn個の要素が入ります。下記は今回実際に実装したulに対して加えたクラスのコードです。

今回のオチ

　今回、自分が先輩に教わったり自分で調べたりしたりして解決した苦労の一部を書きました。画面遷移とかも書きたかったんですが、自分のコード見ても何で動いてるのか思い出せなかったので止めました（笑）。しかも、かなりあやふやな知識で書いてるのであんまりあてにしないでください。あぁ、こいつはこんなことしてたんだな、くらいの気持ちで読んでいてくれたら嬉しいです。（本当はP2HACKSと関係ないことを紹介したかったけど出来なかったなんて口が裂けても言えない。）
　これ書いてる時間がP2HACKS最終日の1時なんですが、まだ開発が終わっていない...。ということで僕は開発を再開しなければならないので今回はこの辺りで。

　 Tweet
Qiitaで続きを読む

20191215のHTMLに関する記事は13件です。

ブログ始めました

プログラミングスクールに通う

Qiitaに投稿

アウトプット

最後に

半々人前のフロントエンドエンジニアが成長するために必要だと感じたこと

はじめに

今までやってきたこと

できるようになったこと（まだまだ未熟ですが...）

実践してみてよかったこと

習うより慣れろ！

教えてもらう立場

これから

head要素と関連ファイル

基本

アイコン

favicon

favicon変換ツール

apple-touch icon

OGP

共通部分(必須)

共通部分(任意)

Facebook用の記述

Twitter用の記述

画像サイズ

デバッグツール

Twitterのデバッグツール

Facebookのデバッグツール

多言語サイト

hreflang属性

言語コード

画像以外のファイル

.htaccess

manifest.json

sitemap.xml

robots.txt

User-agent

DisallowとAllow

humans.txt

HTMLとCSSでカレーライスを作った

カレーライスを作りました

どうやって作ったの

パーツを細かく作る

Atomsの用意

秘伝のカレー3つのスパイス（プロパティ）

box-shadow：立体感を持たせるスパイス

border-radius：より自然な形にするスパイス

mask-image：角がある味（鋭角）をまろやかにするスパイス

盛り付け：お母さん「ご飯よーーーーーーー！！！！！」

さいごに

HTMLのtextarea でインデント、アンインデント

HTMLのtextarea でインデント、アンインデント

classの小話 （cssが適用されないエラーについて）

はじめに

実行

【Qiita記事】続きを読む もっと詳しく

【Qiita】記事で使える 続きを読む もっと詳しく

cssだけでうんち書いてみた

?世界はうんちで満ちている?

?cssだけで書く?

?参考?

HTMLでGoogleマップを挿入する（２）

HTMLでのGoogleマップの挿入の仕方

Sassのmixinを用いたレスポンシブ化

Sassを導入した

mixinで画面状態を保存して使い回す

mixinの記述方法

実際に使ってみる

結論

おわりに

僕のP2HACKS譚

はじまり

１index.htmlをいじらない

２jQueryとReactを併用するな

３flexboxについて（css）

今回のオチ

日付別

タグ一覧

classの小話　（cssが適用されないエラーについて）

【Qiita記事】続きを読むもっと詳しく

【Qiita】記事で使える続きを読むもっと詳しく