タグ

2015年8月18日のブックマーク (4件)

  • Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用

    2015年8月17日 CSS 以前「これからのCSSレイアウトはFlexboxで決まり!」という記事で紹介した、CSSでのレイアウト組みに大活躍できるFlexbox。前回は基的な使い方の紹介をしたので、今回はより実践的に使える実例を紹介したいと思います! ↑私が10年以上利用している会計ソフト! Flexbox対応ブラウザー 前述の記事の通り、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。 そしておなじみの日でのブラウザーシェア情報。2015年7月ではIE11が32.86%でトップです。Flexboxに対応していないIE9は3.17%。制作するサイトに応じてFlexboxを取り入れるか検討しましょう。 一番基的なWebサイトのレイアウトである、2カラム。まずはこのレイア

    Flexboxを使った2カラム・3カラム・マルチレイアウトの基本と応用
  • CSS:難しい?意外と便利なpositionを使いこなそう

    みなさん、positionは使っていますか? 使えるようになるととても便利、だけど理解せずに使ってしまうと酷い目に合うのがposition。 特にプレーンテキストと組み合わせる事が難しいので、敬遠している人が多いかも。 今回はそのpositionの使い方と、ちょっとしたテクニックを紹介します。 まずはpositionの基から positionに指定できるのは下記の4つ。 static 初期値です。指定する事が無いかと言えばそうでもなく、指定したpositionを打ち消す時に使います。レスポンシブでは必須。 relative 相対位置への配置です。開始位置はstaticと同じです。実用の際にはabsoluteの開始位置として使用する場合が多くなります。 absolute 絶対位置への配置です。static以外が指定された親要素を基準とした配置です(ほとんどの場合relativeになります)

    CSS:難しい?意外と便利なpositionを使いこなそう
    hmbd
    hmbd 2015/08/18
  • Illustratorの3D効果で傘のイラストを簡単に描く方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、デザイナーの白浜です。 今回は、普通に描くと形を取るのがむずかしい傘のイラスチを、Illustratorの3D機能を使って簡単に描く方法をご紹介したいと思います。 今回の記事はこちらのまとめをもうちょっと補足した感じの内容になっております。 Illustratorでお絵かきTIPSつめあわせ http://togetter.com/li/743226 下準備 のちに使用する、傘の体部分のシンボルをあらかじめ登録しておきます。 ポイントは、ストライプ状に並べた長方形オブジェクトの下だけ、ワープ機能を使って(今回は下弦を使いました)波なみにしておくことです。 作ったものは、あとからシンボルをダブルクリックすれば編集可能なので、ざっくりとで大丈夫です。 傘の部分を作る つづいて、傘の部分を作っていきます。 傘の断面のパスを描く まず初めに、傘の断面のパスを描きます。 このパスが一周

    Illustratorの3D効果で傘のイラストを簡単に描く方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    hmbd
    hmbd 2015/08/18
  • 配色の参考にいい!シンプルな配色ルールで作り出された魅力的で美しいカラーパレットがいっぱい -Color Hunt

    カラーのトーンをベースに、しっかりしたシンプルな配色ルールで組み合わされた美しいカラーパレットをたくさんコレクションしている「Color Hunt」を紹介します。 目的をもってカラーパレットを探してもいいし、ぼっーと眺めているだけでもよい刺激がもらえますね。

    配色の参考にいい!シンプルな配色ルールで作り出された魅力的で美しいカラーパレットがいっぱい -Color Hunt