ねこさんとへびさんの新人技術ブログ

新人エンジニアのねこさんとへびさんの、技術向上のためのブログです。

Tips!枠外にはみだした文字を省略記号(…)にする - CSS

ラベルなど、文字が折り返されるとデザインがおかしくなってしまう時、
一定の文字数を超えたら三点(…)で省略してしまいたい時のTipsです。

1)枠外にはみ出す

折返しをしない設定にしていると(white-space: nowrap;)と、文字数次第で下のように文字がはみ出してしまう。

私のこれまでに見て来たところでは、芸術をやるものは多くは無であるやうである。

.new-topic {
	border: 1px solid #5F984D;
	border-radius: 6px;
	background-coler: #AACF53;
	padding: 5px;
	width: 300px;
	white-space: nowrap;
}
2)省略記号を使う

上記のCSS
・overflow: hidden; (はみ出た部分を非表示にする)
・text-overflow: ellipsis; (はみ出た部分があることを示すために省略記号…を用いる)
を追加すると、下のようにはみ出さなくなる。

私のこれまでに見て来たところでは、芸術をやるものは多くは無であるやうである。

.new-topic {
	border: 1px solid #5F984D;
	border-radius: 6px;
	background-coler: #AACF53;
	padding: 5px;
	width: 300px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

(byへびさん)

Emmet HTMLテンプレート

EmmetでHTMLテンプレートを作成

Netbeansなど多くのエディタでは.htmlファイルを作成した時点で自動的にHTMLテンプレートが作成される為、 あまり使用することもないと思うんですが、備忘録的に残しておきます。

html:5

<!doctype html>
<html lang="en">
    <head>
   <meta charset="UTF-8">
   <title>Document</title>
    </head>
    <body>

    </body>
</html>

あらら、デフォルトだと lang="en"になっちゃいますね。

langをjpに変えるには

1. snippets.jsonを作成

snippets.jsonを作成します。 今回は下記URLからダウンロードして、編集することにしました。

snippets.json

2. snippets.jsonを編集

variableプロパティのlangとlocalをenからjpに変更

   "variables": {
        "lang": "ja",
        "locale": "ja-JP",
        "charset": "UTF-8",
        "indentation": "\t",
        "newline": "\n"
    },

3. snippets.jsonを設定

Netbeansに、作成したsnippets.jsonを読み込ませます。

ツール > オプション > その他タブ > Emmetタブ

EmmetタブのExtensions folder欄に、snippets.jsonがあるフォルダを指定してあげると、 テンプレートが、 に変わります。

参考

関連記事

tkstudy.hateblo.jp

(byへびさん)

Emmet記法 ネスト演算子

省略記法を展開するショートカットキー

OS:Windows Editor:Netbeans(デフォルト)の場合

Ctrl+Alt+N

要素を作成する

div

<div></div>

script

<script></script>

ul

<ul></ul>

など

兄弟要素を作成する

+でつなげる

div+div+p

<div></div>
<div></div>
<p></p>

子(子孫)要素を作成する

> で繋げていく

div>span

<div><span></span></div>

div>span>em

<div><span><em></em></span></div>

上の階層にさかのぼる

^でさかのぼる

div+div>span>em^^p

<div></div>
<div><span><em></em></span></div>
<p></p>

グループ化する

括弧()を使い、グループ化する

div+(div>span>em)+p

<div></div>
<div><span><em></em></span></div>
<p></p>

同じ要素を複数作成する

アスタリスク(*)で乗算する

ul>li*3

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

byへびさん

Try!Qrunch 始めてみた

Qrunch

新しい技術アウトプットの場として、Qrunchというサービスが始まったので試しに使ってみました。

qrunch.io

最近のQiitaやはてな界隈でのゴミ記事騒動にうんざりしつつ、
そんななか、類似サービスであるQiitaにゴミ記事騒動にのっかるようなタイミングで宣伝をしたQrunchの手法に「何だかなぁ」さも感じつつ、
(タイミングについては偶偶なんでしょうが)
それでも「アウトプットのハードルを徹底的に下げる」というコンセプトに魅かれたので暫く利用してみようと思います。

私のログ一覧
climbfrog.qrunch.io

Qrunchには、「記事」と「ログ」と2つの投稿タイプがあり、
他人に読ませるための「記事」と、自分のためのメモに使える「ログ」が明確に分かれているのが良いです。
こんな弱小ブログでも一応は読み手のことを考えてしまい、推敲したり自分なりに記事を厚くしちゃったりするんですけど、Qrunchのログは全くそういうの考えなくてガンガン投稿できる。連投にも全く抵抗がない。
何故なら「記事」が別にあるから。
ほかの人の役に立たない内容でも投稿していいんだよっていうお墨付きがもらえているからこそ、気軽に書ける。
作業と平行して作業メモを落とせるありがたさよ。

さらにログの本文検索も対応してたり検索機能がちゃんとしているから、ログが溜まったとき過去記事が見つけられなくなることもなさそう。

Qrunchの使い道

Qrunchの意図としては

WordPressはてなブログ」と「Qiita・dev.to」の中間的な存在

だそうですが、私にとっては、

「Trello・Evernote」と「WordPressはてなブログ」の中間的な存在

TrelloやEvernoteは技術に特化しているわけではないので、コードを貼り付けたとき見難い。
またソーシャル要素がほぼ無いので、モチベーションがあがらない。

その弱点を補うのがQrunch。

まだアカウントを取得して2日めですが、さわりは好感触。
けっこう気に入ってます。

Qrunchにログをガンガン落として、内容がある程度溜まったらこのブログに記事を書くよ!

(by へびさん)

100の目標-10月進捗

もう11月ですね。
時が経つのが早すぎて、全然追いつけてないへびさんです。こんばんは。

10月もジム通いに忙しく、なかなか目標消化がはかどってません。
そんななかでもようやく数学に着手しはじめたんですが、テキストの別冊子解答を紛失してしまうというバカっぷりを発揮。
なので先に掃除&断捨離をすることにしましたorz

11月はTOEICの勉強と断捨離でだいたい終わりそう。

晴マーク:完了
曇マーク:進行中
雨マーク:未着手
です。


中国語

日常会話ができるようになる

  • 1. NHKゴガク まいにち中国語ラジオ講座 7月~3月 すべて聴く(進捗:7月済)
  • 2. 書籍「中国語の文法書」読了
  • 3. 中国語のニュースやドキュメントを読む 24本
  • 4. Instagram開設。中国語で日本の紹介をする。24本
  • 5. レッスンを受ける:予算5万円

英語

ドキュメントがスラスラ読めるようになり、仕事に役立てる

  • 6. TOEIC500点
  • 7. TOEIC550点
  • 8. TOEIC600点
  • 9. 書籍「究めろ!リスニング解答力 TOEIC TEST」読了
  • 10. 書籍「キクタン」読了(進捗: Day14/Day56)
  • 11. 書籍「中学英語 レベル別問題集」2周目
  • 12. 英語ニュースを読む 24本
  • 13. Instagram。英語で日本の紹介をする。24本。

技術
スキル向上で昇給を目指す。他の人に解説できるようになる。

WordPress


CakePHP

  • 20.CakePHP 公式サイトのチュートリアルを一読する
  • 21. 読みたい本の管理システムを作る
  • 22. ねこへび勉強会 目標管理システム を作る

Vue.js
  • 23. 公式サイト ガイド欄を一読する
  • 24. 何か作る

JavaScript

RDBMS

iOSアプリ

WEB開発全般

  • 36. 書籍「リーダブルコード」読了
  • 37. 書籍「体系的に学ぶ 安全なWebアプリケーションの作り方」読了
  • 38. 書籍「初めての自動テスト ―Webシステムのための自動テスト基礎」読了
  • 39. WEBアプリ セキュリティについてのレポートを書く

地図

インフラ

  • 45. CCENT問題集 一冊やる
  • 46. CCENT合格

その他

  • 47. Progate 無料分全部 終わらせる(進捗:9コース済)
  • 48. HTML5 MozillaHTML5項目を一読する
  • 49. 興味のあるジャンルのスライドを5本読む
  • 50. 興味のあるジャンルのスライドを20本読む
  • 51. 興味のあるジャンルのスライドを50本読む
  • 52. WebDriverについての紹介記事を読む
  • 53. Dockerでランプ環境を作る

数学

機械学習を始める前に高校数学を復習しておく

登山
体験することで業務知識を得る
  • 56. ハイキング 15回(近所の里山OK)(進捗:4/15)
  • 57. ハイキング 30回(近所の里山OK)
  • 58. 読図講習に参加する
  • 59. オンライン応急処置講習を受ける
  • 60. 山頂でドリップコーヒーを飲む
  • 61. 山頂で調理する
  • 62. 富士山登頂

運動
登山(&美容)のために体を鍛える
  • 63. 5km完走
  • 64. 10km完走
  • 65. 15km完走
  • 66. 450分何かしら運動
  • 67. 1350分何かしら運動(進捗:残1200分)
  • 68. 2700分何かしら運動
  • 69. 5400分何かしら運動
  • 70. ヨガを始める

美容・健康
人らしく生きる。病気にならない。
  • 71. 5キロ痩せる(進捗:ヤセネー)
  • 72. 握力測定器を買う
  • 73. ネイルを気をつかう
  • 74. 美容健康に良い食事を研究する

生活習慣
老後に備え、自分の"資産"を作る
  • 75. 96万円貯金する
  • 77. ブログを60本書く(進捗:残40本)
  • 78. 副収入をつくる
  • 79. 家計簿をつける
  • 80. 週に2回は"料理"する

教養
教養をつけて、大人の会話ができるように。
  • 81. 読書 技術語学、雑誌以外のジャンルの本を15冊読む(進捗:残11冊)
  • 82. 映画を30本見る(シリーズものは1カウント)(進捗:残27本)
  • 83.生物 高校教科書を買ってきて読む
  • 84. 地学 高校教科書を買ってきて読む
  • 85. 憲法の基本書を読み返す
  • 86. 民法の基本書を読み返す
  • 87. 刑法の基本書を読み返す
  • 88. イラストを描く
  • 89. 将棋 もう少し強くなる
  • 90. 手芸を始める
  • 91. 中国旅行

運転技術
苦手意識を克服し、まともな運転ができるように。
  • 92. バック駐車上手くなる
  • 93. 大町、安曇野、諏訪、上田、白馬にそれぞれ一回ずつ行く(進捗:大町、安曇野、白馬済)
  • 94. 新車を買う
  • 95. 高速を利用する

その他
具体的な目標や達成の方法が定まってないもの。
  • 96. ライフログをつける
  • 97. 断捨離
  • 98. ライティング力向上
  • 99. 人を大切にする
  • 100. 朝7時までに起床する

Memo!無名関数と変数のスコープ - PHP

PHPの無名関数の実装は、クロージャが使われています。

クロージャはローカルスコープの外で定義された、引数以外の変数を利用することができます。
引数以外の変数を利用したい場合は、useを使って渡します。

<?php
$greeting = "Good morning";

$greet_nouse_use = function()
{
    error_log("message: " . $greeting);
};


$greet_use_use = function() use ($greeting)
{
    error_log("message: " . $greeting);
};

このコードの実行結果を見てみましょう。
useを使わない無名関数は親スコープの$greeting変数の値を参照できないですし、
使っている無名関数は参照できています。

message:
message: Good morning


クロージャの特徴として、引数以外の変数を実行時ではなく、自分が定義された時点で解決するという特徴があります。
下のコードでは無名関数$greetが定義された時点で変数$greetingの値はGood morning、
実行の時点ではHelloです。
PHPの無名関数はクロージャですから、Helloが代入されたあとに実行された$greet()は、Good morningを出力します。

<?php
$greeting = "Good morning";

$greet = function () use ($greeting) {
    error_log("message: " . $greeting);
};

$greeting = 'Hello';
$greet();

message: Good morning


useには参照渡しが使えるので、実行時点の変数を使いたければ参照渡しにして変数を引き継ぎましょう。

<?php
$greeting = "Good morning";

$greet = function () use (&$greeting) {
    error_log("message: " . $greeting);
};

$greeting = 'Hello';
$greet();

$greeting = 'Good night';
$greet();

message: Hello
message: Good night


もちろん引数と一緒に使えます!

<?php
$greeting = "Good morning";

$greet = function ($name) use ($greeting) {
    error_log($name . ', ' . $greeting);
};

$greet('Hebisan');

Hebisan, Good morning

(byへびさん)

TS!疑似要素でHTML特殊文字が表示されないの!!

疑似要素の::beforeや::afterなどでHTML特殊文字が文字化けしてしまったらどうすればよいか。
結論を先に書くと

  1. HTML特殊文字の数値文字参照16進数表記を調べる(Ex. &#x2600;)
  2. 16進数部分のみ着目(Ex. 2600)
  3. 正確に6桁16進数にする(0埋めしない4桁でも大丈夫です。)(Ex. 002600)
  4. 先頭にバックスラッシュをつける(Ex. \002600)
  5. 変換した文字列を擬似要素のcontentプロパティに指定する(Ex. content: "\002600";)

文字化けで困っている人は上の手順を試してみてください!

以下、もっと詳しく。


前回の記事、
tkstudy.hateblo.jp
で、

f:id:tksptan:20181004184230j:plain

上図のように各目標の左横に進捗度を表す天気記号をつけたかったのですが、CSSにそのHTML特殊文字を書いたら文字化けしました。
そうです、CSSの文字列にHTML特殊文字は使えないのです。

参考:
developer.mozilla.org

HTML特殊文字(アンパサンドで始まりセミコロンで終わるテキストの固まり)の代わりに、Unicodeコードポイントを使用しましょう。


晴マーク(HTML特殊文字:&#x2600; )をUnicodeコードポイントにした記述

ul.moku li.finish:before {
  content: "\002600";
  position: absolute;
  left : 1em;
  color: #ffb03f;
}

晴マークは、この部分ですね。

content: "\002600";

&#x2600; をUnicodeコードポイントに変換する手順は、
冒頭にも書いたように、以下のとおり。

  1. HTML特殊文字の数値文字参照16進数表記を調べる(Ex. &#x2600;)
  2. 16進数部分のみ着目(Ex. 2600)
  3. 正確に6桁16進数にする(0埋めしない4桁でも大丈夫です。)(Ex. 002600)
  4. 先頭にバックスラッシュをつける(Ex. \002600)

この手順で変換すれば、他の文字も表示できるようになります。

■補足1
HTML特殊文字の数値文字参照16進数の調べ方ですが、
個人的にこちらのサイトが一番分かりやすかったです。

HTML特殊文字一覧(数値参照・文字参照) – atomicbox

■補足2
参考:CSSコンテンツを使用したHTMLエンティティの追加
CSSコンテンツを使用したHTMLエンティティの追加 [html-entities] | CODE Q&A 問題解決 [日本語]

■補足3 目標リストに適応しているCSS

ul.moku {
  border: solid 2px #6091d3;
  border-radius: 10px;
  color: #223a70;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

ul.moku li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

ul.moku li.finish:before {
  content: "\002600";
  position: absolute;
  left : 1em;
  color: #ffb03f;
}

ul.moku li.start:before {
  content: "\002601";
  position: absolute;
  left : 1em;
  color: gray;
}

ul.moku li.yet:before {
  content: "\002602";
  position: absolute;
  left : 1em;
  color: blue;
}

文字コードについてあまり詳しくないので、用語など間違いがあればご指摘いただけると嬉しいです!

(byへびさん)