HTML
-
サイトで丸数字や★♥など特殊文字を文字化けしないで使う方法
FontAwesomeやGoogleマテリアルアイコンを使って、★や♥をアイコンとして表示することはできますが、わざわざアイコンフォントを使わなくても♥や♠を表…
-
電話番号,SMSリンクの設定とPCで無効にする方法
iPhone,Androidなどスマホで電話番号をタップした時に電話がかけられるようする設定とSMSを送る設定と、PCではリンクは無効にする方法のまとめです。 …
-
特定のタブへダイレクトにリンクする[jQuery,Bootstrap,Foundation]
タブレイアウトで、別のページから特定のタブへリンクしたい時に。 BootstrapやFoundationを導入して入れば実現するのは優しいですね。こういう時はC…
-
FontAwesome アイコンを擬似要素で使う、丸で囲む、知ってると便利な使い方
Webサイトでアイコンを使うならFontAwesomeを使えば簡単です。しかし、いくつかのヒントやテクニックを知っておけば、FontAwesomeをさらに活用す…
-
Contact form 7 日付入力でカレンダーDatepickerを表示する方法HTML5,jQuery
予約フォームやイベント申し込みフォームを作成する際にユーザーに日時選択をしてもらう項目を作ることはよくあります。 日付や時間を選択するのにカレンダーを表示すれば…
-
Dreamweaver,Illustrator レスポンシブなイメージマップを作成する方法
ウェブページで画像やイラストの一部をクリックすると新しいページが開くという動作はイメージマップで実現できます。 クリッカブルマップとも言われます。 最近はあまり…
-
イメージマップ（クリッカブルマップ）の作り方とまとめ
イメージマップ（クリッカブルマップ）は画像の一部分をリンク設定できる機能です。 昔からある機能でFireworksやDreamweaverでは簡単に作成すること…
-
Facebook OGP ,Twitter Cards のOGP設定のまとめ
WordPressのOGP設定はこちら OGP（Open Graph Protocol）とはシェアしてもらった時にそのページのタイトル、説明文、サムネを指定でき…
-
[CSS]フォーカス／リンクや要素を選択した時 枠を消したりデザインする方法
この記事ではフォーカスの基礎知識とリンクや要素をフォーカスしたときのデザインをカスタマイズするCSSなどを紹介します。ウェブサイトのビジュアルやアクセシビリティ…
-
CSSのみドロップダウンメニューの作り方と実例5選
jQuery不要、CSSとHTMLだけでも軽快でおしゃれなドロップダウンメニューが作れます。 この記事ではシンプル、簡単なCSSとHTMLだけで作るドロップダウ…
-
レスポンシブ対応コーディングのやり方と注意点
スマホやタブレットなど様々なデバイスでの閲覧に対応したレスポンシブデザインのやり方と注意点のまとめです。 モバイルデバイスでのウェブ閲覧がPCよりも多いというの…
-
クリックで開閉アコーディオンメニューの作成例 jQuery、CSSのみ
スマホサイトで利用する機会の多いアコーディオンメニュー。スペースを節約しつつ、多くの情報を表示できるので、ウェブサイトやアプリのUIによく使われます。 この記事…
-
SCSS mixinの使い方とレスポンシブサイトで使えるおすすめ実例集
SCSSはは簡潔かつ読みやすいCSSコードを書くことができる上に、効率的にコーディングできるCSSの拡張言語です。使い始めた頃は便利さに驚愕していました。その中…