環境について この記事ではWindows10のChromeブラウザーを利用しています。 それじゃぁ本編いってみよー！ はじめに Google風検索ボックスを作るにあたって今回は検索ボックスを以下のように分けることにしました。 検索マークの領域と検索ボックスの領域と音声入力ボタンの領域をそれぞれ作成し、最後にCSSでうまくまとめようというわけです。 また、HTMLを index.html 、CSSを style.css に書き込むことにしました。 検索マーク、検索ボックス、音声入力ボタンを用意 検索バー全体を kyc-search-bar, 検索マークをkyc-search-mark, 音声入力ボタンをkyc-search-micとし、検索マークと音声入力アイコンはMaterial Icons を利用しました。 また、検索ボックスはautocompleteオフにして、ブラウザ標準の検索候補を表示しない設定にしてあります。(恐らくこちらの方が見やすくなる。) index.html <div class="kyc-search-bar"> <i class="material-icons md-21" id ="kyc-search-mark">search</i> <input class="kyc-search-box" type="text" placeholder="検索" autocomplete="off"> <i class="material-icons md-21" id ="kyc-search-mic">mic</i> </div> CSSで検索バー全体をデザイン 検索バー全体はdisplay: flexとalign-items: centerを利用することできれいに横並びにし、枠線はborderで表現しました。 また、検索ボックスは width: 100%とすることで検索バーの中いっぱいに表示しています。 モバイル対応としては、幅が480px未満の端末では横幅全体に検索ボックスを表示させるようしました。 style.css .kyc-search-bar{ display: flex; align-items: center; justify-content: center; height: 45px; width: 550px; border-radius: 30px; margin: 5px; border: solid 1px #dcdcdc; } .kyc-search-box{ font-size: 16px; width: 100%; border: none; outline: none; } i.kyc-search-mark{ margin-left: 10px; margin-right: 5px; color: #9aa0a6; } i.kyc-search-mic{ margin-right: 10px; cursor: pointer; color: #9aa0a6; } @media only screen and (max-width:480px){ .kyc-search-bar{ width: 90%; } } 最後に 全コードは GitHub、 デモページはこちらをご覧ください。 また、説明不足の点などがございましたらコメントにてご指摘よろしくお願いいたします。

環境について この記事ではWindows10のChromeブラウザーを利用しています。 それじゃぁ本編いってみよー！ はじめに Google風検索ボックスを作るにあたって今回は検索ボックスを以下のように分けることにしました。 検索マークの領域と検索ボックスの領域と音声入力ボタンの領域をそれぞれ作成し、最後にCSSでうまくまとめようというわけです。 また、HTMLを index.html 、CSSを style.css に書き込むことにしました。 検索マーク、検索ボックス、音声入力ボタンを用意 検索バー全体を kyc-search-bar, 検索マークをkyc-search-mark, 音声入力ボタンをkyc-search-micとし、検索マークと音声入力アイコンはMaterial Icons を利用しました。 また、検索ボックスはautocompleteオフにして、ブラウザ標準の検索候補を表示しない設定にしてあります。(恐らくこちらの方が見やすくなる。) index.html <div class="kyc-search-bar"> <i class="material-icons md-21" id ="kyc-search-mark">search</i> <input class="kyc-search-box" type="text" placeholder="検索" autocomplete="off"> <i class="material-icons md-21" id ="kyc-search-mic">mic</i> </div> CSSで検索バー全体をデザイン 検索バー全体はdisplay: flexとalign-items: centerを利用することできれいに横並びにし、枠線はborderで表現しました。 また、検索ボックスは width: 100%とすることで検索バーの中いっぱいに表示しています。 モバイル対応としては、幅が480px未満の端末では横幅全体に検索ボックスを表示させるようしました。 style.css .kyc-search-bar{ display: flex; align-items: center; justify-content: center; height: 45px; width: 550px; border-radius: 30px; margin: 5px; border: solid 1px #dcdcdc; } .kyc-search-box{ font-size: 16px; width: 100%; border: none; outline: none; } i.kyc-search-mark{ margin-left: 10px; margin-right: 5px; color: #9aa0a6; } i.kyc-search-mic{ margin-right: 10px; cursor: pointer; color: #9aa0a6; } @media only screen and (max-width:480px){ .kyc-search-bar{ width: 90%; } } 最後に 全コードは GitHub、 デモページはこちらをご覧ください。 また、説明不足の点などがございましたらコメントにてご指摘よろしくお願いいたします。

どうも7noteです。再現シリーズ、サッカーボールをcssだけで作ってみた。 前回：リアルなビー玉を作る cssだけでサッカーボールを作りました。 前回ビー玉を作成したのですが、今回は5角形が多く入ってくるので、svg使わずcssだけの再現だったためソースが少し長くなってしまいました。 もう少し短くかけたらよかったのですが、現状の精一杯ですね。日々勉強です。 サッカーボールのソース index.html <div class="ball"> <div class="pentagon c"></div> <div class="pentagon t"><span></span></div> <div class="pentagon tr"><span></span></div> <div class="pentagon br"><span></span></div> <div class="pentagon bl"><span></span></div> <div class="pentagon tl"><span></span></div> </div> style.css .ball { position: relative; width: 300px; height: 300px; border: 1px solid #666; border-radius: 50%; background-image: radial-gradient(at 30% 30%,#fff 40%, #bbb); box-shadow: 30px 70px 5px -30px rgba(0,0,0,0.3); overflow: hidden; } .ball .pentagon { position: absolute; width: 50px; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 50px solid #000; } .ball .pentagon:before { position: absolute; top: -96px; left: -25px; width: 0; height: 0; content: ""; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 46px solid #000; } .ball .pentagon.c { top: calc(50% + 12px); left: 50%; transform: translate(-50%,-50%); } .ball .pentagon.t { top: -15px; left: 50%; transform: translateX(-50%) rotateZ(180deg) rotateX(60deg); } .ball .pentagon.tr { top: 28%; right: -35px; transform: rotateZ(252deg) rotateX(60deg); } .ball .pentagon.br { bottom: 4%; right: 16px; transform: rotateZ(322deg) rotateX(60deg); } .ball .pentagon.bl { bottom: 4%; left: 16px; transform: rotateZ(36deg) rotateX(60deg); } .ball .pentagon.tl { top: 28%; left: -35px; transform: rotateZ(108deg) rotateX(60deg); } .ball .pentagon.t::after, .ball .pentagon.tr::after, .ball .pentagon.br::after, .ball .pentagon.bl::after, .ball .pentagon.tl::after{ content: ''; width: 1px; height: 150px; background: #000; position: absolute; top: -220px; left: 50%; } .ball .pentagon span { width: 120px; height: 1px; display: inline-block; background: #000; position: absolute; top: -95px; left: 45px; transform: rotate(-55deg); } 解説 ①　5角形を6つ作成します。中心に1つ配置し、残りを5箇所回りに配置します。位置は...適当です。 ②　ボールの縁になる円を描きます。回りに配置した五角形が少しはみ出るくらいの大きさにしておき、overflow: hidden;で円からはみ出た部分は非表示に設定。 ③　回りに配置した五角形に疑似要素で線を付けて中心に向けて線を引きます。さらにspanでも線をつくり、これは回りの五角形同士をつなぐ線にします。 ④　最後に立体感を出すために、ボール全体に円形グラデーションをかけて、影を適当に配置して完成！ まとめ イラストデータなどをみて「いけるかな」と思ったのですが想定よりも長くソースをかかないといけなくなってしまったので悔やみます。もう少しスッキリかければよかったのですが。 ただかなり柔軟な発送が必要になるのでcssの練習にはとてもいいかもしれないです。実用性はかなり低いですが・・・ また思いついたものを作っていけたらいいかなと思います。 だれかの参考になれば幸いです。 参考： https://moru-web.com/?p=102 https://www.kitaguniweb.com/cat-webdesign/2014/p-6043/ おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ

はじめに ここで紹介しているのは、画像をクリックして拡大（いわゆる、Amazonなどの商品の画像をクリックをクリックすると拡大するやつ）みたいなものを簡単に実装できたらいいなー、と思って調べてみました。 色々なサイトで紹介されているLightboxなどのライブラリを使用するよりさらに手軽に、デザイン性もよくしてそれを実装する方法をまとめてみました。 コードはコピー&ペーストで使ってもOKです。 実装 HTML側 HTMLは、画像を囲むdivにクラスをつけたものと、imgタグだけでできます。 image.pngの所は、表示したい画像にしておきます。 classはお好みで。 HTML <div class="image"> <img src="image.png"> </div> CSS側 CSSを使って、アニメーションをつけていきます。 transitionの1sの部分は、拡大アニメーションの時間となります。この場合は1秒です。 transitionの行を消すと、アニメーションがなくなります。 300pxを変更すると、クリックしていない状態の画像の大きさを変更できます。 注意: このやり方だと、クリックしている間だけ拡大となります。 CSS .image { transition: 1s; width: 300px; } .image:active { width: 100%; } やっていること .imageクラスのtransition（値が変わるまでの時間）を1秒にします。これによって、300pxから100%のサイズに変わるまが1秒のアニメーションになります。transitionについては、【CSS3】Transition（変化）関連のまとめで詳しく説明されています。 ユーザーが画像をクリックします。 クリックされてから1秒かけてwidthが100%になります。 アニメーションが終わり、画像が100%のサイズまで大きくなり、拡大されました。 ユーザーが指を離します。 1秒かけてwidthが300pxに戻ります。 画像が元のサイズになりました。 ちなみに、100%というのは画像のサイズの100%ではなく、画面サイズに対しての100%です（厳密にいうとそうではありません）。 完成！ うまくいかなかったらコメントで教えてくださいね。

これは何 （おそらく）見た目を重視してoutline: 0を指定するのはやめて、こうしませんか？という提案の記事 UAで付与されるoutlineがイケてなく感じる気持ちは分かります しかし安直にoutlineを消すとアクセシビリティが下がってしまうので、代替案を提示してみます そもそもなぜoutlineを消すのが良くないのか outlineは「今自分が何の要素にフォーカスを当てているか」を示してくれます。 そのoutlineを消してしまうと、ページの操作をキーボードで行っている人が非常に困ります。 マウスを使わず（あるいは使えず）操作をしている人にとっては、outlineが表示されていないと実質操作不可能なのです。 せめてキーボードユーザーにだけはoutlineを出しておく とは言え、マウスを使っているユーザーにとってはフォーカス位置が分かってもそこまでメリットがないと思います。 そこで提案するのが以下のライブラリを使用することです。 こちらを使うと、インプット方法がmouse, keyboard, touchのうちどれなのかを判定できるようになります。 「マウスを使っているユーザーのoutlineは消す」「キーボードを使っているユーザーのoutlineは表示する」と出し分けられるようになり、およその問題は解決すると思われます。 （WCAGの達成基準2.4.7に記載されているメリットによれば「注意力欠如、短期記憶の制約、又は遂行機能における制限のある利用者が、フォーカスがどこにあるのかを見つけることができるようになる。」ともあるので、これに該当する人たちへのフォローはできませんが……。） 具体的な導入方法 ※ ここからはwhat-input公式のドキュメントに書いてある以上のことはほとんど記載していません。 まずはnpmかyarn、好きな方を選んでインストールしてください。 インストール npm install what-input # or yarn add what-input scriptタグで直接読み込むか <script src="path/to/what-input.js"></script> 以下のいずれかのimportをします import 'what-input' // or import whatInput from 'what-input' // or require('what-input') // or var whatInput = require('what-input') // or requirejs.config({ paths: { whatInput: 'path/to/what-input', }, }) require(['whatInput'], function () {}) インポートできたら、以下のようにCSSに記載をすれば「マウスを使用しているユーザーにだけoutlineを非表示」を実現できます。 グローバルなCSS [data-whatinput='mouse'] *:focus { outline: none; } なお、公式では[data-whatinput='mouse'] *:focusではなく[data-whatintent='mouse'] *:focusで記載されていますが、個人的にはdata-whatinputの方が良いと思いました。 少し分かりづらいので以下のgifをご覧ください。 data-whatintent data-whatinput どちらも操作している内容は tabキーでフォーカスをあてる マウスを動かす 再びtabキーを押す と変わりません。 data-whatintentの方は、ちょっとでもマウスを動かすと、例えクリックをしていなくてもフォーカスインジケータが消えてしまいます。 また、マウスを触った直後にtabキーを押しても、フォーカスは移動するのにインジケータが表示されません。 キーボード操作をしつつも一応マウスをつないでいる……といった人がいた場合、うっかりマウスを触ってしまったらフォーカスインジケータが消えてしまうのでdata-whatinputの指定の方が良いと思った次第です。

これは何 UIモックアップデータを作る際、少しでもコーディングが楽になるように作る方法を書いた記事です 大抵のWebサイトやアプリ制作においては、UIのモックアップデータを作り、その後コーディングをすると思います そのため、見た目が同じでもデータの作り次第で作業効率が大きく違います この記事で取り扱うツールはFigmaですが、本筋はSketchでもXDでも変わりません ツール名称などを適宜読み替えていただければSketchやXDでも使える考え方だと思います 対象読者 コーディングを依頼する人 主にUIデザイナー チームによってはディレクターやプロダクトオーナーも該当するかもしれません 作業しやすいデータ作成を理解するために読んでもらえたら嬉しいです コーディングをする人 フロントエンドエンジニア・マークアップエンジニア チームによってはデザイナーも該当するかもしれません 余りにもコーディングしづらいUIデータをもらったとき、この記事をUI作成者へ共有していただければ話がしやすいかもしれません 補足：筆者の職種 私自身はデザイナーですが、業務ではUIのモックアップも作るし、HTML, CSS, Reactなどでコードを書いています。 そのため比較的中立の立場から、どちらかの立場に寄りすぎず意見を書けるだろうと思っています。 要素の名付け方やレイヤーの順番などを明文化しておく コーディングの有無に関係なく必要な工程ですが、一応この記事でも触れておきます。 Frameの命名が日本語と英語が混ざっていたり、Frame 42のようになっていると見やすくありません。 どのFrameがどのオブジェクトを表しているのかが理解しやすいと明確に作業スピードが上がります。 またレイヤー順は上からor下から一直線で辿れるようにしておきましょう。 人力で修正するのは大変なので、こういうプラグインを使うのが楽です。 そして少し発展的ですが、variantsを使用するコンポーネントはどんな値が渡ってきてどう変化するかや、コード上で再現したときの扱いやすさを考えておけると良いです。 アイコンがボタンのテキストの左右につくことがある場合、どちらの方が使い勝手が良いか Left Icon = True / FalseとRight Icon = True / False Icon = 'Left' / 'Right' / 'Both' /'None' inputに対してエラーのvariantを作るとして、エラーメッセージはコンポーネントの要素として含むか否か TypeScriptを使っていて、プロパティ名にtypeを使いたくなったとき、ややこしくなるのは間違いないので、違う言葉を使うのかプレフィックスなどで対処するのか いずれの項目でも「絶対にこうすべき」があるわけではなく、チーム全員が認識を揃えやすいものを話し合うのが大事です。 ちなみに筆者がよく採用するのは ルートのFrame名はURL ドメイン名は省略する 同一URLで状態が違う場合は()書きで補足する 例：/post/[id] (not logged in user) 1 レイヤーは下から順 Auto Layoutが下から順を強制してくるため、全体通して下から順 2 要素の名前は英語で、そのままクラス名として使えるのが理想 極力[file name]__[layer name]など機械的にクラス名として使えるようにする Auto Layoutが入れ子になりすぎないようにSpacerコンポーネントを用意する 余白の幅の違いを表現するためだけにAuto Layoutが入れ子になりすぎると見通しが悪くなる また、レイヤーのグルーピングとHTMLの構造が大きく違ってくるので感覚として気持ち悪い （筆者はReactを触る機会が多いので）propsの単位とvariantsの単位が揃うようにする 先ほどのアイコンつきボタンの例でいうと<Button iconPosition='left' icon='check' />のようなコンポーネントを作るとしたらIcon = 'Left' / 'Right' /'None'なvariantsをFigmaで定義する（='Both'は廃止する） iconPosition='both'を許容するとicon=[check, arrow]などにも対応しないといけなさそうで不必要なややこしさが生まれそう→いっそ廃止する判断 FigmaのStylesとコードの定数を揃える おそらくFigmaを使っていれば様々なStylesを登録していることでしょう。 Color Text Effect Grid これらの種類分けや命名をコードとしっかり揃えておくのが重要です。 例えば以下のようになっていたらドキュメント化するのも相手に伝えるのも大変ですよね。 カテゴリー Figmaでの命名 コードでの命名 色のカテゴリー main, sub primary, secondary 色の展開 main100, main200 primary-light, primary-dark 文字の大きさ title, headline, body font-l, font-m, font-s Figmaで定義した色をコード化するのは、個人的にはデザイナーが担当した方が良いと思います。 CSS custom propertiesとしてなのか、Sass Variablesなのかなど、定義の仕方も色々あると思いますがエンジニアとも話しながら決められるのが良いですね。 プロトタイプを作る・プロトタイプで確認する 静止したページ一覧だけを見ていてもイマイチ分からない箇所は多いと思います。 メニューが開閉する モーダルウィンドウがオーバーレイする 条件によって要素の有無が変わる こういったものはプロトタイプを有効活用しましょう。 オススメなのは、スタートFrameにハブっぽいものを用意しておくことです。 画像の例では「初回起動」と「2回目以降起動」で動線を分けていますが、色々な使い方ができます。 「ログイン済みユーザーからの見え方」と「未ログインユーザーからの見え方」 「通常版」と「ベータ版」 といった具合で状況にあわせて用意するのが良いでしょう。 コードを想定したConstraintsやResizingを設定する 例えばAuto Layout要素において、以下の2つは全く同じ見た目になるケースがありますが、それぞれから想起されるCSSは結構違います。 Fixedの親要素の中にFill containerの子要素が入っている Hug Contentsの親要素の中にHug Contentsの子要素が入っている 1番「っぽい」コード .parent { width: 1000px; } .child { width: 100%; } 2番「っぽい」コード .parent { width: auto; /* ※autoは初期値なので、何も指定していない状態と同じ */ } .child { padding: 10px; /* 幅を指定しているわけではなく、コンテンツにあわせて成り行きで幅が決まるようなコード */ } これを見て分かるように、要素の大小や多寡によって実際の描画結果は変わってきてしまいます。 Auto Layoutに限らず、通常のConstraintsでも同じことです。 Figma上で静的に成立しているだけでなく、実際コードで表現したときにどうなるか？それに相応しいConstraintsやResizingはどうあるべきか？を考えてデータを作りましょう。 Figma上の表示だけで全てを解決しようとしない 「Figmaデータの作り方」というタイトルなのに、なんてことを言い出すんだという話ですが……。 いくらcomponentsやvariantsが便利といえども、全ての条件を網羅しようと思うととんでもない工数がかかってしまいかねません。 ですが、コメントで一言注釈を書けば解決する……なんてこともあります。 今のFigmaでは無限スクロールを表現しようとしても無理です。 それなりの再現度で良ければ可能ですが、完璧ではありません。 ですが「最初は20件表示、一番下までスクロールしたら追加で20件表示、以降は無限スクロール」などのコメントを入れておけば割と伝えることでしょう。 （もちろん追加で要素が出現したときのアニメーションなどは考える余地がありますが） ツールの機能に拘らずに、コミュニケーションをとる方がより良い場合もある、と頭の片隅に置いておいてください。 /区切りでFrame名をつけるとExportした際にディレクトリが入れ子になってしまうので、最近は_区切りなどの方が良いかもしれない……と思っている ↩ 上から順が良いと思う時期と下から順が良いと思う時期が定期的にやってくる ↩