技術情報 アイコン付きボタン内に吹き出し
See the Pen Untitled by ボヘミアン (@bohe) on CodePen.
html・css
技術情報 
技術情報 見出しの左側に線
See the Pen 見出しの左側に線 by ボヘミアン (@bohe) on CodePen.
技術情報 ページ内リンクのURLに#を表示
See the Pen Untitled by ボヘミアン (@bohe) on CodePen.
技術情報 CSSでフォントサイズなどをレスポンシブ対応にする
See the Pen Untitled by ボヘミアン (@bohe) on CodePen.CSSでfont-sizeをレスポンシブ対応にするツールMin-Max-Value Interpolation
技術情報 吹き出し鋭角下三角形
See the Pen 吹き出し鋭角下三角形 by ボヘミアン (@bohe) on CodePen.
技術情報 吹き出し下三角形
See the Pen Untitled by f.w (@bohe) on CodePen.
技術情報 モバイルファーストでレスポンシブ+フレキシブルレイアウトで1カラムの入力フォームを作る
レスポンシブでのメディアクエリを考えるとき、いつもこれという感じがしなかったのですが、モバイルからPCへと共通のデザインが多いときに限り、納得のいくスマートな記述ができました。というわけで、今回は入力フォームを例にモバイルファーストでレスポ...
技術情報 CSSでフローティングラベルを行う
下記の記事で紹介されているフローティングラベルが気になったので、CSSで出来るだけ再現してみました。html入力のテキストフィールドと対応するラベルを記述しています。<div class="floating-box"> <input typ...
技術情報 CSSで円の外側へ向かってボーダーを徐々に表示して消す
最近CSSのアニメーションが気になり始めてきたので、円の外のボーダーを徐々に表示して消すというものを作ってみました。ソースコードhtmlブロック要素をひとつ作っておきます。<div class="ripple"></div>css円を「ri...
技術情報 CSSでスクロール時に要素をコンテンツ横に固定する
スクロールする際、要素を固定する時の表示はCSSだとブラウザの基準からしかできないものだと思いこんでいましたが、コンテンツに沿って表示することができたのでご紹介いたします。ソースコードhtml親のコンテンツ内に固定する要素を入れておきます。...
技術情報 FLOCSSについて疑問な点を考えてみた
以前、「GulpとFLOCSSで始めるモバイルファースト的なCSS設計」でFLOCSSをご紹介いたしました。FLOCSSを使う機会があり、疑問に思ったことがあったので考えてみました。FLOCSSで組んでいて疑問に思ったこと命名規則や詳細度F...
技術情報 レスポンシブで画像を表示するにはどうすればよいか調べてみた
スマートフォン、タブレット、PCでレスポンシブなWebサイトをコーディングする際に、画像もレスポンシブにする必要がある場合、どういった要素を使って、どのように画像を切り分けるか悩みます。そこで自分なりに調べてみました。img要素のsrcse...
技術情報 CSSのactive疑似クラスでクリック時にアイコンを変える
最近疑似クラスを少し調べることがあったので、勉強がてらactive疑似クラスでクリック時にアイコンを変えるようなCSSを作ってみました。ソースコードhtmldiv要素のみで作っています。<div class="sun-moon"> <div...
技術情報 WordPressテーマのSimplicityの記事内にあるh2をCSSの「position: sticky;」で表示位置を固定して追従させてみた
指定した要素の位置に移動した場合に、その要素の親の範囲まで固定する「position: sticky;」なる便利なCSSを知り、見出しに適用してみました。style.css子テーマの「style.css」で下記の記述をしました。.artic...
技術情報 HTML5.1で導入されたmenuとmenuitemタグで独自のコンテキストメニューを作ってみた
右クリックで表示されるコンテキストメニューをHTML5.1で導入された<menu>と<menuitem>タグで独自に作れるという話を聞き、早速作ってみることにしました。独自のコンテキストメニューを表示する下記はFirefoxの最新版で確認す...
技術情報 CSSでHTMLの記述順とは異なる並び順にする
今回はHTMLのソースの記述順とは異なる見た目の並び順にする方法をご紹介いたします。「float」、「position」使う方法サイドバーを左、メインを右の表示にする(2カラム)html<div class="main"> メイン</div...
技術情報 CSSでレスポンシブなテーブルを表示する
以前テーブルを分けてスクロールさせる方法をご紹介いたしました。今回はCSSでレスポンシブなテーブルを表示する方法をご紹介いたします。サンプルサンプルではPCで横に見出しがあるタイプのものを、400px以内の表示の時に「th」と「td」を縦に...
技術情報 リストタグで長さの違う要素を合わせる
今回はリストタグで長さの違う要素を合わせる方法ご紹介いたします。サンプルリスト1～4とリスト5の両端をピッタリ合わせています。サンプルhtml今回はよくありそうなので、liの中にaタグを入れてみました。ポイントは「</li><!-- -->...
技術情報 CSSでログインフォームをデザインする
今回はCSSでのログインフォームデザインをご紹介いたします。サンプルユーザーアイコンと錠アイコンにクリック、またはタップするとフィールドにカーソルがフォーカスされます。サンプルhtmlラベルを記述し各フィールドに対応させておくと、アイコンを...
技術情報 CSSで矢印アイコン付きのリストを作る
今回はモバイルでよく見る、矢印アイコン付きのリストを作る方法をご紹介いたします。サンプル右端に矢印アイコンが表示されています。サンプルhtmlulにクラスがついてる普通のリストです。<ul class="cursor"> <li><a hr...