令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
jQueryでページ内リンクをスムーズにスクロールする方法 - GGRKS！
ページ内リンクをスルスルスルーとスムーズにスクロールさせるのはもはや鉄板ですよね。 実装も簡単！コピペでOKです。 手順① jQueryを読み込む head内にjQueryのソースを記述します。 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> </head> 私は面倒なので、CDNにホストされているjQueryを読み込んでいます。 jQueryをダウンロードして読み込んでもOKです。 → jQueryファイルのダウンロード 手順②スクロール部分を記述する。 head内にスクロール部分のソースを記述します。 <!-- スムーズスクロール部分の記述 --> <script> $(function(){ //
Androidのバージョン判別 | Hack
function androidVersion() { var ua = navigator.userAgent; if( ua.indexOf("Android") > 0 ) { var version = parseFloat(ua.slice(ua.indexOf("Android")+8)); return version; } } } UAからバージョン数のみを抜き出してきます。 「2.3」「4.4」などの数値で返します。 下記のように利用できます。 if (androidVersion() >= 4) { //Android4以上 } else if (androidVersion()) { //Android4未満 } else { //0:Androidでない }
10年間JavaScriptをコピペしていた僕がJavaScript本格入門して知った驚愕のJavaScript言語仕様覚書 | niwatako$
JavaScriptをなめていた私が勉強しなおした結果、色々驚愕の事実が発覚したお話。JavaScriptをご存じの方には当然の内容かもしれません。 むかしむかし 私にとってJavaScriptといえば、高校生時代(10 […]
Fotorama — Simple and Powerful Responsive jQuery Image Gallery
Set upJust copy and paste the snippets below to integrate Fotorama. 1. This goes to the <head> of your page: <!-- jQuery 1.8 or later, 33 KB --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Fotorama from CDNJS, 19 KB --> <link href="/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <script src="/ajax/libs/fotorama/4.6.4/fotorama.js"></scrip
汎用性の高そうなjQueryイメージスライダー・Fotorama - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 よさ気だったので備忘録。jQueryで作るスライダーです。画像や動画にも対応、レスポンシブWebデザインにも対応しており、マークアップもシンプルで済みます。 なかなかいいスライダーでした。タッチイベントにも対応しているのでスマフォでも使えますね。 見た目はよくあるスライダーですが、汎用性は高い印象です。タッチイベント、レスポンシブWebデザイン、ハッシュタグ対応、動画も可能、フルスクリーン化も可能で、マークアップも画像を書けば良いだけ。 動作サンプルがいろいろ用意されています。 Sample コード <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="fot
Re:jquery 1.xと2.x の違い、さらに動作を音速にするための設定
Re:jquery 1.xと2.x の違い、さらに動作を音速にするための設定 ネタ元 : jquery 1.xと2.x の違い、さらに動作を音速にするための設定 ちょっとツッコミどころが多いので突っ込んでおきます。 使い分ける <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <!-->![endif]--> jQuery 2.xのベータ版が公開されていた際にはjQueryは条件付きコメントで読み込むことを想定していました(上記コードはその時のオフィシャルのコードに
JavaScriptテンプレートエンジンJsRender 基本のキ
はじめに JsRenderは高速、軽量、高性能なJavaScriptテンプレートエンジンです。JsRenderを使うと、ブラウザ側で動的にテキストやHTMLを生成できます。 JsRenderはoutlook.comなどのサイトですでに使われており、今後利用者が増えることが期待されています。先日、JsRenderの正式版のリリースが近いことが、作者であるボリス・ムーア氏のブログで発表されました。そこで、正式リリースに先立ちJsRenderの使い方を紹介していきます。 対象読者 JavaScriptテンプレートエンジンに興味のある方 JavaScript、jQueryの基本を理解している方 必要な環境と準備 JsRenderとjQueryを以下のサイトからダウンロードしてください。JsRenderは単体でも動きますが、jQueryのプラグインとしても機能します。 JsRenderのダウンロード
アニメーションするゲージを作れるJavaScriptライブラリ『JustGage』 | 100SHIKI
いつか使いそうなのでメモ的にエントリー。 JavaScriptでアニメーションするゲージを作れるのがJustGageだ。 ちょっとしたダッシュボードなどに使えていいのではなかろうか。 もちろん色やアニメーション速度もカスタマイズすることができる。 マークアップも簡単なので覚えておいてもいいですな。
XOXCO | Breakpoints.js
Define breakpoints for your responsive design, and Breakpoints.js will fire custom events when the browser enters and/or exits that breakpoint. This is most useful for designs that require different event bindings at different screen sizes - for example a navigation system that behaves differently at different sizes.
ie9.jsを使うと出来ること、出来なくなること。 - Toro_Unit
最近ie9.jsを活用することが少々あるので、 いまさらながらまとめです。 配布場所 ie7-js http://code.google.com/p/ie7-js/で配布されています。 デモはhttp://ie7-js.googlecode.com/svn/test/index.htmlで見れます。 使い方 head内に [html] <!–[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <![endif]–> [/html] と貼り付けるだけです。フッターに貼ると誤作動起こす場合がたまに合ったような気がします。 できるようになること E > F 子セレクタ。直下の子要素にのみ適応するやつ。 E + F 隣接兄弟セレクタ。Eのすぐ下隣に居る弟要素
や...やっと理解できた！JavaScriptのプロトタイプチェーン - maeharinの日記
JavaScriptのプロトタイプチェーンについて理解しようとしたのだけど、prototypeとか__proto__とかごちゃごちゃになって、色んなブログを読んでもなかなか理解しきれなくて悶々としていたのだが、図を書いたらパッと理解できた！以下、情報ソースはなるべくECMAScript仕様書（3rd）を元にするようにして書きました なぜ分かりづらいのか？ そもそも、なぜJavaScriptのプロトタイプチェーンは自分にとってこうも分かりづらかったのだろうか？自分なりに分析してみると、まず、「似ているが違う用語が沢山ある」という点がある。ざっとあげただけでも、「prototypeと__proto__」「__proto__と[[Prototype]]」「FunctionとFunctionオブジェクト」などがある。そして次に、「入り組んだ構造が動的に変化する」という点がある。上記のように似たよう
とあるコーダーの備忘録 |css3-mediaqueries.jsが効かなくて困った時のまとめ
最近にわかに盛り上がってきているレスポンシブWebデザイン。 PC・タブレット・スマホなど、様々なスクリーンサイズのデバイスに対応するためにメディアクエリを利用してスクリーンサイズ幅などに応じてレイアウトを調整する技術ですが、残念ながらIE8以下はこれを理解しません。 IE8以下はレスポンシブにならなくても良いなら話は早いですが、 「全部同じ見た目じゃなきゃヤダ！」というクライアントを説き伏せられない場合は 何らかのポリフィル系JSで対応する必要があります。 いくつか似たようなものはあるようですが、 おそらく以下の２つが最有力候補かと思います。 ・respond.js ・css-mediaqueries.js ■respond.js Adobe Dreamweaver CS6の目玉機能「可変グリッドレイアウト」でも利用されているスクリプト。 非常に軽量でサクサク動き、にわかに本命的な扱いを
レスポンシブwebデザインに関する自分用メモ « ThinkChip
レスポンシブwebデザインについて勉強してみました。 勉強がてら簡単なテンプレートをつくってみたものの、いろんなところで躓きまくったので、制作過程で得た情報や注意点などを忘れないうちに全部まとめておこうと思います。 レスポンシブwebデザインとは １つのソース（html）をもとに、ウインドウサイズに応じてページのレイアウトを変化させる手法。 CSS3のMedia Queryでレイアウトを制御する。 基本的にはリキッドデザインだが、デバイスごとにレイアウトを変化させるため、ページ内の要素や配置、画像、フォントサイズなどを、設定したブレークポイントごとに調整する必要がある。 勉強したり参考にさせていただいたサイト →レスポンシブwebデザインで制作する時のポイント →CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き →レス
なんとWordPressプラグインまである。多彩なエフェクトでレスポンシブなフリーのjQueryスライドショー『Camera』 / Maka-Veli .com
なんだか話題になってるみたいですね？『Camera』というスライドショー。 特徴としては レスポンシブ 多機能、ハイクオリティ 多彩なエフェクト スキンも多数用意 WordPressで管理できる という感じなのですが、WordPressプラグインは本当にびっくりしました。 ウィンドウリサイズするとちゃんとレスポンシブ WordPressプラグイン。管理画面もしっかり用意されている 管理画面上でエフェクト等が細かく設定可能 他にも多数機能あり フリーなんですが、サポート（寄付）してね、というスタンスなのでもしよければ寄付して使ってみてはいかがでしょうか Camera http://www.pixedelic.com/plugins/camera/ WordPressはこちらから http://wordpress.org/extend/plugins/camera-sli
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
finefinefine.jp
Loading
滅び行くAndroid 標準ブラウザをサポート外にして悩みの種をなくす話
[jQuery] ユーザーエージェントの判定 スマホ（iPhone、iPod、Android）、タブレット、IE11にも対応 | 5 LOG![[jQuery] ユーザーエージェントの判定 スマホ（iPhone、iPod、Android）、タブレット、IE11にも対応 | 5 LOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/7600b8bd7209e2506afdfe6c6263f79c6cbba297/height=288;version=1;width=512/http%3A%2F%2F5log.jp%2Fwordpress%2Fwp-content%2Fthemes%2F5log%2Fimg%2Fog_img.png)
1216彩票-官网平台