無料コーディング練習所 | 未経験からWebデザイナーへ！【2024年版】『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 この教材は制作会社の新人コーダーの教育にも使用されています。 さぁ、楽しみながら一緒に勉強していきましょう♪
これなら実装がすごく簡単！スクロール時にDOM要素をアニメーションで表示する超軽量のJavaScript -Animon
Webページがロードされた時やスクロールされた時など、ブラウザのビューポートに表示された時に指定したDOM要素にさまざまなアニメーションを個別に設定できる超軽量のJavaScriptライブラリを紹介します。 HTMLにclassとdata属性を加えるだけで、ランディングページでよく見かけるスクロールすると見出しやテキストや画像が右・左からアニメーションでふわりと表示されたり、フェードインやスケールアップ・ダウンなどが簡単に実装できます。 Animon Animon -GitHub Animonの特徴 Animonのデモ Animonの使い方 Animonの特徴 Animonは、Webページ上のDOM要素がビューポートに表示された時に、指定したDOM要素をアニメーション化させるJavaScriptの超軽量（0.9kB）ライブラリです。単独で動作し、他のスクリプトへの依存はありません。 実装は
Slidebars.js【Ver2】の使い方、設定方法～バージョンが変わってます
スマホでスライドして表示するドロワーメニュー、jQueryプラグイン「Slidebars」の使い方、設置方法です。こちらの内容はバージョン2です。2016年6月頃のバージョンアップされ、公式ページもリニューアルされています。 以前のバージョンはこちらのページをご覧ください。 ⇒軽量！Slidebars.jsの使い方～スマホでスライドするドロワーメニュー それではまずは サンプルデモ１ サンプルデモ２ 以前のバージョンとの違いスライドメニューを表示するときのエフェクトがOff-Canvas Menu Effectsになっています。それと以前はオプション設定が結構あったのですがサイトを見る限りなくなっているようです。 Slidebarsの使い方、設定方法jQueryとSlidebarsよりダウンロードしたファイルのdistのフォルダからslidebars.min.jsとslidebars.mi
MDN Web Docs
Resources for Developers, by DevelopersDocumenting web technologies, including CSS, HTML, and JavaScript, since 2005. //////////// //////////// //////////// //////////// //////////// //////////// //////////// ++++++ ++++++ ++++++ ++++++ ++++++ ++++++ ++++++{{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} ../../ ../../ ../../ ../../ ../../ ../..
Web制作で使いこなしたいIE開発者ツールの最新機能
最新版のWebブラウザー「Internet Explorer 11」（以下、IE）は、2013年10月に正式リリースされ、その後のアップデートでも機能が少しずつ強化されてきた。例えば、2014年4月のWindows 8.1 Update 1提供と同時に機能が強化され、2014年8月のアップデート（August Update）でもさらに更新されている*1。 *1 以前のIEでは、IE5／IE6／IE7のようなメジャー・バージョンアップのタイミングで新機能が搭載されていたが、現在のIEでは他のマイクロソフト製品と同じく、1年の間に何度もアップデートが行われるようになっている。 そのIEにも、Chromeのデベロッパー・ツールと同様に、Web制作者向けのツール「F12開発者ツール」が標準搭載されており、そのツールもIE10以前からIE11のアップデートで大幅に変更されている。そこで本稿では、強化
iTunes、App StoreへのリンクがSafariで開けないとき - あぷすた - iPhoneとWebとプログラミングと
iTunes（App Store）へのリンクを一括管理したいからリダイレクトさせてるんだけど iPhoneのSafariからだと開けないなんてことがあります。aタグにtarget=”_blank”を設定してるとダメみたい。 じゃぁ外せばいいじゃん と思われるかもですけど、 「はずすとサイトから離脱しちゃうじゃまいか」とか 「呪われているので外せません」的な理由があってはずせなかったり。 例としてかみあぷのWebサイト（http://www.appps.jp/）のリンクを見てみましょう。 マンガボックスのところのボタンとアイコンの２つにiTunesへリダイレクトするリンクがついているのですが、 アイコンの方にはtarget=”_blank”が入っています。ですのでSafariでアイコンの方をタップすると、 ガショウィーン、サッ、ピタッと真っ白なページで止まってしまいます。 これはくまったくま
ブラウザで UNC パスのリンクをオープンする方法 | プログラマーズ雑記帳
Redmine Advent Calendar の 23 日目の記事として、 Firefox などのブラウザから UNC パスのリンクをオープンする方法について書いてみようと思います。 直接的には Redmine と関係はないですが、 私は Redmine を使っていると 共有 PC などへのリンクを張りたくなることが結構あるので、 知っていると便利かなと思います。 file URI と UNC パス PC 内にあるローカルファイルをブラウザなどで表示すると file://D:/home/foo.html といったアドレスになります。 このアドレスは file URI といって、 URI の表記の一つです。 これは RFC で定義されていて、ブラウザでちゃんと扱える表記法なのですが、 http:// のページに張られているローカルファイル(file://)へのリンクは、 メジャーなブラウザ
[HTML5] Indexed DBで検索結果をキャッシュする #1 | DevelopersIO
ベンダープレフィクス抜きで動作するバージョンです。現状では、モバイル端末におけるサポート状況が弱いようです。Safari が非対応なのが厳しいですね。 Web Storage との違い ローカルにデータを保持する仕組みとしては、Indexed DB 以外にも Cookie と Web Storage があります。Cookie と Web Storage の違いについては Web Storage を解説している記事に譲るとして、ここでは Indexed DB と Web Storage の違いについて軽く触れておきます。 複数のオブジェクトストアを使用できる Web Storage と Indexed DB は、どちらも key-value ストア型の容れ物である点については同じです。Web Storage では、ドメイン＋ポート番号を合わせた一つのオリジンごとに一つのオブジェクトストアを使
![[HTML5] Indexed DBで検索結果をキャッシュする #1 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/a18d742778bb675192c3331b71122e80fc5dc1fa/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F11%2Fhtml5.png)
HTML5 - Indexed Database API - とほほのWWW入門
Indexed Database APIとは サンプル API API利用の準備 データベースを開く データストアを作成する データを追加する データを検索する データの一覧を得る データベースを削除する リンク Indexed Database APIとは Indexed Database API は、Cookie, Web Storage, Web SQLデータベース と同様、アプリケーションデータをクライアント側に保存する仕組みのひとつです。下記の仕様が公開されています。 最新版: https://www.w3.org/TR/IndexedDB-2/ V2.0: https://www.w3.org/TR/2017/PR-IndexedDB-2-20171116/ [PR] V1.0: https://www.w3.org/TR/2015/REC-IndexedDB-20150108
hifive - HTML5企業Webシステムのための開発プラットフォーム
ダウンロード Download ダウンロード カスタムダウンロード ツール/ライブラリ ギャラリー Gallery ギャラリー ガイド Guide チュートリアル Webアプリ入門 基本編 データモデル編 データバインド編 リソースFW編 リファレンス APIドキュメント レシピ Recipe レシピ 資料室 Reference HTML5資料室 HTML5用語辞典 開発者向け Developers Developer Channel ユーザーグループ 開発リポジトリ リリースノート コードホスティング 開発者ブログ hifive開発情報 ヘルプ Help 本サイトについて FAQ 本ウェブサイトでは、利便性及び品質の維持・向上を目的に、クッキーを使用しております。本ウェブサイトにおけるクッキーの使用についてはプライバシーポリシーをご参照いただき、クッキーの使用にご同意頂ける場合は「同意す
【HTML5】Indexed Database API を真面目に勉強してみる | DevelopersIO
最近、HTML5アプリ案件でローカルにデータを保存する必要があり、Local Storageを使うかIndexed DBを使うか検討しました。 その際、Indexed DBに関していろいろと調査したので残しておきます。 Indexed Database APIとは キー・バリュー型のデータベースです。まだワーキングドラフト(草案)の状態のため今後、仕様が変わる可能性があります。 ネットで探すとIndexed DBの記事は見つかるのですが、記事が古いとエラーが発生しました。この記事のソースコードも今日時点(2013/4/25)では動きますが今後動かなくなる可能性があります。 Local Storageと何が違うのか Local Storageと違うところは以下の３点です。 Indexed DBはキー以外の項目にインデックスを張ることでキー以外の項目も検索条件にできます。 Indexed DB
デスクトップアプリライクな操作性を実現するドラッグ＆ドロップAPI
＊：draggable属性は10以降 サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。 TIPS 059：特定の要素をドラッグ可能にする ドラッグ＆ドロップ機能を利用するには、まず「その要素がドラッグ可能である」ことを宣言しておく必要があります。ページ内の特定の要素をドラッグできるようにするには、対象の要素にグローバル属性であるdraggable属性を付与します。 ［リスト01］ 、要素をドラッグ可能に（dnd.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> ...中略... </head> <body> <div id="d1" draggable="true">こんにちは、赤ちゃん！</div> <img id="d2" src
JavaScriptでローカルファイルを自在に操る - File API
※ただし、SafariではFileReaderオブジェクトを、Internet Explorer 10ではreadAsBinaryStringメソッドをサポートしていません。 TIPS 053：ファイルの名前／種類／サイズを取得する Fileオブジェクトを利用することで、ローカルファイルの情報にアクセスできます。 例えば以下は、<input type="file">要素で指定されたファイルの名前やサイズなどを表示するサンプルです。 ［リスト01］ファイルの情報を取得するコード（fileinfo.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <script> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" />
第4回 HTML5を使った実際の開発の進め方
みなさん、こんにちは。hifive開発チームの横山です。第2回と第3回では、HTML5で実現可能な表現や機能について詳しく解説しました。これらを用いると、業務システムに従来のWebシステムでは実現できないレベルの高い操作性を持たせることができます。直観的に操作できるUIにより誤操作を防止しやすくなり、ユーザー教育のコストも減らせるのではないか---。そんな期待を持った人も多いのではないでしょうか。 しかしながら、そうしたリッチなUIを備えた業務システムの開発は、単純な画面遷移を繰り返すことで業務を進めていく従来型Webシステムと比べて、開発プロセスを適切に管理し、予定通りの工数で開発を進めることが難しくなりがちです。 そこで今回は、HTML5を使ってリッチなUIを提供する業務システムを開発する際に必要となる「成功させるために考慮すべき点」や「失敗しないための開発の進め方」「役に立つツールや
CSSだけで画像をトリミングする方法3つとjQueryを使う方法1つ | Cappee Design
@cappeeです。 特にシステム案件のコーディングだと、縦横比が異なる画像を扱う場合も多いと思います。 例えばユーザー画像などを正方形で表示したい場合、アップされる元画像はユーザに委ねられるので画像のサイズや縦横比は様々になると思います。アップしたタイミングで画像を加工できるならいいですが、そうでない場合、見た目を整えるためにCSSで同じサイズにトリミングしてしまいましょう。 トリミングにもCSSだけで3つのやり方があるので、状況によって使い分けたいですね。 overflow: hidden を使う 一番オーソドックスなやり方がoverflow: hidden を使ってトリミングする方法です。 trimming というクラス名が入ったトリミングする枠用のタグはブロック要素である必要がありますので、もしインライン要素に指定する場合は、CSSに display: block; も追加してく
簡単にポップアップを実現するjQueryプラグイン「prettyPopin」 | WEBシステム開発 | HAPPY*TRAP
URL:jQuery popin solution – prettyPopin – by Stephane Caron jQueryプラグイン「prettyPopin」を使うと簡単にポップアップが実装できます。 サンプルはこちら(別ウィンドウで開きます)。 使い方を紹介します。 1. 「jquery.js」と「prettyPoint.js」の読み込み <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.prettyPopin.js" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPopin.css" type=
だいきん日記 Ver.5 ＠MT - 新着期間に応じてNEWアイコンの表示 - ほんのちょこっと 本のお話
新着期間に応じてNEWアイコンの表示 Movable Type 2005年03月10日 topページの新着記事一覧で、最近30日以内にエントリーしたものには、NEWアイコンが横に表示されるようにしてみた。ネットでググったところ、PHPを利用したものは見つかったんだけど、ダイナミック・ページではPHPを利用できないので、JavaScriptで表示させるものを作ってみた。 下記コードをnew.jsと名前を付けて保存。<head>～</head>内で<script type="text/javascript" src="new.js"></script>としてnew.jsを呼び出す。 kikan = 30; // 日数を変更する場合はこの値を適当に icon = "<img src='画像へのパス'>"; // 適宜、サイズやalt属性を指定 today = new Date()
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - adchsm/Slidebars: Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app.
CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]![CSSやtype属性でinputの全角・半角入力を切替える [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b4bb8a4a33a630fad5b2f5407193da0266fb2eb/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1466210908981s.jpg)
IBM Developer
