IE11やEdgeにも対応できる、CSSだけで3行目でテキストの文末を「…」で省略する | かちびと.net

2019/07/24 56 users 文末 Edge CSS WebKit overflow

Result よくある、テキストの文末を省略するやつです。 1行に限らず、3行目、5行目など、n行で省略可能でWebkitやFirefoxはもちろん、IE11やEdgeもサポートしたコードです ↑ IE11で確認したスクショです。Penは非対応だったのでjsfiddleで確認しています css p { line-height: 1.4; max-height: 4.2em; overflow: hidden... 続きを読む

CodeWich - TypeScript対応、サーバレスなHTMLプレイグラウンド MOONGIFT

2018/08/29 16 users MOONGIFT CodePen CSS HTML リスク

JSFiddleやCodePenなど、HTML/JavaScript/CSSのプレイグラウンド的サービスが多数あります。多くのサービスは専用のURLが払い出され、そのURLにアクセスして使います。そして、そのサービスが落ちたりすると使えなくなるリスクがあります。 そんな中注目したいのがCodeWichです。コードを圧縮して専用のURLとする、URLを... 続きを読む

Edit fiddle - JSFiddle

2015/06/07 21 users

// 表示 function o(title, str) { $('#output').append('<div><strong>' + (title || '') + '</strong>' + (str || '') + '</div>'); } // 日付オブジェクトを文字列に変換して表示 function od(title, d) { o(title, d.toLocaleString()... 続きを読む

高次元立方体を描く - 標高+1m

2015/04/12 40 users 標高+1m 直方体 プログラマ 方程式 挙動

2015-04-13 高次元立方体を描く 先日の記事で触れたように、次元数の軸が、どれかの次元の軸についての方程式になっていた場合どんな挙動になるのかの実験のためにn次元単位立体を描画するプログラムを書いています。プログラマだと実験の道具を自分の指先だけで作れてとても便利。 今日の夕方にJSFiddleで暇つぶしに書いていたら、2時間弱で、n次元(ただし n>1)の直方体の辺を描画するものが呆気な... 続きを読む

たった9日間で戦力となるウェブエンジニアになれる７ステップ | VASILY DEVELOPERS BLOG

2014/02/26 140 users ウェブエンジニア 素養 ミドルウェア SQL 戦力

理系的素養は有るけれどもウェブ経験が全く無い学生インターンが、9日間で立派なウェブ系エンジニア になったので、そのポイントをまとめました！ ざっくり概要 Getting Started with Railsをやる ユーザに届ける体験をする Pull Requestのやりとりをする SQLをいじる ウェブで使うミドルウェアとインフラを知る JSFIDDLEを触る ウェブ業界について知る そしたら取り... 続きを読む

JavaScriptコードをブラウザ上で動作テスト、共有できる・「Plunker」 - かちびと.net

2013/03/13 39 users GitHub JSBin 即時 アーカイブ net

Plunker Plunkerはjsfiddleやjsbinのようにブラウザ上でJavaScriptコードを開発、実行し、共有もできるWebツールです。アーカイブもあるので探しやすい印象です。書いたコードは即時反映されます。また、Githubでもソースが公開されています。 Plunker On Github Other Links WPデザインギャラリー トピアンテナ ドメイン検索・ドメイチ jQ... 続きを読む

jsFiddleを使ってJavaScriptのテストを簡単に動かせるテンプレートサイトを作りました | Web scratch

2013/03/02 61 users mocha テスティングフレームワーク QUnit Save

JavaScript Test Fiddle Template というJSFiddleで使えるQUnit/Jasmine/Mocha/Buster.JSなどを動かすテンプレートを作りました。 使い方は単純で、 好きなテスティングフレームワークを選ぶ(なかったPull Requst) JSFiddleがテストのセットアップが入った状態で開かれるので、テストを書く “Save” ボタンを押して保存 後... 続きを読む

[CSS]属性セレクタを使ったちょっと面白いスタイルシートのテクニックのまとめ | コリス

2012/07/02 83 users コリス result 属性セレクタ script CSS

属性セレクタを使って、デバッグ用に空のリンクを目立たせたり、外部リンクのみアイコンをつけたり、head内のscriptやstyleのデータを明示するなど、ちょっと面白いスタイルシートのテクニックを紹介します。 空のリンクを目立たせる 外部リンクを目立たせる 外部リンクのみアイコンを付与する PNG画像を裏返しにする head内の要素を可視化 デモ表示に使用している「Jsfiddle」はResult... 続きを読む

Edit this Fiddle - jsFiddle

2012/05/14 34 users

.DemoContainer { margin: 20px; width: 580px; color: #ccc; font-weight: bold; font-family: tahoma; text-align: center; } .image_shine{ width: 200px; height: 200px; margin: 30px auto; position: relative... 続きを読む

HTMLやCSSのマークアップのパターンを作成し、その場で編集、インタラクティブに確認出来るツール・・・・を作れるWordPressテーマｗ - かちびと. net

2012/02/09 30 users インタラクティブ CSS jsdoit dabblet net

ちょっとネタ的な話題。HTMLやCSSを書くと その場でインタラクティブに反映、確認する 事が出来るツールやWebサービスは沢山ある のですが、それをWordPressで作ってしまった ようです。こういう発想は全然思い浮かば なかったので敬意を込めてご紹介。 例えばJavaScriptならJisbinやjsfiddle、jsdoitなどが該当します。 また、少し前にdabbletというツールもご紹... 続きを読む

JavaScriptをブラウザ上で開発、その場で実行できるJSBinがオープンソースで公開されてたのでインストールしてみた - かちびと. net

2011/12/05 115 users jsdoit JSBin OSS 手順 net

基本的にはjsfiddleメインなんですが、 依存するのが基本的に不安なのでロー カル環境で同じような環境を作りたか ったのですが、同様のサービスのJSBin がOSSで公開されてましたので試しに インストールしてみました。 まだちゃんと使うかは分かりませんけど、折角入れてみたので手順をメモ書き。 以前、ブラウザ上でjsを開発、URLを発行するjsfiddleをご紹介しました。jsDoitみたいな... 続きを読む

ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと - かちびと. net

2011/10/24 624 users jQuery CSS JavaScript jsdo.it

個人的にお勧めしているjsfiddle ですが、せっかくなのでちゃんと 記事にして普及活動をしてみよう かなと思います。jQueryのコード を気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddle jsfiddleとは、... 続きを読む