ソラミ♪

この記事ではフォーカスの基礎知識とリンクや要素をフォーカスしたときのデザインをカスタマイズするCSSなどを紹介します。ウェブサイトのビジュアルやアクセシビリティの向上に役立てます。 フォーカスとは フォーカスとは、ユーザーが特定の要素（リンク、ボタン、テキストボックスなど）を選択している状態のことを指します。フォーカスが当たっている要素は、キーボードの入力やクリックなどのイベントを受け取ることができます。 例えば、テキストボックスにフォーカスが当たっている場合、ユーザーはキーボードから文字入力することがで ...

jQuery不要、CSSとHTMLだけでも軽快でおしゃれなドロップダウンメニューが作れます。 この記事ではシンプル、簡単なCSSとHTMLだけで作るドロップダウンメニューを例を挙げて説明します。 ドロップダウンメニューとは ドロップダウンメニューは一行または一列に並んだメニューをホバー（マウスオーバー）するとサブメニューが表示されるUI要素です。プルダウンメニューと言ったりもします。 サイトのナビゲーションによく使われているので目にする機会は多いですし、サイト制作でもかなりの頻度で使う要素ではないでしょう ...

アーカイブページなどでエントリーを3件とか4件とかで横並びにしたいことってたまにありますよね 通常の記事ループ <?php if(have_posts()): while( have_posts()) : the_post() ; ?> <div class="post"> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2&gt ...

Google製のアイコンフォント「Googleマテリアルアイコン」はマテリアルデザインをベースとして設計されています。見やすくてデザインもFontAwesomeよりもこちらの方が好みかなと思っています。 ここではGoogleマテリアルアイコンの基本的な使い方、カスタマイズ方法をまとめています。 カスタマイズが簡単になった、最新のGoogleマテリアルシンボルの使い方はこちらGoogleマテリアルシンボルのカスタマイズと表示されないときの対処法 アイコンフォントを使わなくてもウェブサイトで表示できる！丸数字 ...

スマホやタブレットなど様々なデバイスでの閲覧に対応したレスポンシブデザインのやり方と注意点のまとめです。 モバイルデバイスでのウェブ閲覧がPCよりも多いというのは当たり前になった現在、ウェブサイトのレスポンシブ対応は欠かせないものとなりました。 レスポンシブ対応のコーディングをするためには、適切なブレイクポイントの設定やレイアウトの調整、画像や文字サイズの最適化など、様々なコーディングテクニックが必要です。またデバイスごとの画面サイズや解像度、画面を回転した時の動作など注意すべきポイントもあります。 本記 ...

カスタム投稿タイプを設定するとき、プラグインを使いたくなくてfunctions.phpに設定していましたがプラグインも簡単かな〜と思って導入してみました。 とても簡単に設定できるんだけど、オプション設定部分がわからなくなるので書き留めます。 https://wordpress.org/plugins/custom-post-type-ui/  Labels 管理画面で表示される名前を設定できます。 Settings 高度な設定が出来る部分。ここが今日のメイン。■一般公開（default:true）一時的に ...

イラレで放射状のラインを引く方法。 例）200px x  200px の正円を作って、　線の太さを100pxにする。 破線の「線分」を36ptぐらいに でもこれをパスのアウトラインや分割と拡張をやろうとすると こんなふうになる。 いろいろググってみたところ「透明部分を分割・拡張」で 「すべての線をアウトラインに変換」にチェックを入れるとOKらしい。 できました！

ホームページのメインビジュアル・ヒーローイメージをちょっと暗くしたいという時に。画像そのものを加工しなくてもCSSだけで画像を暗くすることができます。 画像の上に文字を置きたい時にも、CSSでちょっと画像を加工すればキャッチコピーも見やすくすることができます。 CSSで画像を暗くするメリット 画像の上に文字を入れるときに、文字の視認性が高くなる。 画像のトーンを変えることで、サイトの雰囲気を変えることができる。 画像編集ソフトを使わずに、CSSだけで簡単に画像を暗くするので画像のサイズや品質が変わってしま ...

レスポンシブなウェブサイトで様々な画面サイズやデバイスに対応するためには、コーディングに工夫が必要です。 画面サイズに応じて最適化することでユーザーにとって見やすく、使いやすいサイトを作りあげることができます。 本記事では画像や動画、テキストなどのコンテンツが、画面サイズに応じて適切に表示されるようにするためのコツをとりあげています。 画像のレスポンシブ対応、画面サイズに応じた画像を表示する レスポンシブサイトで画面サイズに応じて適切な画像を表示することは、ウェブサイトの表示速度やパフォーマンスにおいて重 ...

スマホサイトで利用する機会の多いアコーディオンメニュー。スペースを節約しつつ、多くの情報を表示できるので、ウェブサイトやアプリのUIによく使われます。 この記事ではCSSのみで作るアコーディオンメニュー、jQueryでサクッと実装できるシンプルタイプ、jQueryに依存しないJavaScriptで作るアコーディオンメニューを作り方を実例を挙げて紹介します。 タブメニューの作り方はこちらの記事で説明しています。レスポンシブなタブメニュー CSS&JS -Tab UI CSSのみで作るアコーディオンメ ...

SCSSはは簡潔かつ読みやすいCSSコードを書くことができる上に、効率的にコーディングできるCSSの拡張言語です。使い始めた頃は便利さに驚愕していました。その中でも特に便利なのはmixinですね。 mixinを定義しておけば、同じスタイルを何度も書かずにすむので効率が上がります。この記事では、SCSS mixinの使い方について解説し、実際の使えるおすすめの実例集を紹介します。SCSS、mixinを活用することで高速かつ効率的なフロントエンド開発を進めましょう！ mixinの基本的な使い方 mixinとは ...

指定の月日が来たら非表示にする 新しく更新したページに「New!」を付けて、一定期間がすぎたら自動的に消えるようにする。 function newmark(mark,yy,mm,dd){ expireDate = new Date(yy,mm - 1,dd); now = new Date(); if(now.getTime() <= expireDate.getTime()){ document.write(mark); } } マークを表示したい場所に下記スクリプトを記載します。 例）2014年 ...