【完全保存版】よく使うのによく忘れる（完全主観）web制作コード大全（随時更新中）
2020.05.24
作業中にふっと忘れるweb制作のコードがある。
しかもとても初歩的なコードこそ、よく忘れる。
つどつど検索し、色々なブログにお世話になってきましたが、自分で書いたほうがいいじゃないかということに思い当たりました。
そこでとても初歩的なコードも含め、ふっとした瞬間に不安になる「web制作コード」を公開しました。
HTML
HTMLのアウトライン構造
たまに不安になるHTMLのアウトライン構造。
丁寧に書きすぎるとレイアウトの邪魔になるので、アウトライン構造とレイアウトの構造は別に考え方がいいかもしれません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<body> <header> // ページのヘッダー </header> <nav> // メニュー </nav> <main> // コンテンツ全体 <h1>ページの内容を示すタイトル</h1> <section> // コンテンツのまとまり <h2>コンテンツのまとまりを示すタイトル</h2> <section> // コンテンツのまとまり <h3>コンテンツのまとまりを示すタイトル</h3> </section> </section> </main> <aside> // 補足情報 </aside> <footer> // ページのフッター </footer> </body> |
無性にHTML5のアウトライン構造が正しいのか不安になる時があるので、備忘録としてまとめました
CSS
CSSだけで簡単に追従させたい
いままで「jquery」を用いて一生懸命に構築していた追従がCSS２行で実現できるようになりました。
しかもとても滑らかに！
|
1 2 3 4 |
.fixed { position: sticky; top: 0px } |
参考：position – CSS: カスケーディングスタイルシート | MDN
Font AwesomeをCSSの疑似要素で使いたい
インラインでなくCSSで使用する際に、 font-family 、 font-weight の指定を忘れるので。
|
1 2 3 4 5 |
.hoge:before { content: '○○'; // Font Awesomeのコード font-family: "Font Awesome 5 Free"; font-weight: 900; } |
参考：Font Awesome
空要素に指定した背景を正しい縦横比で表示する
空要素に指定した背景を正しい縦横比で動的に変化させたい時。
|
1 |
padding-top: calc(100% * height / width); |
Javascript
［jQuery］on()による主なイベント処理一覧
jQueryの基本的構文「on()」によるイベントをまとめました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
$('.hoge').on('change', function () { console.log('フォーム部品の状態に何らかの変化がありました！'); }) $('.hoge').on('click', function () { console.log('クリックされました！'); }) $('.hoge').on('focus', function () { console.log('要素にフォーカスが当たりました！'); }) $('.hoge').on('blur', function () { console.log('要素にフォーカスが外れました！'); }) $(document).on('load', function () { console.log('ドキュメントが読み込まれました！'); }) $(window).on('resize', function () { console.log('ウィンドウサイズが変化しました！'); }) $(window).on('scroll', function () { console.log('画面がスクロールされました！'); }) $('.hoge').on('keyup ', function () { console.log('キーが離されました！'); }) $('.hoge').on('keypress', function () { console.log('キーが押されました！'); }) $('.hoge').on('mouseup ', function () { console.log('マウスが離されました！'); }) $('.hoge').on('mousedown', function () { console.log('マウスが押されました！'); }) $('.hoge').on('mousemove', function () { console.log('マウスが動きました！'); }) $('.hoge').on('submit', function () { console.log('フォームが送信されました！'); }) $('.hoge').on('error', function () { console.log('JavaScriptエラーが発生しました！'); }) // 複数イベントの扱い方 $('hoge').on('click change keyup', function () {}) |
参考：【jQuery入門】on()によるイベント処理の使い方まとめ！
スムーススクロールの実装コード
アンカーリンクの際、すーっと動く。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(function () { $('a[href^="#"]').click(function () { var speed = 500; var href = $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({ scrollTop: position }, speed, "swing"); return false; }); }); |
追従ヘッダーのあるサイトでアンカーリンクの崩れを防ぐ方法は？
alertのメッセージ中に改行を入れたい
|
1 |
alert('１行目\n２行目'); |
WordPress
URLを呼び出したい
|
1 |
<?php the_permalink(); ?> |
※あくまでも基本構文。
カテゴリを呼び出したい
|
1 |
<?php the_category(' '); ?> |
※あくまでも基本構文。
タイトルを呼び出したい
|
1 |
<?php the_title(); ?> |
※あくまでも基本構文。
タグを呼び出したい
|
1 |
<?php the_tags(''); ?> |
※あくまでも基本構文。
投稿日時を呼び出したい
|
1 |
<?php the_time('Y.m.d'); ?> |
※あくまでも基本構文。
更新日時を呼び出したい
|
1 2 3 4 5 6 7 |
<?php if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) { the_modified_date( '最終更新日：Y.m.d' ); } else { the_time( '投稿日：Y.m.d' ); } ?> |
アイキャッチ画像呼び出したい
|
1 |
<?php the_post_thumbnail(); ?> |
※あくまでも基本構文。
