タグ

ブックマーク / www.webcreatorbox.com (5)

  • 料金表をわかりやすくデザインするコツ。実例やレスポンシブ対応サンプルも!

    2017年10月31日 CSS, Webデザイン, Wordpress サービスを提供しているWebサイトにとって大切なのが、各プラン内容とその料金。複数の選択肢がある場合、その違いがわかりにくかったら、ユーザーを困惑させてしまいます。今回はWebサービスのコンバージョンにも繋がる、わかりやすい料金表の作り方を考えてみたいと思います。 ↑私が10年以上利用している会計ソフト! 料金表をデザインするときのポイント 1. プランの違いをわかりやすく まずは各プランのサービス内容と料金をわけることから始めましょう。各プランの名前を料金表の先頭において、ひと目でどのプランについてまとめているのかを認識できるようにします。プランをグレードアップするごとにプランの名前もランクが上がるよう命名しましょう。 よくあるプラン名: ブロンズ・シルバー・ゴールド・プラチナ マイクロ・スモール・ミディアム・ラージ

    料金表をわかりやすくデザインするコツ。実例やレスポンシブ対応サンプルも!
    sigwin
    sigwin 2015/05/27
  • かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技

    2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト! 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す(文字色も変更) ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう!サンプルも作ったのでコードと

    かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
    sigwin
    sigwin 2015/03/17
  • Webデザイナーを目指す初心者さんが知っておきたい専門用語

    2014年11月5日 Web関連記事 WebデザイナーとしてWeb業界で活躍したいという初心者さんが、最初につまづきやすいのが、その専門用語の多さ。Webデザインの入門書をパラパラッとめくってみても、見慣れない単語に圧倒されてしまう人も多いのではないでしょうか?そこで今回はWebデザイナーなら知っておきたい単語をいくつかまとめてみました。Webデザインのお勉強中に「これなんだ?」という単語に出くわした時に参考にしてみてください! ↑私が10年以上利用している会計ソフト! 目次 あ行 か行 さ行 た行 は行 ま行 や行 ら行 わ行 あ行 アクセシビリティ Webアクセシビリティとも呼ばれます。アクセスのしやすさを表し、実生活上ではバリアフリーとも知られています。Webのアクセシビリティにおいては、音声によってWebページを読み上げたり、動画に字幕をつけるなどの工夫をして、身体の不自由な方でも

    Webデザイナーを目指す初心者さんが知っておきたい専門用語
  • Useful CSS Text Effects

    2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック!基的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト! テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ

    Useful CSS Text Effects
  • コーディング規約を作ろう

    2017年1月6日 Webサイト制作, 便利ツール コーディング規約やスタイルガイドは、HTMLCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 ↑私が10年以上利用している会計ソフト! コーディング規約に含むべき項目 ディレクトリー階層 ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「

    コーディング規約を作ろう
  • 1