PDF.jsを設置する - Qiita
PDF.jsはJavaScriptで作られたPDFビューアです。(厳密にはPDF読み込みを行うパーサ、描画を行うレンダラ、画面UIのビューアがセットになっているもので、ライセンスはApache License 2.0です) Mozilla Foundationが開発していてFirefoxのPDFビューアとして採用されているため品質が高い JavaScriptでPDFを読み込んでCanvasで描画しているためiPhoneやAndroidなどスマートフォンでも表示できる ビューアがHTMLファイルのため<iframe>でPDFを埋め込み表示できる のような特長があり、PDFを直接表示できない環境での代替として使用することがよくあります。 この文書では、PDF.jsの基本的な設置方法を説明します。 1. 配布サイトからファイルをダウンロードする まず https://mozilla.github
htmlのid属性とclass属性の命名はハイフンかcamelかsnakeか - Qiita
CSSはハイフン(foo-bar)1、JavaScriptはCamel(fooBar)、Rubyはsnake(foo_bar)文化。 じゃあ、みんなが共有するHTMLのid、class属性はどの書式で書けばいいのか? HTML/CSSの人が書くことが多いからか、有名サイトを調べてみると、ハイフンが多い。 でも、JavaScriptで要素を取得したときに次のようにハイフンをCamelにしなければならないので、どうもしっくりこない。 <div class="foo-bar">foo bar</div> <script> var fooBar = $('.foo-bar'); // foo-barなの？fooBarなの？ </script> 世の中のトレンド BEM CSSの命名規則で有名なBEMはハイフンもアンダースコア(_)も、アンダースコア2つ(__)も使う。 個人的には、うーん。。。 T
CSS（CSS3）のみでLightbox風モーダルウィンドウを作成する方法｜BLACKFLAG
jQueryなどのJavaScriptライブラリでは定番のLightBoxやThickBoxといった、ポップアップ型モーダルウィンドウプラグインが様々あります。 ギャラリー要素などコンテンツの見せ方としてモーダルウィンドウは定着しつつありますが、そんなモーダルウィンドウをJavaScriptなどのSCRIPTを使用せずに、CSS（CSS3）のみで実装するサンプルを実験的に作ってみたので紹介してみます。 まずは動作サンプルから。 ※動作環境は基本的にはWebkitブラウザのSafariやChromeのみですが、今回はWebkit以外のブラウザFirefoxなどでもアニメーション以外の動作は実行されます。 CSS3 MODAL WINDOW【SAMPLE01】 ≫サンプル【01】画面はこちらから。（別枠で開きます。） リンクをクリック後に表示される、 ————————————————– ≫モー
表示コンテンツの切り替えも出来るシンプルなモーダルウィンドウを実現するjQueryのスクリプト | Web Mugen
シンプルなモーダルウィンドウを制作しました。有名なモーダルウィンドウに比べらたら出来ないことだらけです。画像をグループ化して他の画像へ移動することや、img内のtitleからキャプションを生成、他のHTMLを読み込んでの表示等もできません。その変わり3つのメリットがあります。 軽いこと。JSファイルにすると3K以下の軽さであり、画像を必要とせずCSSも普通に記述して20行程の導入のしやすさ。つまり気軽さ。 シンプルなこと。見飽きた有名なモーダルウィンドウのインターフェイスに比べて何というシンプルさ、そう閉じるボタンを取り払うほどに。（※閉じるボタンが無くても、グレーバックをクリックすると閉じるコトを認識している人が増えていると、勝手に判断した為です。あとがきでこの事についてチョット書いていますので、興味があれば読んでみて下さい。） 表示コンテンツの切り替えができること。コレが本命。とっても
ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
今さら聞けない、変数や関数の命名規則と、まず覚えるべき英単語200
（Wikipediaより） ハンガリアン記法のメリット 論理型であるbFlagと、文字列型であるsNameが bFlag + sName となっていれば誤りであることがわかる。 型の記述が2文字程度で済むので、変数名が短く済む。 ハンガリアン記法のデメリット 暗黙の型変換ができない。変数の型を変更するごとに変数名まで変更しなくてはならず、命名法に添って名前を付けるのが面倒。 （同じユーザーIDでも使い方によってはsUserid、iUseridなど） キャメル記法 文字のラインが凸凹になる様をラクダのこぶになぞらえてキャメル記法と名付けられた。 大文字小文字を区別する言語と区別しない言語があるので使う場合は全体を統一すること。 先頭の文字を大文字にするか小文字にするかで2つのパターンがある。 アッパーキャメルケースまたはパスカルケース（1単語目から大文字） 悪い例 $userparamete
16
サンプルコード// 切り捨て var a = Math.floor( 1.5 ) ; // 切り上げ var b = Math.ceil( 1.5 ) ; // 四捨五入 var c = Math.round( 1.5 ) ;デモMath.random(n)で、0〜nまでのランダム数を取得できます。取得できる値は少数を含むので、整数を得たい場合はMath.floor()などで切り捨てましょう。 切り捨て
【Javascript】文字列の指定位置に特定の文字列を挿入する。
CategoriesAndroid (1)AngularJS (92)AnimateJS (1)Apache (11)Bitbucket (1)Bootstrap (9)bower (3)CakePHP (50)CDN (1)CentOS (61)CentOS7 (9)Chrome (3)CMD (2)composer (1)CSS (33)Doctrine2 (8)Eclipse (16)enchant.js (11)Excel (23)Express (1)Facebook (2)FreeBSD (1)Git (23)gitflow (2)Gmail (1)GoogleMap (1)HTML (17)HTTP (1)iOS (2)Jasmine (1)Javascript (207)jQuery (29)jQueryUI (10)JScript (1)KendoUI (1)Knoppi
JavaScript：undefined値の判定
JavaScriptでは初期化されていない変数には全て「undefined」という値が入っています。 var a; alert(a); //undefinedが入っている これを利用して、変数が定義済みかどうかを判別することが可能です。…が、やり方がいろいろあるみたいなので、まとめてみることにします。 undefinedと比較する if (a === undefined) { alert("aは未定義"); } グローバル変数として、そのまんまundefinedという名前の変数が用意されているので、それと比較するやり方。一番素直な方法ですが、JavaScriptにおいては良くない書き方とされています。 undefinedは予約語ではなく、単なる変数です。だから上書きすることができるし、関数スコープ内で同名のローカル変数を作ることもできます。（ただし最近の処理系ではconst扱いになって上書
とほほのBootstrap 3入門 - とほほのWWW入門
このページは 「Bootstrap 3」について説明しています。Bootstrap 4 については、「Bootstrap 4入門」を参照してください。 Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。 Twitter 社で開発され、最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。 ライセンスは MIT License で、商用利用も可能です。 現時点(2018年5月6日)の最新バージョンは 4.1.1 です。 Bootstrap 2 と Bootstrap 3 以降では一部互換性の無い機能があります。 2018年1月に Bootstrap 4 も正式リリースされました。
css+jQueryでチェックボックス&ラジオボックスをオリジナルデザインのボタンにする
Posted: 2012.04.10 / Category: javascript / Tag: jQuery ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。 といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。 cssオンリーの場合 まずはcssのみでやってみます。 隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 <div class="check-group clearfix"> <div> <input id="checkbox1" type="checkbox" name="check[]" value="c1" /> <label for="checkbox1">Checkbox 1</label> </div> <div> <input id="checkbox2" type="ch
cssだけでラジオボタンを2択スイッチに変更 – webdev
cssだけでcheckboxやradioのデザインを変更の応用で、 Javascriptを使わず2択スイッチのデザインを付ける方法です。 IE8ではデフォルトのラジオボタンが表示され、IE9以上ではスタイルが適用されます。 スタイル適用前 ソース 隣接セレクタ（+）を使うので、ラジオボタンはlabelの直前に置きます。 <div class="sample"> <div class="either"> <input type="radio" name="dummy" id="dummy_1" value="1" checked="checked" /> <label for="dummy_1" data-label="ON">ON</label> <input type="radio" name="dummy" id="dummy_0" value="0" /> <label for="d
HTML5やCSS3を使った次世代表現を学ぶのに役立つコードサンプル
わずか280行程度のJavaScriptで作られ... / JavaScriptで作るいろいろな物理シミュレ... / JavaScriptによる波の物理シミュレーショ...他...全14件
とほほのＷＷＷ入門
はじめに ご使用上の注意 (1) 主な更新履歴 (24) 管理者へのメール (1) 自己紹介 (1) 基本編 用語集 (82) Webページ作成入門 (7) 逆引きリファレンス (32) フォーマット HTML (400) HTML5 (7) XHTML (1) MathML (1) DTD (1) JSON (1) SVG (1) VML (1) GIF (1) CSV (1) セマンティック・ウェブ (1) CSS CSS (ABC順)(719) Bootstrap (61) Less (1) Sass (1) Tailwind CSS (1) CSSフレームワーク (1) リセットCSS (1) プログラミング言語 JavaScript (39) TypeScript (1) Java (25) Perl (4) PHP (14) Ruby (11) Python (13) Go (
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP