ホームページ制作_コーディング

コーディング

ブラウザのデフォルトCSSで表示されるinput要素フォーカス時のデザインを変える。

SafariやGoogle chromeといったブラウザでは、input要素にフォーカスすると、次の画像のように入力エリアのまわりにもやっと...

コーディング

約物半角専用のWebフォント『Yaku Han JP』が素晴らしい。

@Qrac_jpさんが制作した約物半角専用のWebフォント『Yaku Han JP』が便利すぎるのでご紹介。 約物半角専用の約物(やくもの)...

コーディング

iPhoneの標準ブラウザ『Safari』の電話番号自動リンク機能を無効にする

iPhoneの標準ブラウザ『Safari』にはページ内に記述された電話番号に自動でリンクする機能があります。 電話番号だけ確実にリンクしてく...

JavaScript

スティッキーヘッダーでページ内リンクの表示位置がずれた時の調整方法

WEBサイトのファーストビューに背景画像のフルスクリーン表示を取り入れた時に下にもコンテンツがあることを分かりやすくするために、ページ内リン...

Sublime text

フォルダ内を一括検索・置換するならSublime Textが便利。

恋に落ちるエディタのキャッチフレーズで知られる「Sublime Text」をコーディング用に使いはじめて早3年。その使いやすさに「この恋は冷...

JavaScript

Instagram投稿写真をWEBサイトにギャラリー表示させる方法

Instagramにアップしている写真をWEBサイトに読み込んで表示できたら便利ですね。 例えば次の画像のように最新画像から降順にギャラリー...

jQuery

スクロール中にふわっと要素を出現させるには「Waypoints」が手軽でいいよ。

ページをスクロールすると要素がふわっと出現するサイトが増えてますね。 こんな感じで Waypoints 「Waypoints」はこのようなス...

jQuery

スマホやタブレットなどタッチスクリーンのデバイスでもタップした時にホバーエフェクトを効かせる小技

スマホやタブレットなどタッチスクリーンのデバイスはカーソルが乗っている要素にスタイルを適用する:hover擬似クラスが使えません。 そこで、...

コーディング

プレースホルダーテキストにCSSを適用する方法

プレースホルダーテキストとはお問い合わせフォームなどの入力欄に事前に薄字で表示されている説明文のことです。 例えばこんなの。入力のためにクリ...

コーディング

Google Chromeデベロッパーツールの知らなきゃ始まらない超基本操作。

デベロッパーツールはWeb開発者にとって大変便利なツールです。Web開発者の中にはこのツールを使って大半のコーディングを行い、それを実際のフ...

SNS

11月20日に変更されたTwitterボタンのデザイン。ツイート数が消えてレイアウト崩れ対応に涙目。

昨日、Twitterボタンのデザインが変更が完了しました。新デザインは次の通りです。 見て分かる通り、なんとツイート数の表示がなくなっていま...

コーディング

レスポンシブWEBデザインはもう古い?一歩進んで「アダプティブデザイン」

WEB業界は進歩が早く新しい技術が次々と生まれてきます。 フリーランスの身としては、常にアンテナを高く張って情報収集にしておかないとあっとい...

コーディング

1ページにGoogle Maps APIを利用した地図を複数表示する

Google Maps APIを利用することで、カスタマイズした地図をWEBサイトなどに表示させることが可能になります。 使い方については以...

Sublime text

【Sublime Text3】起動の度に立ち上げるPackage Control Messagesをストップ

Sublime Text3 完全に手放すことができなくなってしまったテキストエディタですが、起動する度にPackage Control Me...

Apple

iPhone6でリンクをタップしても開かないのはiOS8.4.1が原因でした

何気なく普段使っているiPhone6でサイトチェックしていたら、リンクをタップしても画面遷移が起こらず焦りましたよ。 調査してみると、iOS...