はてなブックマーク

UIデザインツールのFigmaですが、SketchやInVisionに比べると知名度が低いですね。 しかしブラウザがあれば使用できるのは非常に便利で、SketchやInVisionにも劣らない機能と小規模での使用なら無料となかなか使い勝手が良いです。 Figma: the collaborative interface design tool 今回ご紹介するのはFigmaの便利機能「属性コピー」の方法です。 属性コピーてなに？ という方もいらっしゃるかと思いますのでご説明を。 Photoshopをお使いの方ならお分かりになるかと思いますが、文字、線、図形などで設定している色、太さ、大きさ、ドロップシャドウなどの『属性（スタイル）設定だけ』をコピーし、他の文字、図形などに『全く同じ属性（スタイル）内容をコピーする』という機能です。 言葉で説明してもなかなか分かりにくいですよね。しかしやり方は

先日iPhoneXの発表がありましたね。僕が何より驚いたのはその解像度。2,436×1,125ピクセルです。これまでは高解像度スマートフォン向けに実際の2倍のサイズの画像を用いてコーディングをしてきましたが、このiPhoneXでも綺麗に画像を見せるには3倍のサイズが必要になります。 またPCでも4Kディスプレイやウルトラワイドディスプレイなど高解像度モニタが普及しつつあります。 それでは高解像モニタに合わせてWebサイトの構築でも高解像度の画像を使用していけばいいのでしょうか？それは間違いです。これをするとWebサイトの通信量は大幅に増加してしまいます。モニタサイズに合わせて最適な画像を読み込むことが重要になります。 今回はそういった時に使用するpicture要素とsrcset属性を紹介します。 picture要素 picture要素はブラウザサイズに合わせて一つのimgタグで複数の画像を

iOSではスクロールバーが表示されません。 通常のブラウジングでは無意識でWebサイトは縦にスクロールできるものだと思っているので通常は問題になることはないのですが、 ユーザーに明示的にスクロールできると認識させるときにこの仕様が障害になることがあります。 今回はiOSでもスクロールができるということをユーザーに認識させるために、 強制的にスクロールバーを表示させる方法を紹介します。 html <div class="scroll-wrap"> <table> <tr> <th>見出し</th> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> <td>テキストが入ります</td> </tr> <tr> <th>見出し</th> <td>テキストが入ります</td> <td>テキストが入り

WordPressは任意の記事にパスワード保護をかけることが可能で、保護した記事のタイトルには文頭に「保護中」と自動で追記されます。例えばこの表示を「会員限定記事」と編集したい場合、フィルターフックで編集することができます。今回はそのコードを紹介します。 「保護中」を任意のテキストに変更する フィルターフックはfunction.phpに追記することで機能します。下記は「保護中」を「会員限定記事」と変更する際のコードです。 function edit_protected_word () { return '会員限定記事：%s'; } add_filter('protected_title_format','edit_protected_word'); %sとはphpの型指定子です。引数の出力されるフォーマットを指定することができ、%sの場合は文字列として引数を扱うことを意味しています。 「保

Advanced Custom Fieldsで画像を扱うとき、画像の返り値にIDを設定した場合にaltを取得する方法です。 _wp_attachment_image_altを使う 返り値がIDの場合altを取得するには_wp_attachment_image_altを使います。具体的には以下の通り。 <?php $img_alt = get_post(get_field('img')); $alt = get_post_meta( $img_alt->ID, '_wp_attachment_image_alt', true ); ?> imgがフィールド名です。実例は以下のようになります。 <?php $img = get_field('img'); $images = wp_get_attachment_image_src($img, 'サイズ'); $img_alt = get_pos

以前「object-fitをつかって画像をボックスいっぱいに表示させる方法」でobject-fitを紹介いたしました。私も非常に便利でよく使っているプロパティーの一つです。 そして使えば使うほど、PC向けにもこのプロパティーは使用したくなります。 そこで問題になるのがInternet Explorer（以下IE）とEdgeです。 object-fit-imagesを使用して対応する 先述のブラウザはobject-fitに対応していません。そこで「object-fit-images」というライブラリを使用します。 まずは上記のページにアクセスして緑色の「Clone or download」ボタンを押してライブラリをダウンロードしてください。 HTML まずはjQueryの呼び出しの後に、ライブラリを呼び出します。 このライブラリは「dist」フォルダの中に格納されています。 <script

みなさんはCSSのサイズ指定をする時に、細かい計算をしてサイズ指定をしていますか？ calc()は計算式を記述すればブラウザ側で計算して出力します。 しかもcalc()はIEを含むほとんどのメジャーブラウザに対応しているので、安心して使用できます。 また、計算は単位を揃える必要がなく、異なる単位間でも計算してくれるのでレスポンシブコーディングともとても相性がいいです。 それでは具体例を交えながら活用方法を紹介します。 calc()は加算、減算、乗算、除算を行うことができます calc()は下記のように四則演算を行うことが可能です。 //加算 .hoge{ width:calc(10px + 50px); } //減算 .hoge{ width:calc(100px - 50px); } //乗算 .hoge{ width:calc(100px * 50px); } //除算 .hoge{

flexboxやtableと同様に、マルチカラムレイアウトをすることができるdisplay要素grid。通常であればgridコンテナの中に多くのプロパティを記述する必要がありますが、それの便利な自動生成Webサービス「Griddy」を見つけましたので、今回はそれを紹介します。 便利なGriddy サンプルを見ながら生成できる Griddyはブラウザ上で生成結果を確認しながら作業できます。サイトを開くと4つのグリッドアイテムが表示されており、ページ左側の列からグリッドの数や段組、サイズなどを編集できます。 「Grid Template Columns」欄では1行に何個のグリッドを生成するかを編集でき、サイズの指定も行えます。サイズの単位はfr(比率)、 px、 %、 autoから選ぶことができます。 続く「Grid Template Rows」欄では1列に何個のグリッドを生成するかを編集でき

今回はCSSで背景画像のみをぼかす方法を紹介します。 ぼかすとなると「 filter: blur();」を使うことは簡単に想像できると思いますが、これが少し厄介なんですよね。背景だけには適応できず、内包している要素がすべてぼかされてしまいます。 そこで擬似要素を使用して実現します。 デモサイト html <div class="key" style="background-image:url(key.jpg)"> <p><img src="key.jpg" alt=""></p> </div> インラインで背景画像の指定 インラインで背景画像の指定をしているのはCMS等でアイキャッチ画像と共通の画像を背景画像に設定することを想定しています。 .key{ background: no-repeat center center; background-size: cover; padding: