html・css

技術情報

モバイルファーストでレスポンシブ+フレキシブルレイアウトで1カラムの入力フォームを作る

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

CSSでフローティングラベルを行う

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

CSSで円の外側へ向かってボーダーを徐々に表示して消す

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

CSSでスクロール時に要素をコンテンツ横に固定する

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

FLOCSSについて疑問な点を考えてみた

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

レスポンシブで画像を表示するにはどうすればよいか調べてみた

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

CSSのactive疑似クラスでクリック時にアイコンを変える

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

WordPressテーマのSimplicityの記事内にあるh2をCSSの「position: sticky;」で表示位置を固定して追従させてみた

指定した要素の位置に移動した場合に、その要素の親の範囲まで固定する「position: sticky;」なる便利なCSSを知り、見出しに適用してみました。 style.css 子テーマの「style.css」で下記の記述をしました。 .ar...
技術情報

HTML5.1で導入されたmenuとmenuitemタグで独自のコンテキストメニューを作ってみた

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

CSSでHTMLの記述順とは異なる並び順にする

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

CSSでレスポンシブなテーブルを表示する

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

リストタグで長さの違う要素を合わせる

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

CSSでログインフォームをデザインする

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

CSSで矢印アイコン付きのリストを作る

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

テーブルを分けて横スクロールをする

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

テーブルを分けて縦スクロールをする

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

ボタンクリックでフォントサイズと背景色を変えて状態を保持する

Webサイトの要件定義で、たまにフォントサイズや背景色の変更があるかと思います。 今回はボタンクリックでフォントサイズと背景色を変えて、かつ状態を保持する方法をご紹介いたします。 サンプル ボタンをクリックすると状態が変化します。 サンプル...
技術情報

slideToggleでアコーディオン風メニューを表示する

メニューが長すぎるのでクリックした時だけ表示したい、という場合があると思います。 今回は「slideToggle」を使用してアコーディオン風にメニューを表示する方法をご紹介いたします。 サンプル 「メニュー見出し」をクリックするとメニューが...
技術情報

CSSで作ったトグルボタンで開閉して状態を保持する

スマートフォンで画面が小さいので、情報のあるエリアをボタンで開閉しつつ状態を保持したい、という場合があると思います。 今回はCSSで作ったトグルボタンで指定したエリアを開閉し、なおかつ状態を保持する方法をご紹介いたします。 サンプル 「お知...
技術情報

CSSで作ったタブを切り替える

Webサイトのお知らせなどのカテゴリが複数ある時は、タブを切り替えて表示させるのが一般的かと思います。 今回はCSSで作ったタブを、jqueryを使用して切り替える方法をご紹介いたします。 サンプル まずはサンプルをご覧ください。 サンプル...