CSSで作るWeb用パーツ デザインサンプルで学ぶCSSによるスタイリング~「フォーム(検索ボックス)」編 CSSで作るWeb用パーツ(5) HTML5/CSS3 印刷用を表示 ブックマーク ツイート WINGSプロジェクト 宮本麻矢[著] / 山田 祥寛[監修] 2014/07/28 14:00 ダウンロード サンプルファイル (6.5 KB) 目次 Page1 対象読者 必要な環境 フラットデザインの検索ボックス HTML5でマークアップ positionプロパティで配置する 入力欄の幅と高さの算出方法を統一する フォーカス時とホバー時のスタイルを指定 Page2 立体感のある検索ボックス HTML5でマークアップ positionプロパティで配置する 検索テキスト入力欄とボタンのスタイリング ボタンのスタイリング フォーカス時とホバー時のスタイルを指定 Page3 フォーカス時に幅が広がる検索ボックス HTML5でマークアップ デフォルト時のスタイリング フォーカス時のスタイリング プレースホルダーのスタイル まとめ ※この続きは、会員の方のみお読みいただけます(登録無料)。 会員登録(無料) ログインはこちら <<前へ 1 2 3 連載通知を行うには会員登録(無料)が必要です。 既に会員の方はログインを行ってください。 バックナンバー 印刷用を表示 ブックマーク ツイート あなたにオススメ 著者プロフィール WINGSプロジェクト 宮本麻矢(ミヤモト マヤ) <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂... 山田 祥寛(ヤマダ ヨシヒロ) 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM... ※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です Article copyright © 2014 Miyamoto Maya, WINGS Project, Shoeisha Co., Ltd. バックナンバー 連載:CSSで作るWeb用パーツ デザインサンプルで学ぶCSSによるスタイリング~「テキスト(マルチカラム)」編 デザインサンプルで学ぶCSSによるスタイリング~「floatプロパティによるレイアウト」編 デザインサンプルで学ぶCSSによるスタイリング~「フォーム(お問い合わせフォーム)」編 デザインサンプルで学ぶCSSによるスタイリング~「フォーム(ラジオボタン・チェックボックス... デザインサンプルで学ぶCSSによるスタイリング~「フォーム(検索ボックス)」編 デザインサンプルで学ぶCSSによるスタイリング~「テーブル(ハイライト表示/縦列のスタイリ... デザインサンプルで学ぶCSSによるスタイリング~「テーブル(セルのボーダーの表示形式による... デザインサンプルで学ぶCSSによるスタイリング~「リスト」編 もっと読む × ログイン Eメール パスワード ※旧SEメンバーシップ会員の方は、同じ登録情報(Eメール&パスワード)でログインいただけます。 × ブックマークを利用するにはログインが必要です 会員登録(無料) ログインはこちら All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5