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からダウンロードして、編集することにしました。
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があるフォルダを指定してあげると、 テンプレートが、 に変わります。
参考
関連記事
(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というサービスが始まったので試しに使ってみました。
最近のQiitaやはてな界隈でのゴミ記事騒動にうんざりしつつ、
そんななか、類似サービスであるQiitaにゴミ記事騒動にのっかるようなタイミングで宣伝をしたQrunchの手法に「何だかなぁ」さも感じつつ、
(タイミングについては偶偶なんでしょうが)
それでも「アウトプットのハードルを徹底的に下げる」というコンセプトに魅かれたので暫く利用してみようと思います。
私のログ一覧
climbfrog.qrunch.io
Qrunchには、「記事」と「ログ」と2つの投稿タイプがあり、
他人に読ませるための「記事」と、自分のためのメモに使える「ログ」が明確に分かれているのが良いです。
こんな弱小ブログでも一応は読み手のことを考えてしまい、推敲したり自分なりに記事を厚くしちゃったりするんですけど、Qrunchのログは全くそういうの考えなくてガンガン投稿できる。連投にも全く抵抗がない。
何故なら「記事」が別にあるから。
ほかの人の役に立たない内容でも投稿していいんだよっていうお墨付きがもらえているからこそ、気軽に書ける。
作業と平行して作業メモを落とせるありがたさよ。
さらにログの本文検索も対応してたり検索機能がちゃんとしているから、ログが溜まったとき過去記事が見つけられなくなることもなさそう。
Qrunchの使い道
Qrunchの意図としては
だそうですが、私にとっては、
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本。
- 14. WordPress 公式サイトのチュートリアルを一読する
- 15. WordPress 勉強会でLTトークを2回する
- 16. WordPress『Outdoor Begginer』というブログ(サイト)を作成する(進捗:作成中)
- 17. WordPress プラグインを3本作成する
- 18. WordPress AOuthを使った認証についてまとめる
- 19. 書籍「エンジニアのためのWordPress開発入門」読了
CakePHP
Vue.js
- 23. 公式サイト ガイド欄を一読する
- 24. 何か作る
JavaScript
- 25. 速習!JavaScriptを最後まで書く
iOSアプリ
- 30. N予備校 スマートフォンアプリコース 終わらせる
- 31. ドットインストールiPhoneアプリ開発入門を視聴する
- 32. ドットインストールSwift 3入門を無料公開分、視聴する
- 33. 書籍「絶対に挫折しない iPhoneアプリ開発「超」入門」読了
- 34. iPhoneアプリを作成する
- 35. DockerでSwift環境を作る
WEB開発全般
- 36. 書籍「リーダブルコード」読了
- 37. 書籍「体系的に学ぶ 安全なWebアプリケーションの作り方」読了
- 38. 書籍「初めての自動テスト ―Webシステムのための自動テスト基礎」読了
- 39. WEBアプリ セキュリティについてのレポートを書く
地図
- 40. 地図 Yahoo! JavaScriptマップAPIを使ってみる
- 41. 地図 国土地理院地図を表示する
- 42. 地図 GIS 勉強法を考える
- 43. 地図 同僚の作ったプログラムを読む
- 44. 地図 Maps JavaScript API チュートリアルを一読する
インフラ
- 45. CCENT問題集 一冊やる
- 46. CCENT合格
その他
- 47. Progate 無料分全部 終わらせる(進捗:9コース済)
- 48. HTML5 MozillaのHTML5項目を一読する
- 49. 興味のあるジャンルのスライドを5本読む
- 50. 興味のあるジャンルのスライドを20本読む
- 51. 興味のあるジャンルのスライドを50本読む
- 52. WebDriverについての紹介記事を読む
- 53. Dockerでランプ環境を作る
- 54. 数学ハイパーテキスト 数Aの範囲をやる
- 55. チャート式 数学A 終わらせる
- 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. 中国旅行
- 96. ライフログをつける
- 97. 断捨離
- 98. ライティング力向上
- 99. 人を大切にする
- 100. 朝7時までに起床する
Memo!無名関数と変数のスコープ - 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: 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();
useには参照渡しが使えるので、実行時点の変数を使いたければ参照渡しにして変数を引き継ぎましょう。
<?php $greeting = "Good morning"; $greet = function () use (&$greeting) { error_log("message: " . $greeting); }; $greeting = 'Hello'; $greet(); $greeting = 'Good night'; $greet();
message: Good night
もちろん引数と一緒に使えます!
<?php $greeting = "Good morning"; $greet = function ($name) use ($greeting) { error_log($name . ', ' . $greeting); }; $greet('Hebisan');
(byへびさん)
TS!疑似要素でHTML特殊文字が表示されないの!!
疑似要素の::beforeや::afterなどでHTML特殊文字が文字化けしてしまったらどうすればよいか。
結論を先に書くと
文字化けで困っている人は上の手順を試してみてください!
以下、もっと詳しく。
前回の記事、
tkstudy.hateblo.jp
で、
上図のように各目標の左横に進捗度を表す天気記号をつけたかったのですが、CSSにそのHTML特殊文字を書いたら文字化けしました。
そうです、CSSの文字列にHTML特殊文字は使えないのです。
参考:
developer.mozilla.org
HTML特殊文字(アンパサンドで始まりセミコロンで終わるテキストの固まり)の代わりに、Unicodeコードポイントを使用しましょう。
晴マーク(HTML特殊文字:☀ )をUnicodeコードポイントにした記述
ul.moku li.finish:before { content: "\002600"; position: absolute; left : 1em; color: #ffb03f; }
晴マークは、この部分ですね。
content: "\002600";
☀ をUnicodeコードポイントに変換する手順は、
冒頭にも書いたように、以下のとおり。
この手順で変換すれば、他の文字も表示できるようになります。
■補足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へびさん)