タグ

cssに関するsink2009のブックマーク (5)

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

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

    CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン
    sink2009
    sink2009 2018/10/02
  • Bootstrap3.xで最低限度のレスポンシブ対応フロント画面を作る - Qiita

    プログラマの永遠の悩み。デザイン。 とりあえず何か作らないといけない時のためのメモ。 やりたいこと Bootstrapでティザー等、最低限度のフロント画面を作る方法をとりあえずまとめておきたい。 基レイアウトを決めておけば、全体のデザインやパーツ、パーツをデザイナさんにお願いしやすい。 別にFoundationでいいのですが、管理画面はBootstrapベースのAdminLTEで作るので、ノウハウを極力一元化しておきたい。 作るもの とりあえずこんなやつ。いちおうデモサイトも。 英語やマット系で作るとそれなりにかっこ良くなり、実データ(日語)を適用した際のギャップに凹むのでとりあえず、ゴリゴリの日語かつ普通の写真で作る。 全体の配色やカルーセル画像をデザイナさんにお願いするような流れとする。 また、スマホ?サイズの場合は、メニューが隠れる(collapse)ようにし、カルーセルの文字

    Bootstrap3.xで最低限度のレスポンシブ対応フロント画面を作る - Qiita
  • 日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

    2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います! ↑私が10年以上利用している会計ソフト! 動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の

    日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
    sink2009
    sink2009 2017/03/31
  • iPhone/iPod Touch 対応サイトを作る

    The Django Book (日語) サイトをiPhone/iPod Touchに対応させてみました。iPhone対応サイトを作る方法はいくつか(iUi、Universal iPhone UI Kit、jQuery Touch等が有名)ありますが、今回はCSSのみを用いて実装することにしました。既存サイトをiPhone/iPod Touchに対応させるには一番近道だと思います。大きな変更点は3点です。 画面のリサイズを無効化する 以下のようなコードをheadタグ内のmetaタグとして追加します。 <meta content="width=device-width; maximum-scale=0.6667; user-scalable=0;" id="viewport" name="viewport" /> iPhone/iPod Touch用のCSSを追加する 以下のようなコードを

  • ブラウザによる見え方の違いをチェック | *LOVE IS DESIGN*

    Webデザインや配色に役立つ(かもしれない)テクニック、便利なツールを紹介しています。 /*無駄にエロいのは仕様です*/ 01 About 02 Blog 03 Color 04 Design 05 Love 06 etc CSS をいじりだすと気になるのが、ブラウザによる見え方の違い。 このブログでは訪問者の約65%が Internet Explorer ユーザですが、最近は Firefox など Mozilla系や、Opera・Safariといったブラウザの方も増えているようです。 わたしはWinXP+スレイプニルという環境で更新作業をすることが多いのですが、はてなツールバーがスレイプニルでは使えないので、最近は Firefox をメインブラウザとして使用しています。(もうすっかりはてなっ子) CSS をいじったり記事をアップした後、スレイプニルで見た時は思ったとおりのデザインだったの

    ブラウザによる見え方の違いをチェック | *LOVE IS DESIGN*
  • 1