- 投稿日：2019-02-27T22:59:15+09:00
div要素全体にリンクをつける方法
div要素全体にリンクをつけたい時の方法メモ
自分用に簡潔にまとめる。See the Pen div要素全体にリンクをつける方法 by iwato (@iwato) on CodePen.
- 投稿日：2019-02-27T18:09:40+09:00
開発が捗るかもしれない(面白い)ダミー画像,テキストまとめ
開発でいちいちダミーの画像とかテキストを作るのがめんどくさかったりしますよね。
VSCodeとかだとHTML入力時にloremと打つと自動でスニペットがlorem ipsumを挿入してくれたりします。だけどloremだけじゃつまらない!
そんなあなたの為にダミー画像、テキストをまとめました。他にもあったらぜひ教えてください！(随時追加します, 編集リクエストだと嬉しい)
代替のネタ元は→APIs you didn't know you needed
ダミー画像関係
Placeholder.com
好きなサイズのダミー画像をかえしてくれる。(これは有名かも?)
ちなみにテキストも入れられるらしい。便利！以下サンプル
https://via.placeholder.com/200x100
https://via.placeholder.com/468x60?text=Visit+Blogging.com+Now
{placekitten}
子猫版。ギャンかわ。
http://placekitten.com/200/300
/gでグレースケールになるっぽい。
http://placekitten.com/g/150/150
PlaceGoat
ダミー画像としてヤギを返してくれる。エンドポイントは以下のとおり。
以下で300x200のヤギの画像を返してくれる。
http://placegoat.com/300/200
かわいい。
PlaceCage
ニコラス・ケイジ版。
4種類のエンドポイントがあって画像のタイプが選べる。
Calm: https://www.placecage.com/200/300
Gray: https://www.placecage.com/g/200/300
CRAZY: https://www.placecage.com/c/200/300
GIF: https://www.placecage.com/gif/200/300
https://www.placecage.com/200/300
Fill Murray
ビル・マーレイ版
https://fillmurray.com
https://fillmurray.com/200/300
Steven SeGALLERY
スティーヴン・セガール版
https://www.stevensegallery.com/
https://stevensegallery.com/200/300
ダミーテキスト関係
すぐ使えるダミーテキスト
https://lipsum.sugutsukaeru.jp/
日本語版のLorem ipsum。だいぶ便利。
私も今ようやくどんな懊悩院としてはずの上にあったべき。 もしほかに通用人はもしその使用なたまでがもつれからおきたがは持衝くたたが、そうにもできますないたた。先生にしん気はどうぞ昔がよくたでべき。 多分岡田さんを楽去就いっそ焦燥が信ずるだがたこういう小学校私か表裏をという大講演ですたなくなて、その結果はそれか耳自分をやりながら、大森さんのつもりを他のここがよし今話といるて私気におお話しにきまらようと今にお挨拶がありましでから、けっしてほぼ誤認に入れまいてくるう訳を立っですます。それでもそれで不会にしのは多少むやみと嫌うですて...Skate Ipsum
スケート?
APIもちゃんと用意されてる。
http://skateipsum.com/get/3/1/JSONSkate ipsum dolor sit amet, stalefish pop shove-it half-flip lipslide Christ air concave Saran Wrap. Goofy footed Kevin Harris mute-air noseblunt slide 540 full pipe nollie. Street coper hip ollie sponsored speed wobbles crailtap. ...Baseball Ipsum
http://baseballipsum.apphb.com/Home/RestApi
野球版
エンドポイントのサンプル
http://baseballipsum.apphb.com/api/?paras=5Ball center fielder reliever southpaw dodgers southpaw gold glove. Cork streak cork off-speed save, sweep cheese. Plunked at-bat mound pennant 4-6-3 bases loaded outside basehit tag. ...jaspervdj/lorem-markdownum
https://github.com/jaspervdj/lorem-markdownum
Markdown用のダミーテキストを返してくれるAPI
出力のサンプル.md# In diva in Alcides cumque postquam reserato ## Proxima bellare te tractata Atrides exercet Lorem markdownum, aequent vocem dixit tamen quidem crimine in maris protinus moror *telluris* magno, marinae Latonae. Opaca tamquam ligari!Bacon Ipsum
https://baconipsum.com/json-api/
ベーコン版
エンドポイントのサンプル
https://baconipsum.com/api/?type=meat-and-fillerChicken chuck short ribs salami t-bone dolore bresaola. Picanha enim filet mignon nulla doner flank ribeye nostrud mollit non. Doner duis irure cillum, ...
やだこのテキスト、お肉の匂いがするBob Ross Lipsum
https://www.bobrosslipsum.com/
かの有名な画家であるボブ・ロス風のダミーテキスト。
I thought today we would do a happy little picture. We'll play with clouds today. Just go out and talk to a tree. Make friends with it. Let's go up in here, and start having some fun We can always carry ...ね、簡単でしょう？
Cupcake Ipsum
カップケーキのダミーテキスト。
Oat cake powder sesame snaps. Icing donut gingerbread jelly apple pie bear claw sugar plum. Danish gingerbread halvah chocolate ice cream dessert dessert wafer. ...おいしそう
- 投稿日：2019-02-27T18:07:28+09:00
JQueryでhtmlをincludeする
いまさらJQuery。
概要
html内でフッターやヘッダーなどの共通部分のhtmlをincludeするコード。
htmlを記述する際に同じ部分をたくさん書かずに済む。メンテも楽！コード
共通部分を呼び出したいhtmlファイルの一部。共通部分は
<div class="target"></div>の中に展開されます。index.htmlの一部<script type="text/javascript" src="includeTemplateHTML.js"> IncludeTemplateHTML("div.target","/Path/Of/templateHTML.html"); </script> <div class="target"></div>共通部分を呼び出すためのJS関数。
includeTemplateHTML.jsfunction IncludeTemplateHTML(selector,filepath){ $(function (){ $.ajaxSetup({cache:false}); $(selector).load(filepath); }); }補足
template自体が共通部分なのでさらにその中の一部分を呼びたい、ということはほとんどないと思いますが、
引数のfilepathをfilepath="/Path/Of/templateHTML.html div#hogehoge"にかえてやればtemplateHTML.htmlのdivタグのid="hogehoge"の内容だけをselectorにインクルードさせることができます。
参考
- 投稿日：2019-02-27T05:44:29+09:00
突然「スマイルください」と言われたときの対策 ～ CSS 編 ～
「スマイルください」
笑顔を求めるその脅威は、突然私たちに襲い掛かる。
次の脅威はいつ、だれを襲うのか。予告なしに襲い掛かるその脅威から身を守り、被害を最小限に抑えるために、日頃から正しいスマイルの出し方を見につけておくことが重要である。今回のスマイル
今回作るスマイルはこのようなスマイル
また、本家スマイル1が極めて安価( 0 円)で、提供までの時間が短いことをリスペクトして、スマイルを作るにあたり、以下の規則を設け、遵守した。
- 使用する要素は 1 つまで
- 擬似要素は利用しないことが好ましい
- 所要時間は 1 時間以内
スマイル
HTML を書く
HTML は、上記の規則から
nico-chanクラスを付与したdiv要素 1 つとした。<div class="nico-chan"></div>CSS を書く
まず、スマイル
radial-gradient関数を使えば、描くことができる。顔を描く
radial-gradient関数を使って、顔の輪郭を作っていく(動作例)。良い感じ。:root { --canvas-size: 300px; --face-inside-color: #ffcc4d; --face-outline-color: #ffcc4d; --face: radial-gradient( circle, var(--face-inside-color) 140px, var(--face-outline-color) 141px, var(--face-outline-color) 149px, transparent 150px ) no-repeat; } .nico-chan { width: var(--canvas-size); height: var(--canvas-size); background: var(--face); }目を描く
次に、目を作っていく(動作例)。
:root { --canvas-size: 300px; --eye-size: 17px; --eye: radial-gradient( 11px 15px, #664500 calc(var(--eye-size) - 2px), transparent var(--eye-size) ); --left-eye-position: 50px -50px; --right-eye-position: -50px -50px; --left-eye: var(--eye) var(--left-eye-position) no-repeat; --right-eye: var(--eye) var(--right-eye-position) no-repeat; --eyes: var(--left-eye), var(--right-eye); } .nico-chan { width: var(--canvas-size); height: var(--canvas-size); background: var(--eyes); }口を描く
次に、口を描く。これは、円の上に楕円を重ねれば良い感じに作れると思う(動作例)。
:root { --canvas-size: 300px; --face-inner-color: #ffcc4d; --mouth-size: 35px; --mouth-color: #664500; --mouth-overlay: radial-gradient( 2px 1px, var(--face-inner-color) 111px, transparent 113px ) 0 -50px no-repeat; --mouth: radial-gradient(var(--mouth-color) 90px, transparent 91px) 0 10px no-repeat; --teeth-size: 35px; --teeth-color: #fff; --teeth-overlay: radial-gradient( 350px 100px, var(--mouth-color) 85px, transparent 87px ) 0 -10px no-repeat; --teeth: var(--teeth-overlay), radial-gradient(80px 60px, var(--teeth-color) 80px, transparent 81px) 0 -15px no-repeat; } .nico-chan { width: var(--canvas-size); height: var(--canvas-size); background: var(--mouth-overlay), var(--teeth), var(--mouth); }作ったパーツを組み合わせる
上で作ったパーツを適当に組み合わせる。すると、 CSS は全体でこんな感じになる。ごちゃごちゃしていて読みにくいが、やっていることは円、楕円の作成と配置だけなので、それほど難しいことはしていない。
また、background-imageプロパティをコンマ区切りで適用するとき、最初に適用した値の結果が常に最前面に表示される2、という動作に注意しなければならない。:root { --canvas-size: 300px; --face-inner-color: #ffcc4d; --face-outline-color: #ffcc4d; --face: radial-gradient( circle, var(--face-inner-color) 140px, var(--face-outline-color) 141px, var(--face-outline-color) 149px, transparent 150px ) no-repeat; --eye-size: 17px; --circle-eye: radial-gradient( 11px 15px, #664500 calc(var(--eye-size) - 2px), transparent var(--eye-size) ); --left-eye-position: 50px -50px; --right-eye-position: -50px -50px; --left-eye: var(--circle-eye) var(--left-eye-position) no-repeat; --right-eye: var(--circle-eye) var(--right-eye-position) no-repeat; --eyes: var(--left-eye), var(--right-eye); --mouth-size: 35px; --mouth-color: #664500; --mouth-overlay: radial-gradient( 2px 1px, var(--face-inner-color) 111px, transparent 113px ) 0 -50px no-repeat; --mouth: radial-gradient(var(--mouth-color) 90px, transparent 91px) 0 10px no-repeat; --teeth-size: 35px; --teeth-color: #fff; --teeth-overlay: radial-gradient( 350px 100px, var(--mouth-color) 85px, transparent 87px ) 0 -10px no-repeat; --teeth: var(--teeth-overlay), radial-gradient(80px 60px, var(--teeth-color) 80px, transparent 81px) 0 -15px no-repeat; } .nico-chan { width: var(--canvas-size); height: var(--canvas-size); background: var(--eyes), var(--mouth-overlay), var(--teeth), var(--mouth), var(--face); }完成
というわけで、完成したスマイルがこちら！
See the Pen Pure CSS Smiley Face by Hakaato (@hakaato) on CodePen.
まとめ
このスマイルを作るうえで使用したプロパティは、実質 3 つだけ(カスタムプロパティを除く)になった。このことからも、連続的な色の変化を様々な形状で表現できることは強力で、スタイルをより柔軟に適用できることがわかる。
また、CSS グラデーションはブラウザによって生成されるので、ズーム表示された場合も割りと綺麗に表示されるのも Good ポイント。CSS の場合、グラデーションさえあれば、スマイルは作れるのだ。もし道端で、突然スマイルを求められても、慌てず冷静にグラデーションを駆使すれば良い。グッドラック。
- 投稿日：2019-02-27T00:49:56+09:00
ワイプスライダーに機能を追加し、プラグイン化してみた
こちらの記事で作ったスライダーに機能を追加し、プラグインとして使えるように拡張しました。
サンプル使い方
ファイルはGithubから一式ダウンロードできます。
https://github.com/Kackie/wipeSlider
※test.htmlは旧バージョン。HTML
外部ファイル読み込み
<link rel="stylesheet" href="css/wipeSlider.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script src="script/jquery.wipeSlider.js"></script>スライド用のCSSとjQuery、プラグインのJSを読み込みます。
CSSは開いてみればわかりますがすごくシンプルです。必須なのはこれだけです。
ページャー等の見た目の調整はサンプルのHTMLに直書きしています。参考にしてもらっても、自由にスタイルを書くのもよいと思います。スライド部分
<div class="slidesWrap js_wiper"> <ul class="slides"> <li class="slide"> <img src="https://dummyimage.com/980x500/ccc/fff&text=1" alt=""> </li> <li class="slide"> <img src="https://dummyimage.com/980x500/ccc/fff&text=2" alt=""> </li> <li class="slide"> <img src="https://dummyimage.com/980x500/ccc/fff&text=3" alt=""> </li> </ul><!-- / .slides --> </div><!-- / .js_wiper -->一番シンプルな形です。
階層が守られていればulタグ以外でも構いません。jQuery
$('.js_wiper').wipeSlider();最低限これだけ書けば動きます。
$('.js_wiper').wipeSlider({ transition : 1000, auto : true });オプションを設定するとこんな感じです。
オプション設定
ラベル 機能 transition スライドが切り替わるときの速度を設定します。
初期値は500。auto 自動再生を設定します。
初期値はfalse。duration 自動再生時、スライドの表示時間を設定します。
初期値は4000。pager ページャーを生成します。
初期値はtrue。controls 前後のスライドに切り替えるコントローラーを生成します。
初期値はtrue。その他の仕様
表示中のスライドにはactiveクラスが付きます。
これを使用して、スライド内のインタラクション作成に役立ててもらえればと思います。前回のバージョンでは、別タブでページを閲覧してから戻ってくると、アニメーションがおかしくなってしまうことがありました(setIntervalの仕様ですが)。
タブが非アクティブ時にはclearIntervalがかかり、戻ってくるとsetIntervalが再発動するようになっています。感想と反省
プラグイン自作初挑戦です。意外と簡単ですね。
前回作った元のスライダーがシンプル過ぎたので、最低限スライダーのプラグインに必要になるであろう機能を追加しておきました。
表示中のものより前のスライドに移動したときは逆方向にアニメーションさせたりとか、ユーザー設定でアニメーション方向を自由に帰らるようにしたかったのですが、アニメーションをCSSのtransitionでやっているがためにclipの再設定ができないという問題に直面し断念。。
backFlagという変数をつくり、戻る動作のときはbackFlag = true;となるようにしたもののそのままうまく扱えていないです。
keyframesを動的生成はできなさそうだし、やるとしたらanimateメソッドのstepを使うことになるのだろうか・・？
時間がかかりそうだったのでひとまず公開してしまいましたが、これはなんとか作ってみたいのでじっくり考えてみることにします。せっかくなのでクレジットを入れようと思ったのですが書き方がわかりませんでした（恥）。