コーディング
ブラウザのデフォルトCSSで表示されるinput要素フォーカス時のデザインを変える。
SafariやGoogle chromeといったブラウザでは、input要素にフォーカスすると、次の画像のように入力エリアのまわりにもやっと...
約物半角専用のWebフォント『Yaku Han JP』が素晴らしい。
@Qrac_jpさんが制作した約物半角専用のWebフォント『Yaku Han JP』が便利すぎるのでご紹介。 約物半角専用の約物(やくもの)...
iPhoneの標準ブラウザ『Safari』の電話番号自動リンク機能を無効にする
iPhoneの標準ブラウザ『Safari』にはページ内に記述された電話番号に自動でリンクする機能があります。 電話番号だけ確実にリンクしてく...
プレースホルダーテキストにCSSを適用する方法
プレースホルダーテキストとはお問い合わせフォームなどの入力欄に事前に薄字で表示されている説明文のことです。 例えばこんなの。入力のためにクリ...
Google Chromeデベロッパーツールの知らなきゃ始まらない超基本操作。
デベロッパーツールはWeb開発者にとって大変便利なツールです。Web開発者の中にはこのツールを使って大半のコーディングを行い、それを実際のフ...
レスポンシブWEBデザインはもう古い?一歩進んで「アダプティブデザイン」
WEB業界は進歩が早く新しい技術が次々と生まれてきます。 フリーランスの身としては、常にアンテナを高く張って情報収集にしておかないとあっとい...
1ページにGoogle Maps APIを利用した地図を複数表示する
Google Maps APIを利用することで、カスタマイズした地図をWEBサイトなどに表示させることが可能になります。 使い方については以...
HTMLで作成したWEBサイトでもブラウザで編集できるCMS 「Sitecake」が便利すぎる
とても重宝しそうなCMS 「Sitecake」のご紹介です。 このCMSの特徴は、HTMLで作成したWEBサイトをブラウザで編集可能にしてく...
Googleマップが表示されない!? 完全にコーディング疲れがでてます。
今日も朝からコーディング三昧です。 制作開始をお待ちいただいているクライアント様もいらっしゃるので、一日で3サイトのコーディングを進めている...
YouTube動画を音量ミュートでWEBサイトに埋め込む方法
YouTube動画をWEBサイトやブログに埋め込むには、特に複雑な作業は必要ありません。 動画の下に表示されている共有から埋め込みコードを選...
ブログカード風にリンクを表示する便利なブックマークレット
ブログカード 「ブログカード」とは、はてなブログの便利な機能です。ブログ記事のタイトルや概要、アイキャッチ画像などをカード型のデザインで表示...
アンカーリンクを利用するとページの上部が切れる場合の対処
昨日はキリンチャレンジカップのチェニジア戦をテレビ観戦しました。 ヴァイッド・ハリルホジッチ監督にとっての初陣ということで、どんな采配を見せ...
【CSS】:first-letter 擬似要素を使って、先頭の文字を装飾する
:first-letter 擬似要素 CSSで:first-letter 擬似要素を使用すると、HTMLには手を加えずに、先頭の1文字だけに...
カスタマイズしたGoogleマップをWEBサイトに表示する方法
WEBサイトを制作すると、アクセスマップなどにはGoogleマップを使用するケースが多いですね。 その場合、デフォルトのままのデザインで組み...
コーディング作業が楽になるCSS3で定義されているセレクタと擬似クラス
cssの基本 HTML文書にレイアウトやデザインといったスタイルを指定するための言語をCSSと言います。 そのCSSの基本的な書式は次のよう...