load イベントは HTML ページに含まれる画像やスタイルシートなどすべてのリソースの読み込みが完了した時点で発生するイベントです。 onload プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として load を指定してイベントリスナーを登録できます。ここでは JavaScript を使って load イベントが発生した場合の処理を記述する方法について解説します。
![loadイベント:ページの読み込みが完了したとき](https://cdn-ak-scissors.b.st-hatena.com/image/square/55b4b77f15a6e2e41b00626449c41f0823e7f5fd/height=288;version=1;width=512/https%3A%2F%2Fwww.javadrive.jp%2Fjavascript%2Fevent%2Fimg%2Fp1-0.png)
load イベントは HTML ページに含まれる画像やスタイルシートなどすべてのリソースの読み込みが完了した時点で発生するイベントです。 onload プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として load を指定してイベントリスナーを登録できます。ここでは JavaScript を使って load イベントが発生した場合の処理を記述する方法について解説します。
ここでは、携帯向けサイトの作り方を簡単に紹介します。 PC向けサイトを作ったことのある人を対象とさせていただきます。 まず、携帯版のファイルはPC版と完全に分けましょう。 共通のファイルで済まそうとするのはかなり無理があります。 PCと携帯の違い いくつかあるので順に説明します。 ファイルサイズの制限 これが一番大きなところでしょう。 後で詳しく説明しますが、携帯向けサイトでは1ページ当りのファイルサイズを 画像も含めて5Kbytes程に収めなければなりません。 5Kbytesでは足りない、と思われる方も多いと思いますが 試しに5Kbytesの文章を書いて携帯で表示させてみましょう。 携帯の小さい画面から見ればこれでもかなりの情報量だと感じるはずです。 スタイルシート関連 携帯向けサイトでは、一切のスタイルシートが使えません。 もともと、スタイルシートとは細かな装飾方法をアレンジするための
webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile(ウェブモバイル)は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ
こんにちは。転職して、コーディングする機会も増えてきましたコーダー初心者井畑です。 今回はスマホのコーディングで苦戦したところがあったので、備忘録としてメモしておきます。 同じような悩みをもっている方の助けになれば幸いです。それではどうぞ! 今回作りたいもの 今回作りたかったのは、上図のようにデバイスの幅にあわせてサイズ可変するメニューボタンです。 問題は、メニューボタンを背景画像(background)として表示することです。これが難しかった… 問題点:背景画像の高さ指定がうまくいかない… 背景画像(background)の幅はデバイスの幅サイズによって可変できるので問題ないのですが、高さは基準となるサイズが無いので、指定しないと高さが0になってしまいます。 だからといって高さを100pxのように指定してしまうと、デバイス幅が変わった時に画像が切れたり、無駄な余白ができてしまいますX(
HTMLにおける「段落」をめぐって HTML文書での段落の表現について、混乱し た議論や解説が少なからず見受けられる。この小文では、 HTMLの仕様で定義されるP要素と、日本語文の 段落に関したことを扱う。 HTMLではP要素がparagraphを表す HTMLにおいてparagraphを表す要素はP要素であって、それ以 外には無い。これは疑う余地のない事実である。 段落 = paragraph 英語の "paragraph" に対応する日本 語は「段落」である、ということにすると何かと都合が良い。ただ し、「段落」は "paragraph" の訳語とし ては必ずしも適当とは言えず、敢えて「段落」と言わずに「パラグ ラフ」という言い方がなされることもある。しかしながら、paragraphの意味で「段落」という言葉を用いる のは一般の国語辞典にも見ることができ、ほかに適当な言葉が見当 たらな
2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト! コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「
公開日 : 2010年6月6日 (2021年2月2日 更新) カテゴリー : アクセシビリティ 最近、プログレッシブエンハンスメント(Progressive Enhancement)という言葉をよく目にするようになりました。Webユーザーの増加、ユーザーの閲覧環境の多様化(パソコンだけでなく、携帯電話やスマートフォン、支援技術など)、ユーザーの抱える身体的状況の多様化(障害、加齢、怪我、など)、といった背景を踏まえて、より幅広く、多くの人が情報にアクセスできるようにすることを目指したWebサイトの開発理念です(Webアクセシビリティを実現するための技術的方法論のひとつとも言えますね)。以下、簡単にご紹介したいと思います。 基本的な考えかた あらゆるユーザーに対して、基本的な体験ができるようにします(たとえば、そのサイトが伝えたい情報には、どんな閲覧環境下にいるユーザーでもちゃんと到達できる
2017年6月29日 便利ツール Webサイトを制作する時のWebオーサリングツール・HTMLエディタは何を使用していますか?きっと多くの人がDreamweaverを使っていると思います。私もそうでした。が、最近私のまわりのWebデザイナーがみんなCodaというソフトを使っているのに気づき、試したところ、あまりにも使い勝手がいいので紹介します。本当におすすめです! ↑私が10年以上利用している会計ソフト! Codaの特徴を簡単に 詳しい説明はリンクをクリックでジャンプします。 Mac専用 美しいビジュアル 便利なプレビュー画面 PHPやJavaScriptの動作確認も 素早いタグ打ちが可能 有料 8,500円 はい、Mac専用なんです。このブログを読んでいるユーザーの70%がPC使用なのでこれを記事にするか悩みましたが、Mac愛用者さんに向けて!ちなみに私はCoda英語版をインストールして
病的溺愛シンドローム 愛するWordPressのプラグインを病的に体当たりレポート。その他Tipsやコラムや実験など。サボテンとか日常も書き綴られているのはご愛嬌。 先日紹介したRaw HTMLプラグインと同じような機能の WordPressの自動整形を止めるプラグインを発見したので入れてみた。 WP-UnFormating これはとても単純なプラグインで、オプション設定なども一切ない。 インストールもWordPress 2.7から実装の自動インストールでOK。 使い方は、自動整形してほしくない部分を [unformat][/unfotmat] ([]は半角) で囲むだけ。 AddQuicktagプラグインに登録しておけば便利。 先日からなにをごにょごにょしたかったのかというと、 Google Friend Connectのために専用ページ(上のメニューから飛べるページ)を作ろうとしていた
class名やid名って付ける時悩みませんか? 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ!? 2010年6月10日追記: この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. Source Code Cleaner(ソースコード・クリーナー)とは、Movable Type で構築されるページの余分な改行や空行などを全部削除するお掃除機能と、tabindex や accesskey、さらには外部リンクに特定のクラス名などを自動で付与してくれる便利機能を兼ね備えたプラグインです。 お掃除機能 Movable Type で構築されたページのソースって、余分な改行がたっぷりでなんだか嫌ですよね。 Source Code Cleaner はそれらの改行、空行をきれいさっぱり削除してくれます。余分な改行、空行を削除することでソースコードが見やすくなるだけでなく、ページの表示速度も若干速くなると思います。 当ブログのトップページのソースは、動
また、W3Cの規定ではJavaScriptは以下のように記述します。W3Cの書き方ではバージョンは指定することはできません。 ●デフォルトの言語として指定する場合 <meta http-equiv="Content-Script-Type" content="text/javascript"> ●<script>タグ内で指定する場合 <script type="text/javascript"> JavaScript命令および関数... </script> 2004年現在では<script>タグ内にlanguage属性とtype属性を併記して古いブラウザ(Netscape Navigator 4など)に対応させる場合もあります。この場合は以下のように記述します。 <script language="JavaScript" type="text/javascript"> JavaScript
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く