タグ

2015年11月30日のブックマーク (6件)

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

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

    CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン
  • jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法|BLACKFLAG

    今やWebサイトを作る際にはほぼ必須アイテムとなっている ページの最上部に戻るための「ページトップへ」ボタン。 最近ではページ内をある程度スクロールするとボタンが出現するタイプが主流になっています。 そんな「ページトップへ」ボタンの出現方法を フェードイン/アウト、下方向からスライドイン/アウト、ボタン要素を拡大/縮小、 の3つパターンで実装する方法を紹介してみます。 【フェードイン/アウト】 jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法 「【フェードイン/アウト】jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法」サンプルを別枠で表示 ページ内を一定距離スクロールすると 画面右下に位置固定した形で「ページトップへ」ボタンが フェードインして表示されます。 サンプルではページ内を100pxスクロールすると ボタン

    jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法|BLACKFLAG
  • 簡単!img画像を「スクロールすると出現するページトップへ戻るボタン」に設定するjQuery|株式会社ユープラン

    Web関連 2015.09.18 簡単!img画像を「スクロールすると出現するページトップへ戻るボタン」に設定するjQuery こんにちは! 最近の休日は『ドラゴンズドグマオンライン』というゲームを楽しんでおります、Webデザイナーのノザキです。 『ドラゴンズドグマオンライン』が正式サービス開始からなんと10日で100万ダウンロードを突破したという… とてつもない勢いで人気に拍車をかけておりますね! 私も休日はジョブ「ファイター」として、世界を巡っておりますよ(笑) 皆さんの冒険は順調に進んでおりますかー? さてさて、趣味のお話はこの辺にしまして、タイトルにもありましたが今回はimg画像を「スクロールすると出現するページトップへ戻るボタン」に設定するjQueryをご紹介したいと思います。 私はWebを勉強し、初めて導入したjQueryがこの「スクロールすると出現するページトップへ戻るボタン

    簡単!img画像を「スクロールすると出現するページトップへ戻るボタン」に設定するjQuery|株式会社ユープラン
  • jQueryでスクロールすると表示する系いろいろ

    jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration

    jQueryでスクロールすると表示する系いろいろ
  • [CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説

    CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの指定方法 CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値(absolute)と相対値(relative)の二つです。 絶対値(absolute) 絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。 相対値(relative) 相対値はサイズ自体の値を持っていません。サイズは親要

    [CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
    ricopinx
    ricopinx 2015/11/30
    remの指定まで詳しく。
  • display:none と visibility:hidden の違い - Qiita

    visibility:hiddenは名前の通り、要素はあるけど見えない状態。 display:noneは、要素も取得されず、完全にその場にない扱い。 検証準備 html <!doctype html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>difference between visibility hidden and display none</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="one" class="box"></div> <div id="two" class="box"> <h3>Visibility:hidden</h3> エレメント描画されず。けど、表示エリアは「残る」。背景色で塗りつぶした感

    display:none と visibility:hidden の違い - Qiita
    ricopinx
    ricopinx 2015/11/30