タグ

CSSに関するtoshiyukinoのブックマーク (8)

  • まるごとSemantic UIでWebサービスを作った話 - Qiita

    僕はWebサービスを開発するとき、UIの部分については極力CSSのフレームワークの使っています。フレームワークを用いることで、HTMLCSSの開発速度が大幅にスピードアップします。現在は数多くのフレームワークが公開されており、どれもクオリティが高く、どのフレームワークを選ぶのがベストプラクティスなのか、迷ってしまうことってありますよね。うれしい悲鳴です。 少し前まではBootstrapを愛用していましたが、Semantic UIに出会い、このフレームワークの虜になりました。デザインが洗練されており、種類も豊富なため表現の幅が広がります。 Semantic UIに関する記事は、あまり出回っていない...?ので、Semantic UIで作ったWebサービスを紹介しながら、簡単な使い方などを説明していきます。Semantic UI当にいいフレームワークなので、もっと普及してほしいなと思って

    まるごとSemantic UIでWebサービスを作った話 - Qiita
  • 大学ノート(ルーズリーフ)をモチーフとした手書きまとめノート風Webサイトを制作したときに使用したCSSテクニック - Qiita

    まとめノート風Webサイトを作ろうとしたきっかけ 当はWeb制作を執筆してみたかったのですが、資金等の関係もあり、Web上でブログ形式で書いていこうと考えました。そこで困ったのがWebサイトのデザインでした。最近では、ほとんどのブログでフラットデザインが使われていますね。Qiitaもその1つだと思います。フラットデザインとは、色に関していえば基は白地や薄いグレー色で、その他1,2色をアクセント色としてデザインしているもののことですね。比較的簡単に作れて、かつ見やすいデザインなので重宝されていると思われます。 しかし、それではどこも同じような感じなので訪問者の頭に残りづらいと思うんです。そこで、思い出したのが今でもよく使っている大学ノート(ルーズリーフ)です。中学・高校時代はよく要点をまとめたまとめノートを作ったものです。ルーズリーフを使ったことがない人はいないと思うくらい、馴染み深い

    大学ノート(ルーズリーフ)をモチーフとした手書きまとめノート風Webサイトを制作したときに使用したCSSテクニック - Qiita
  • 【決定版】デキるWebデザイナーのための「CSSフレームワーク」ベスト10 

    フレームワークの活用はWebデザインの現場において「当たり前」のものとなってきましたね。制作にかけられる時間・労力は決して無限ではありません。限られた資源(リソース)を効果的に分配するのもプロとして欠かせない姿勢です。今後もこうしたCSSのフレームワークを活用した流れは続くのではないでしょうか。 そこで稿では制作の現場で使えるWebデザイナーのための「CSSフレームワーク」ベスト10をご紹介します!下記にご紹介するフレームワークをうまく活用して、ぜひ日々の業務の効率化にお役立てください。 そもそもフレームワークとは何か? フレームワークとは、来ファイルとフォルダを含むパッケージのことです。CSSフレームワークの場合だと標準化されたHTMLCSS、JSコードを含んだ機能群のことを指します。こうしたフレームワークを使うことで、一からフロントエンド開発を行うよりも飛躍的にWeb制作の生産性

    【決定版】デキるWebデザイナーのための「CSSフレームワーク」ベスト10 
  • [CSS]実はかなり便利!意外と見落とされがちなスタイルシートのテクニックのまとめ

    Webはその進化が早いと言われ、中でもCSSは日々、新しいテクニックや驚くべき実装方法が発表されています。新しいものに目を向けることはもちろん大切です。しかし、すでに利用可能なもので見落としている有用なテクニックがあるかもしれません。 有用なのに、意外と見落とされがちなCSSのテクニックを紹介します。 9 Underutilized Features in CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. レスポンシブ対応に便利な「calc()」 2. 目からウロコの「@media」の使い方 3. カラー指定を変数でおこなえる「currentColor」 4. フォームにかなり便利「:valid, :invalid, :empty」 5. ナンバリングするためにol要素は必要ない「counter」 6. 中身が不明な

    [CSS]実はかなり便利!意外と見落とされがちなスタイルシートのテクニックのまとめ
  • そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita

    帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環

    そろそろ真面目に、HTMLで帳票を描く話をしようか - Qiita
  • http://jamlog.podzone.org/index.php?ex=1&t=15

  • HugeDomains.com

    Captcha security check 440design.com is for sale Please prove you're not a robot View Price Processing

    HugeDomains.com
  • CSSで簡単に早くページを作成・デザインしたいと考えているのですがCSSを勉強したことが無く、どう勉強をしようか悩んでいます。…

    CSSで簡単に早くページを作成・デザインしたいと考えているのですがCSSを勉強したことが無く、どう勉強をしようか悩んでいます。 お勧めの勉強方法ややり方や参考ページ / CSSを導入するに当たっての注意点がありましたら教えてください。 << これからやりたい事 >> ●テンプレート(CSS)をダウンロードして改修後オリジナルのCSSを作成する。 ●オリジナル構造のCSSにデザイン(フリー画像やアイコン、外注した画像等)を入れ込み独自のページを作成する。 ●デザインのいいテンプレートがある場合、作成している人に直接話をして改修後使わせてもらう。 << 現実問題点 & 知りたいこと >> ●少しいじると一気に形が崩れるためとても難しそうに見える。 ●CSSテンプレート改修のコツ(使われている命令は以外に限られているような気がするのですが、、) ●CSSを導入する際に抑えておきたい点 ●HTML

  • 1