HTML
Googleフォームを独自デザインにしてホームページに埋め込む方法
Googleフォームを独自デザインにして埋め込む方法です。案件によってはGoogleフォームでサクッと作る選択肢もあってもいいかもしれません。 ただ、実際にやっみて思ったのは、カスタマイズして使う選択…
はにわまん 
インラインSVGを使えば画像の色変更をCSSから楽にできる！
HTMLの画像部分を（たとえばホバー時）に色を変えたい場合は、CSSかJavaScriptで画像を切り替えるといった対応しかありませんでした。 しかし、インラインSVGを使えば、画像もHTMLのように…
HTML形式のインデントをスペースでフォーマットできる「gulp-html-beautify」
HTMLを簡単に整形できるフォーマッターの「gulp-html-beautify」の紹介です。Gulpを動かせることが前提なのでGulpが分からない方は以下の記事を参考にしてください。 静的HTMLサ…
HTML4とHTML5の違い！修正箇所を理解してHTML5に移行しよう
HTML4からHTML5に書き換える時に具体的にどこの項目を直せばいいかをまとめました。 個人的にはHTML5の記述方法はとても好きです。無駄なく意味がハッキリしているので納得してコーディングできます…
画像上の任意の場所をクリックできる「クリッカブルマップ」の使い方
Webサイト上に配置した画像内の任意の場所をクリックできるようにするコーディング方法の紹介です。 「クリッカブルマップ」あるいは「イメージマップ」と呼ばれたりしていて、特別な実装方法ではなくHTMLが…
ファビコンのためのHTMLタグとicoファイルを作成できるサイト
ファビコンの設定方法です。ファビコンとは、ブラウザのタブのタイトル横に表示される小さいアイコンのことですね。 当サイト「HPcode」だったら「はにわ」のアイコンを表示させています。 ファビコンは、そ…
HTMLコーディングする時によく出会う実態参照と変換ツール
実態参照とは、どの機種で見てもちゃんと表示されるような文字の指定方法（書き方）です。 実体参照を使うのは2パターンあります。 HTMLタグとして認識される「<」や「&」を文字として扱うた…
各種SNSに共有するためのオリジナルなシェアボタン（URL）の作り方
SNSの時代において、SNSのボタンが存在しないサイトはほとんどありません。コーディグでは確実に求められる要素なので作り方を覚えておきましょう！ SNSのボタンには大きく２つあります。 自身のアカウン…
【SNSの時代に必須】静的なWebサイトでのOGPの設定の仕方
OGPはTwitterやFacebookなどのSNS媒体に投稿された時に、「どのような見栄えで表示させるか」を指定できる規格です。 HTMLのメタタグとしてフォーマットが決まっているので、ルールに沿っ…
最強のPHPお問い合わせフォームテンプレート「Responsive Mailform」の使い方とカスタマイズ方法
無料で利用できるPHPお問い合わせフォームテンプレートの中で、今のところ一番優秀だと思っているのが、「Responsive Mailform」。 入力する人がストレスを感じることなく快適に入力～送信ま…