カテゴリー: コードスニペット

コードスニペットとは、再利用可能なようにコードをどこかにまとめておくこと、すぐに呼び出せるように・利用できるようにオーサリングツール・エディタ・コーディングツールなどに保存しておくことです。

HTML・CSSを始め、Webではサンプルとなるコードが公開されていて、それをコピーして貼り付けて使うことも可能ですが、その該当のコードを見失ったり、あるいはそのサイトが公開しなくなったりと様々なケースが出てきます。手元に残しておきたいコードは、テキストファイルでも良いので、サンプルコードとしてまとめておくと良いでしょう。

冒頭で記述したとおり、オーサリングソフト・エディタなどに登録して、すぐにコード上に貼り付けることが可能な機能を持ったものもあります。それらの機能をうまく活用すると、コードの生成・システム・サイト構築に非常に便利です。

HTMLやCSSにかぎらず、PHP、JavaScript、Cやpythonなどのプログラミング言語においても同じことが言えます。そういった機能がないか改めて調べ直してみる、こういったスニペットを使って効率よく・確実にコードを組み立てていくのが良いかと思います。

このページでは、自分自身のコードの再利用として使っても良いのですが。つまりは、自分自身だけにとどめておくのも良いのですが、他の方も利用できそうなコードスニペットをご紹介します。HTMLやCSSなどはDreamweaverなどに登録しておくと、再利用可能なその名もスニペットというメニューパネルから貼り付けたいコードをすぐに呼び出せます。トリガーキーと合わせて登録しておくとTabキーが必要ですが、ショートカットのようにぱっと呼び出せて、非常に便利です。

コードスニペットは、再利用するという意味、コピーアンドペーストして使う、という意味ではサンプルコードやサンプル、書式などと同じようなものです。ようするに、同じことを実現したい、近いことを実現したい、課題を解決するための処理・記述を利用して使えるようにしましょう・うまく活用しましょうということです。

コード自体は、このサイトに消化している他にも他のサイトなどから日々集めてください。またご自身で作成して、再利用してみてください。自分だけで利用してもいいですし、公開したほうが世の中の役に立つと思うならそれでも。

    jQueryのeachを使って繰り返し・インデックス番号・分岐をうまく活用して表示分けする

    コードすべて すべてのコードを載せたもの。 <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>jQueryのeachを使って繰り返し・インデックス番号・分岐をうまく活用して表示分けする</title> </head> <body> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <style> .disp{ display: inline-block; margin: 0 0 50...

    HTML+CSSでfocus時にoutline(外枠)を表示しないようにする方法

    inputタグやスライダーなどを選択している時に表示される外枠。こちらはoutlineというプロパティ。デフォルトだと表示される設定になっているが、見せたくない場合もある。そういった時はnoneとしてあげることでリセットできる。 inputのCSS 例 input:focus{ outline: none; } :focusという擬似クラスがあるので、設定すると気になるアウトラインが消せる。 *:focus{ outline: none; }

    ★CSSのメディアクエリ(Media Queries)を使い表示を分岐する

    メディアのタイプ 媒体のタイプを指定します。基本的に指定せず、allということで、全ての媒体で同じようにCSSが適用されるようになっています。 スクリーンはよく触れますが、プリンタなどは印刷の指定まで考えていないとなかなか考えませんよね。印刷は簡素にし、印刷用紙にうまくはまるように指定するとより良いです。 テレビ画面は大きいですが、それに合わせた指定も可能です。 @media allすべての媒体 @med...

    HTML+CSSでボタンレイアウトのサンプルコードスニペット

    inputなどのボタンをHTML+CSSを使って表現する・カスタマイズする方法・サンプルコード inputなどのボタン。フォームなどに一つは使う。よく見かけるパーツであるが、色を付けたい、角丸にしたいなど細かいところを指定しないときれいに作れない。結構面倒。 コピペして自分を含めて誰かが楽できればいいんやけど。コピー・アンド・ペースト用のサンプルいくつか準備しましたので使えたら使ってください。 リセット ...

    レスポンシブWebデザイン・100%幅対応 余白付き画像の配置を左右中央に配置し、画面幅が小さいときは最低幅まではカットする方法

    PC向けのCSSとスマートフォン用のCSSをセットで用意します。 PC /********** 100%画像 **********/ #main-visual{ position: relative; overflow: hidden; } #main-visual img{ display:block; position: relative; margin: 0 0 0; left: 50%; -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); transform: translate(-50%, 0); width: 100%; min-width: 1000px; } スマートフ...

    ★WordPressで覚えておきたい よく使用するコード(関数・タグ・処理など)の紹介

    はじめに。覚えておきたいと書いていますが、自分はあまり覚えるのが得意ではないので、そういったときは、こういうのがあったなぁ。というものを覚えておきます。 WordPressはPHPのデフォルトで使用できる関数以外に、WordPressで利用できる関数を独自にPHPの文法で作って、取得したいもの・処理したいものをある程度 楽に、簡単に、柔軟に 実現することを目的として準備しています。古いものは廃止される可能性もあった...

    新しいURL・ドメインになったり、同じドメインでもサイトやシステム・ASPなどを変更した際に404をひとまず解決するコードスニペット

    とりあえず、全部トップページ移動するコード お引越しした後に404が大量発生してしまう案件ってありますよね?同じようなページ・移設したページがあるけれども、.htaccessでそれぞれの記述を適切にコーディングする時間がないし、もうすでにオープンさせてしまっていて、手遅れなケース。そういった場合に、少しでも、404しか出ない状況を改善したい時に簡単に1行書くだけで、トップページに移動するという記述。 404...

    WordPressのログイン画面は自分以外のIPアドレス・ホストのアクセスは拒否する方法/コードスニペット

    IPアドレス単位/ピンポイントで制御 Allow from 000.000.000.000の000.000.000.000は自分のグローバルIPアドレスを指定する。 <Files wp-login.php> Order deny,allow Deny from all Allow from 000.000.000.000 </Files> プロバイダの範囲のみに制限する場合はこちら。IPアドレスが変わってしまうが、プロバイダのホスト名は変更されないという前提で。また、ログインを試みる人が自分のプロバイダのエリア範...

    .htaccessを使って特定のIPアドレスやホストのアクセスを拒否するサンプルコード

    IPアドレス単位/ピンポイントで制御 すべてのページを対象に飛ばしてしまう。 特定のIPアドレスを排除する=どこかのページに飛ばしてしまう。 RewriteEngine On RewriteCond %{REMOTE_ADDR} ^000.000.000.000$ RewriteCond %{HTTP:X-Forwarded-For} ^000.000.000.000$ RewriteRule .* https://example.com/ [R=301,L] 特定のIPアドレス以外排除する=どこかのページに飛ばしてしまう。※!がついているかどうかの違...

    WordPressのeditor-style.cssを使い投稿・固定ページなどの本文の見た目を変更する方法

    editor-style.cssを使えるようにするためには、functions.phpに add_editor_style("editor-style.css"); を追記して、アップロード・上書きする。 これで、editor-style.cssというCSSが読み込まれ、管理画面の投稿画面本文でも、実際に表示される表側(サイト訪問者)に表示される見た目と同じ見た目で編集できるようになる。 また、あえて、見た目を変えてしまうこともできる。見出しとか段落とかのタグの違いを...