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

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

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

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

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

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

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

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

    [IE6のバグ] brにletter-spacingを適用すると解釈がおかしくなる

    たまには、文字と文字の間にスペースを入れて読みやすくするために、「letter-spacing」を入れると思います。そういう時に出くわしちゃった問題がありました。 XHTML/HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Con...

    PHP なるべく他とかぶらないユニークな値を取得する

    PHPでユニークな値を取得したい。 どうしても値を同じにしたくない時に便利な関数があります。uniqidってやつです。 次のようにこの関数を利用すれば被る可能性の比較的低い値を取得することができます。 $value = md5(uniqid(rand(), true)); uniqidじゃ他とかぶるからどうするかっていうとrandなどと組み合わせてさらに複雑化する。 さらに日付などを付加すると被る可能性は下がる。ただ何しても完全にバッティン...

    [JavaScript] 簡単! 誰でも、5行で始められるプログラム

    以下の5行をコピーして、メモ帳を開く、そしてそこに貼り付ける。 次に、名前はテキトーにtest.htmlみたいな名前を付けて保存。 保存したtest.htmlをWebブラウザで開く(Internet explorerやFirefox、Google Chrome等) <html> <body> <script type="text/javascript">alert("警告!")</script> </body> </html> 厳密にはC言語とかJavaとかがプログラムだ!といわれるかもしれないけれ...

    プログラムは具体的・的確に伝えてあげることでとても仲の良い友達になれる

    Webサイト上でクリスマスになったら気分を変えたい。と思ったとき、具体的に自分に対してどういった行動をとるか。 それがうまくさらさらと考えられればプログラムと仲良くなれる。 クリスマスに何か変えようとするときに、HTMLを書き換えるのであればその日に対象の画像などを変えて、次の日に元に戻すという事を行えばいい。ただそれだけなんだけど、それがめんどくさいと感じたり、あるいは別の例えばバレンタインデーの...

    Dreamweaverを使って、PHPインクルードを利用したサイトの運営・構築を行う方法

    DreamweaverでPHPテンプレートを利用すると共通部品の更新を行うときにあとあと楽になります。テンプレートを作成する際に「空白のテンプレート」を選択し、「PHPテンプレート」で作成する。そうすると、DWTの拡張子が.phpとなって作成される。 その後そのテンプレートに、部品化するPHPやINCないしHTMLファイルを読み込むincludeを記述する。例えば下記のとおり記載した時。 <?php include("../inc/header.inc")...

    [IE6のバグ] floatをかけたボックスにマージンを設定すると長さが2倍になる

    以下のソースコードを打込み、IE6・IE7で確認するとボックスの左にかけた10pxのマージンが10pxではなく、20pxとなって表示される。IE8、Firefox、Chrome、Safariなどではこのようなことは起こらない(右にマージンを10pxかけても同様に2倍となる)。 もっとも有名な旧IE系のCSS解釈の計算バグです。 ただし、このケースのようにSample1がfloat:left;と指定している時にSample2に同じくfloat:left;とすると、Sample2の左のマ...

    簡素なHTML5 テンプレート(雛形)をつくってみた

    h1とpがいるだけです。 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>HTML5 テンプレート(雛形)</title> <!--[if IE]> <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <h1>HTML5 テンプレート(雛形)</h1> <p>HTML5 テンプレート(雛形)です。&l...

    Ajaxテスト Google Mapを表示させてみた No.0001

    Google Mapを表示させてみた。とっても簡単。※今は動きません。 iframe <iframe style="border: 0;" src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d418338.2826816976!2d135!3d35!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sja!2sjp!4v1428812517281" width="600" height="450" frameborder="0"></iframe> 過去のコード <div id="webneta0001" style="width: 400px; height: 400px;"> <div id=...