html・css

レスポンシブでのメディアクエリを考えるとき、いつもこれという感じがしなかったのですが、モバイルからPCへと共通のデザインが多いときに限り、納得のいくスマートな記述ができました。 というわけで、今回は入力フォームを例にモバイルファーストでレス...

下記の記事で紹介されているフローティングラベルが気になったので、CSSで出来るだけ再現してみました。 html 入力のテキストフィールドと対応するラベルを記述しています。 <div class="floating-box"> <input ...

最近CSSのアニメーションが気になり始めてきたので、円の外のボーダーを徐々に表示して消すというものを作ってみました。 ソースコード html ブロック要素をひとつ作っておきます。 <div class="ripple"></div> css...

スクロールする際、要素を固定する時の表示はCSSだとブラウザの基準からしかできないものだと思いこんでいましたが、コンテンツに沿って表示することができたのでご紹介いたします。 ソースコード html 親のコンテンツ内に固定する要素を入れておき...

以前、「GulpとFLOCSSで始めるモバイルファースト的なCSS設計」でFLOCSSをご紹介いたしました。 FLOCSSを使う機会があり、疑問に思ったことがあったので考えてみました。 FLOCSSで組んでいて疑問に思ったこと 命名規則や詳...

スマートフォン、タブレット、PCでレスポンシブなWebサイトをコーディングする際に、画像もレスポンシブにする必要がある場合、どういった要素を使って、どのように画像を切り分けるか悩みます。そこで自分なりに調べてみました。 img要素のsrcs...

最近疑似クラスを少し調べることがあったので、勉強がてらactive疑似クラスでクリック時にアイコンを変えるようなCSSを作ってみました。 ソースコード html div要素のみで作っています。 <div class="sun-moon"> ...

右クリックで表示されるコンテキストメニューをHTML5.1で導入された<menu>と<menuitem>タグで独自に作れるという話を聞き、早速作ってみることにしました。 独自のコンテキストメニューを表示する 下記はFirefoxの最新版で確...

今回はHTMLのソースの記述順とは異なる見た目の並び順にする方法をご紹介いたします。 「float」、「position」使う方法 サイドバーを左、メインを右の表示にする(2カラム) html <div class="main"> メイン ...

以前テーブルを分けてスクロールさせる方法をご紹介いたしました。 今回はCSSでレスポンシブなテーブルを表示する方法をご紹介いたします。 サンプル サンプルではPCで横に見出しがあるタイプのものを、400px以内の表示の時に「th」と「td」...

今回はリストタグで長さの違う要素を合わせる方法ご紹介いたします。 サンプル リスト1～4とリスト5の両端をピッタリ合わせています。 サンプル html 今回はよくありそうなので、liの中にaタグを入れてみました。 ポイントは「</li><!...

今回はCSSでのログインフォームデザインをご紹介いたします。 サンプル ユーザーアイコンと錠アイコンにクリック、またはタップするとフィールドにカーソルがフォーカスされます。 サンプル html ラベルを記述し各フィールドに対応させておくと、...

今回はモバイルでよく見る、矢印アイコン付きのリストを作る方法をご紹介いたします。 サンプル 右端に矢印アイコンが表示されています。 サンプル html ulにクラスがついてる普通のリストです。 <ul class="cursor"> <li...

前回はテーブルを分けて縦スクロールをする方法をご紹介いたしました。今回はテーブルを分けて横スクロールをする方法ご紹介いたします。 サンプル サンプルでは右側のデータ部分が横スクロールします。 サンプル html テーブルをdivで切り、「f...

今回はテーブルを分けて縦スクロールをする方法をご紹介いたします。 サンプル サンプルではテーブルの見出し下のデータ部分がスクロールします。 サンプル html 外枠、見出し、データ部分に分かれています。見出しとデータ部分のテーブルをdivで...