design Edge

  • About
  • Contact

RSS

画像をBase64でHTMLファイルに直接埋め込む方法

画像をBase64にエンコード(変換)して直接HTMLファイルに埋め込む方法をメモしておきます。 ※この記事は過去の記事を最新情報に加筆修正したものです。 Webサイトの高速化技術のひとつとして、HTTPリクエスト数を減らす目的で用いられることもあるインライ ...

リンクのtarget=_blankには「rel=noopener」でセキュリティ対策

リンクを新規ウィンドウ(タブ)で開く「target="_blank"」のセキュリティ対策としての「rel="noopener"」についてメモしておきます。 外部サイトへリンクする際に便利なtarget="_blank"ですが、フィッシング詐欺に利用されてしまう可能 ...

CSSのappearanceを使ったセレクトボックスのカスタマイズ

セレクトボックス(select要素)のデザインを、CSSのappearanceを使ってカスタマイズする方法のまとめです。 つい先日、セレクトボックスをカスタマイズする機会があり、調べてみましたのでメモ代わりにまとめておきます。思いのほか、モダンブラウザでは見た目を ...

スマホサイトのデザインプレビューに。モックアップHTML(iPhone)

スマホ対応サイトのデザインを、クライアントに確認してもらう際に使えるiPhone画面をイメージしたHTMLモックアップをダウンロードできます。 レスポンシブWebデザインも主流になり、Webサイトのスマホ対応が急速に進んでいる昨今、クライアントや代理店などに画像ベ ...

jQuery:ページ内リンクのスムーススクロール

jQueryでプラグインを使わずにページ内リンクのスクロールをスムースにする方法です。 ページ内リンクのスクロールを滑らか(スムース/スムーズ)にするためのjQueryプラグインを見かけることは多いですが、スクロールのためだけに結構なファイルサイズを読み込むのは気 ...

jQuery:下からスライドインするメニュー

jQueryを使って、ウィンドウ下部に固定(FIX)させたメニューを下からスライドインさせる方法です。 ウィンドウ下部にメニューを固定すること自体はよくあることですが、今回はそのメニューをページ読み込みの1秒後に下からスライドインさせます。 上部のメニューと違っ ...

コーディングの品質UPと時短ツール7選

コーディングの品質アップと負担軽減・時間短縮に役立つオンラインツール。様々なツールがありますが、よく使うものは自然と決まってくるものです。今回は、普段よく利用するツールをいくつかご紹介したいと思います。もちろん、どれも無料で利用できるものばかりです! ...

CSS:オンマウス(hover)で画像をフェードする

CSSの opacityと transitionを使用して、オンマウス(hover)した時に画像をフェードさせる方法です。マウスアウトした時もフェードの効果を与えるにはどうすればよいか知りましたので、メモしておきます。 CSSを使用すれば、リンクの設定された画像に ...

CSS:ウィンドウ全体の内側にボーダーをつける

ウィンドウ全体の少し内側にボーダーをつける方法をメモ。デモはこちら。 bodyいっぱいにボーダーを付けた(ように見える)タイプのものは、ネットで検索すればいくつかの方法がヒットしますが、それではありません。 bodyのサイズよりも少し内側にボーダーを設け、ウィン ...

IE6-7でボタンのテキストを非表示にする

IE6-7でボタンのテキストを非表示にする方法が意外すぎるので、自分用にメモ。 先日、本ブログ design edgeのデザイン変更のためにコーディングをしていたところ、IE6-7でSubmitボタンのテキストを非表示にできず、つまずきました。 以下、元のソース ...

人気の記事

  • CSSのappearanceを使ったセレクトボックスのカスタマイズ
  • 画像をBase64でHTMLファイルに直接埋め込む方法
  • Facebookで「このコンテンツは現在ご利用いただけません」とエラーになる場合の対処法
  • 簡単!Illustratorの埋込み画像を元サイズで抽出する方法
  • Windows10にしてネットにつながらなくなった時の対処法
  • 高品質!手書き風デザインの欧文フォントまとめ
  • CSS:オンマウス(hover)で画像をフェードする
  • Twitterのハッシュタグで使えない文字

新着記事

  • Adobe Creative Cloudを20%以上安く購入する方法!
  • 次に欲しい、デザイン性の高い名刺入れまとめ
  • デザイン性の高いおしゃれペンスタンドまとめ
  • GoogleカレンダーAPIキー取得とキーの制限方法
  • Googleマイビジネスの管理ユーザーを追加する方法(PC版)

タグ

CSS HTML Illustrator JavaScript Mac Photoshop SNS Web Windows WordPress まとめ アプリ コーディング デザイン バグ フォント プロダクト 素材

おすすめ書籍

シンカーデザイン|sincar design

design Edgeは、関西を拠点に活動しているデザイン事務所 sincar designが運営しています。デザインツールの Tipsや HTML / CSS / JavaScriptに関するメモ、デザインの過程で思ったことなどを書き留めています。

  • このエントリーをはてなブックマークに追加
このページの先頭へ

デザインエッジ|design Edge

Copyright© sincar design All rights reserved.