【コピペOK】ユーザビリティを高めるHTML・CSSフォーム基本テク！
みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！ みなさんはユーザー登録やお問い合わせのページって作ったことありますか？ See the Pen XGgMrB by JOラファエロ (@jo_raffaello) on CodePen. このようなフォームのページを作成するには、inputタグやtextareaタグなどといったフォーム部品タグと呼ばれる専用のHTMLタグを使います。 多分、Webデザイン初心者の方はほどんど触ったことなかったりするんじゃないでしょうか(^^;) 実はフォーム部品タグには、ユーザビリティを向上させるための専用の属性や便利なCSSの設定が色々あるんですよ！ ということで、今回はフォームのHTML・CSS基本テクをご紹介します！
コーディング作業はもう一切不要！2.0でものすごい進化を遂げた、国産の無料デザインツール -STUDIO 2.0
去年当ブログで紹介した際にも評判が高かったSTUDIOが、満を持して2.0にアップデートされました！ STUDIOはコーディング作業は一切不要で、Webサイトやスマホアプリのデザインを積み木感覚で楽しくデザインできるツールで、無料で始めることができます。 STUDIO STUDIOの特徴 STUDIOの使い方 STUDIOの特徴 STUDIOは無料で利用できる国内産のデザインツールで、Webサイトやスマホアプリのモックアップ作成から、デザイン、さまざまな実機でのプレビュー、公開、そして運用や解析まで、それぞれの専門知識に詳しくなくても簡単にできます。
NES.css - ファミコン風サイトになるCSS MOONGIFT
コンピュータはどんどん進化しており、より繊細なグラフィックス、リアルに近づく3D、臨場感あふれるサウンドといった具合に私たちを引きつけ続けています。そんな中、初代ファミコンもまた人気を持ち続けています。8bitでレトロ、とても今のコンピュータとは比較にならない代物であるにも関わらず、今なお多くの人たちを魅了しています。 そんなファミコン風のUIをWeb上で再現できるのがNES.cssです。懐かしさの中に楽しさを感じる、スタイルシートです。 NES.cssの使い方 ボタンやコンテナの表示。それっぽいデザインですね。 ラジオ。まるで戦うや逃げるといった選択肢を選ぶような…。 チェックボックス。ごつごつしたドット絵風の表示がいいですね。 入力系。主人公の名前を入れるやつですね。 メッセージ。ノスタルジックなチャットが作れそうです。 テーブル。何の装飾もないのがいいですね。 アイコン。まさにドット
Tabulator - これはすごい。HTMLテーブルを高機能に MOONGIFT
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
カオス化したスタイルシートから卒業！CSSでカラーを管理する効率的な方法
テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design system, part 3: Colors by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーをCSSで効率的に管理するために セマンティックにするか、宣言型にするか 基本的なカラーパレットの作成 セマンティックカラーの追加 このアプローチを採用する理由 テーマに使用するカラー はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとして利用できるので、一足先に公開します。 Web Components|CodyHouse カラーをCS
スマートフォンを考慮したフォント指定の検討 | Web Tips
公開日：2014年8月22日 最終更新日：2019年3月25日 Webページで使用するフォントはCSSでfont-familyプロパティに指定します。PCサイトの場合はWindowsとMac OSを対象にしますが、スマートフォンで閲覧することも考え、iOSとAndroidも含めた指定を検討してみました。 欧文フォントだけを考えればいいのなら、Webフォントで対応することが現在は主流です。 しかし文字種類の多い日本語フォントが必要なサイトでは、どうしても端末にインストールされているデバイスフォントを使用せざるを得ません。 どういうデバイスフォントがインストールされているかは、端末により異なります。 MacとWindowsで共通しているフォントもありますが、デフォルトで使用するフォントは違いますので、Webページの表示を整えたいのならきちんと指定することが必要です。 スマートフォンまで考えたら
8ステップで完成！CSS3で「斜めのストライプ」を作る方法
各ブラウザのCSS3の実装も進み、最近では画像を使わずにサイト上のブロックの背景をCSSだけでデザインすることが増えてきていると思います。特にスマホサイトなどではできるだけ画像を使わずに容量をおさえておきたいということから、その傾向が強いと思います。今回は背景パターンとしてよく使われる「斜めストライプ」をCSSのみで作る方法についてまとめてみようと思います。 まず、前準備として以下のようにdiv要素を作っておきます。このdiv要素に対してCSSを指定していきます。 <div class="div2269"></div>それから、斜めストライプを作成する上で必要なCSSは、「linear-gradient()関数」と「background-sizeプロパティ」となります。事前にご確認ください。 linear-gradient – CSS | MDNbackground-size – CSS
CSSのみでボーダーをスタイリッシュにアニメーションさせる - Qiita
はじめに 何て表現すれば良いかアレですが、こんなエフェクトを見かけたので再現してみました。マウスオーバーで四方のボーダーがシュッと伸びてきます。Coolデスネ :) [動作イメージ] なお実際の動作・ソースは以下で確認ができます http://codepen.io/nekoneko-wanwan/pen/EVjdvX http://nekoneko-wanwan.github.io/demo/mouse-action/hover/border/ 仕組み 実はアニメーションしているのはborderではなく、幅or高さ1pxの擬似要素です。リンク要素とその内側要素に::before, ::afterを設定して、それぞれ四隅に配置し、:hoverでサイズを100%にする動作をtransitionしているだけです。 コード <a href="#" class="button change-bord
[CSS]画像にキャプションをさまざまなCSS3アニメーションで表示するスタイルシート、コピペで簡単に利用できます -iHover
デモページ：スクエア iHoverの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 ※スクリプトは不要です。 <head> ... <link href="styles/ihover.css" rel="stylesheet"> </head> Step 2: HTML 基本的にはノーマル時に表示するサークル（スクエア）とホバー時のものをdivで内包します。細かい点が各デモごとに異なるので、それぞれのデモページを参考にしてください。 Effect 1だと、こんな感じです。 <div class="row"> <div class="col-sm-6"> <!-- normal --> <div class="ih-item circle effect1"><a href="#"> <div class="spinner"></div> <div cl
IE対策 | HTML5+CSS3でサイトを作ってみる。
■ IE対策 - HTML5編 - IE8とそれ以前はHTML5に対応していません。 html5でサイトを作ってみる。とどちらに載せようか迷いましたが、CSS3に関する記事もあるので IEに関する情報はこちらにまとめて掲載することにします。 HTML5やCSS3に適用させる方法は、日々新しいやり方が出ている気がしています。ここに掲載されている内容も、すぐに古くなるかもしれません。 ここではいくつかの方法をご紹介していますが、いくつかを併用したり、サイトの用途によって使い分けてもいいでしょう。 html5shiv 上記URLからファイルをダウンロードし、jsファイルを任意のディレクトリに置き、headに組み込むだけ。 旧バージョンのブラウザでもHTML5を認識しブロック要素として認識される。 この場合、IE9はhtml5対応なので、IE9未満に向けて設定する。 <!--[if lt IE 9
【保存版】IEのバージョンを判別し、バージョンごとにスタイルを適用する3つの方法 | DX.univ
エンジニアの菊池です。 今回、初めてブログを投稿させていただ[...]エンジニアの菊池です。 今回、初めてブログを投稿させていただくことになりました。 業務では主にフロントエンドの実装とマークアップ等を担当しています。 さて、Windows XPのサポート終了まで残り約8ヶ月となりました。 ようやく長くにわたり苦しめられてきたIE6から解放されることになりますが、でも実はIE7、8、9もIE6ほどではないまでもバグや独自解釈が多かったりします。 そんな時にはCSSハック等の手法やJavascriptを利用してIEだけ特別な処理やスタイルを適用したりします。 ということで今回かなり今更感はありますが、自分用の備考録も兼ねてIE6〜10のバージョン別CSSハックと条件付きコメント分岐、jQueryによるIEバージョン判別の3つの方法についてまとめてみました。 1.CSSハック /* I
プログラマのためのカラーパレットツールを作りました - shoya.io
Paletta - HSV Color palette for every Programmer 背景 フラットデザインの台頭によって、昨今のアプリ/サービス開発において「色選び」が重要視されています。例えば上の写真は次のトイレの時刻を機械学習で予測するRestCastというアプリですが、「いい感じの青」を基調としたタイルを敷くことで、トイレというワードをニオワセないデザインに仕上がるよう心がけてつくりました。 デザイナー/プログラマーの皆さんは普段どうやって色を選んでいるのでしょうか。多くの場合、既存のカラーパレットをぽちぽち選択したり、#123456のようなカラーコードを調整するのではないかと思います。実は、この方法で「いい感じの色」を選ぶのは難しいのです。その理由を色の表現方法を踏まえて説明します。 混色系と顕色系 色を数値で表現する方法を表色系といいます。オストワルト表色系やマンセ
フラットデザインに使える配色をコピーできるサイト「Flat UI Colors」 | ライフハッカー・ジャパン
「Flat UI Colors」は流行りのフラットデザインに使える配色をワンクリックでコピーできるサイトです。最近よく見かける「フラットデザイン」を採用したウェブサイトに使われている色をまとめています。それぞれの色をクリックすると、クリップボードにカラーコードがコピーされますよ。 以下に使ってみた様子を載せておきます。まずFlat UI Colorsへアクセスしましょう。 このようにフラットデザインに使える配色が綺麗にまとまっています。 色を選択すると、その色のカラーコードがコピーできますよ（HEX値やRGBなどから選べます）。フラットデザインに挑戦してみようという方は、これらの配色で作ってみてはいかがでしょうか。きっと綺麗な仕上がりになることでしょう。 Flat UI Colors （カメきち）
パララックスサイトを作ろう (全11回) - プログラミングならドットインストール
パララックス（視差）効果を利用した、立体的な動きのあるサイトを作ってみます。
CSS3だけで作れる格好良いローディングアニメーション５つ！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、モモコです。 ゲリラ豪雨に備えて折り畳み傘を常にバッグに入れているせいか、何となく肩が重いです。 今回はCSS3だけで作れるローディングアニメーションを5つご紹介します！ 閲覧の際にはモダンブラウザ（最新のGoogleChromeなど）をご利用下さい。 FADE LOADING FADE LOADING 入力した文字がふわっと浮かび上がるローディングアニメーション。 質感と動きが合っていてがとてもエレガントです。 CSS3 loading animation experiment CSS3 loading animation experiment DIRT3というゲームのUIにインスピレーションを得て作成されたローディングアニメーション。 多彩な変化がついており、とてもクールなアニメーションになっています。 CSS only loading spinners CSS onl
WEBデザイナーのためのHTML/CSSの最新チュートリアル10「10 Useful HTML/CSS Tutorial for Web Designers」
TOP > Design , WebDesign > WEBデザイナーのためのHTML/CSSの最新チュートリアル10「10 Useful HTML/CSS Tutorial for Web Designers」 WEBデザインは日々進化していて、最近では、フラットデザインも大きな一つのジャンルになりつつあり、シンプルなデザインだけに、ちょっとした動きやエフェクトが大事だったりします。今日紹介するのはそんなデザインの味付け的なWEBデザイナーのためのHTML/CSSの最新チュートリアルをまとめたエントリー「10 Useful HTML/CSS Tutorial for Web Designers」です。 How to Create a Trendy Flat Style Nav Menu in CSS 全部で10のチュートリアルが紹介されていますが、今日はその中から気になったものを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
このCSSアニメーションのアイデアすごい！CSSの疑似クラスで実装するフローティングラベル
少しずつ色が変わるグラデーション背景をCSSで作成出来る・「CSS GRADIENT ANIMATOR」
「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘（スイッチ）
これからのWeb制作に使える、面白いUIを実装できるjQuery・CSS集
