CSS Transitionを使ったスムーズにスクロールしてトップに戻る機能
前に作ったスクロールした時に位置固定のロゴをトップに戻る機能にすり替えるものを少し手直しして再導入した。今回はスムーズにスクロールさせようかと色々考えていたが、やはりJavaScriptでscrollTo()を制御するのはコストが高い。CSSならどうだと試行錯誤したところ、どうやらbody要素への負のマージンをCSS Transitionで滑らかに変化させれば良いようだ。 Demo: Scroll Smoothly with CSS Transition デモのページにはダミーテキストの各セクションの最後にそれぞれ⇑ Back to Topというリンクがある。それをクリックすると1秒かけてスムーズにスクロールしながらトップに戻る。トリガーとスクロール自体はJavaScriptで行っているが、スクロールのアニメーション自体はCSS Transitionで行っている。具体的には以下のような処理
mailto リンクに予め件名などを「文字化け」しないように入れる方法ですよ♪
ウェブページのリンクをクリックしてメーラーを起動、送信する方法をメモします。 基本的な型 <a href="mailto:mailto@example.com?subject=ここが件名&body=ここに本文">メールへのリンク</a> 実際に使うときはこんな問題にぶつかります。 以上、、、なのですが問題があります。 UTF-8 のページだと、文字化けします。 件名はともかく、本文は改行したい。 ではどうしましょうか？1つ目は以前解決した問題と同じです。これですね。 QR コードが文字化け・末尾切れします→解決できました♪ | oki2a24 つまり、全角日本語を URL エンコーディングすればよいのです。これを行うのに便利なサイトを挙げておきます。3つ目のページがよいです。半角英数はそのままなので、文字数が節約できます。 Web便利ツール/URLエンコード・デコードフォーム – TAG
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
