タグ

関連タグで絞り込む (0)

  • 関連タグはありません

タグの絞り込みを解除

cssとHTMLとjavascriptに関するSireのブックマーク (4)

  • 令和のHTML / CSS / JavaScriptの書き方50選

    Web制作技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい!」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。

    令和のHTML / CSS / JavaScriptの書き方50選
  • Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita

    iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能(OSX版含む) CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。

    Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
  • マウスオーバーすると補足メニューを表示します。 - CodingMania

    デモページへopen_in_new JSを読み込みます <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="tool.js"></script> [tool.js]JavaScript // summenu 表示 $(function(){ var li = $('.mod_categorynav > ul > li'); $(li).each(function() { var target = $(this); target.hover(function(){ //マウスが乗ったら $(target).find('.mod_submenu').sli

    Sire
    Sire 2014/09/29
    マウスオーバでメニューを出す
  • 30分でできる!Webサイトを高速化する6大原則 (1/4)

    Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか? もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション(10段階)、横軸が表示までの時間を表している。1~5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう

    30分でできる!Webサイトを高速化する6大原則 (1/4)
  • 1