タグ

関連タグで絞り込む (2)

タグの絞り込みを解除

CSSとアイコンに関するar0のブックマーク (2)

  • 【CSS】リンク先のURLやファイルの拡張子に合わせてアイコンを表示する方法。

    普通のリンクだと思ってクリックしてみたら、実はそれがPDFファイルへのリンクだったり、意図せずメール・アプリケーションが起動したり、またはワードやエクセルのファイルだったりするとさらに最悪…。ネットサーフィンをしていると、そんなフラストレーションが貯まるような機会に遭遇することがしばしばあります。 自分が運営するサイトでは、ユーザーにそんな嫌な思いをさせないために、PDFへのリンクの場合はPDFのアイコン、メール・アプリケーションが起動する場合はメールのアイコンを表示させるなどのような、細かい気配りが大切だと考えています。 まずは、以下のHTMLを見てください。 HTML の記述方法<!-- 通常のリンク --> <a href="http://example.com">http://example.com</a> <!-- mailto --> <a href="mailto:examp

    【CSS】リンク先のURLやファイルの拡張子に合わせてアイコンを表示する方法。
  • CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン

    最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、「カスタマイズやメンテナンスが容易」「レスポンシブWebデザインとも相性が良い」「画像を読み込まないのでモバイルユーザーにも優しい」「Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次: 共通HTMLCSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン(大) シンプルな太い矢印アイコン シンプルな太い矢印アイコン(大) 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン(大) 右下向きの矢印アイコン 右下向きの矢印アイコン

    CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン
  • 1