Figmaの基本機能で簡単につくる、テキスト&あしらい表現TIPS - ICS MEDIA
リリース以来数多くのアップデートが行われ、多機能になっていくFigma。今回はそんなFigmaの基本機能を使用した、簡単なデザイン作成やあしらいづくりに活かせる表現TIPSを紹介します。 テキストの表現 マスク機能やエフェクト、そしてレイヤーのブレンドモードを使用したテキストの表現をいくつか紹介します。 TIPS：画像をテキストでマスクする マスク機能を使用して、画像をテキストの形に切り抜きます。 以下の手順で切り抜きます。 画像とテキストレイヤーを用意 画像が前面になるようにして、画像とテキストレイヤーを重ねる 両方のレイヤーを選択状態にして、右クリックメニューから［マスクとして使用］を選択（ショートカットキーは、Mac：control + command + M、Windows：Ctrl + Alt + M） マスクした後も、テキストレイヤーは編集可能です。 さらに画像をレイヤーブラー
非エンジニアがWeb開発で知ってると便利過ぎる無料サービスを厳選してみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、Web開発などで役に立つ厳選した無料サービスをご紹介します！ 特にWeb開発に慣れていない初心者や非エンジニアの方でも、手軽に特定の機能を提供するページを構築できるサービスを厳選してみました。 また、複数人でのレビュー、サイトの分析、学習リソースなども合わせて掲載しているので、ご興味ある方はぜひ参考にしてください！ ■独自ロードマップを公開してユーザーと共有する！ 【 Roadmap Show 】 Webアプリやサービス自体のアップデートや予定している機能追加などの情報を、プロダクトロードマップとして手軽に一般公開できる便利なサービスです。 サービス側が何をやっていて、どのような改善をしているのかをユーザー側からも分かりやすくなります。 基本的な使い方も簡単で、いくつかのカテゴリ別にタスクカードを追加していくだけです。 これから予定して
知っておくと便利で役に立つHTMLの属性のまとめ
あまり知られていないけど、知っておくと便利で役に立つHTMLの属性を7つ紹介します。 Google翻訳が翻訳しようとするのを防ぐtranslate属性、リンクをダウンロードするように指示するdownload属性、アップロードできるファイルのタイプを指定できるaccept属性など、HTMLだけで実装できるのかという便利な属性ばかりです。 7 useful HTML attributes you may not know by Mariana 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに multiple属性 accept属性 contenteditable属性 spellcheck属性 translate属性 poster属性 download属性 終わりに はじめに HTMLは、Web制作の要です。しかし、多くのプロ
Affinity Designer： 1つのファイルの中にキャンバスを複数作る
こんにちは、さち です。 Illustrator の代替としてコスパが良い Affinity Designer。低価格なのに高機能で、本格的なドロー（ベクターを描く）アプリです。 今回は、この Affinity Designer で、1つのファイルの中に複数のキャンバスを作る機能「アートボード」の使い方について書いてきます。 アートボードとは？ 「アートボード」は、1つのファイルの中に複数のキャンバスを作れる機能です。この機能で作ったキャンバスのことを「アートボード」と呼びます。 例えば、上の図は「ラブライブ！」のキャラクターアイコンを描いたものです。アートボードを使うと複数のアイコンを1つのファイルにまとめられるので、別々のファイルに保存するより扱いやすくなります。 他にも、名刺やチラシの表面／裏面，色違いのデザイン，色々なサイズのバナー作成など、アートボードが役立つ場面は多くあります。
要素の横並び＋複数行ならflex-wrapが便利 - コンパイラかく語りき
CSSのflex-wrapを最近知ったのでメモ。 display: flex; で要素を横並びにしつつ、２行や３行にしたいときがあるじゃないですか。そんなときに便利です。 flex-wrap指定なし まず、flex-wrapの指定が無いバージョン。display: flex;のみ指定。flex-wrapの値はデフォルトのno-wrapになります。 gistabb6fdc10b786d856f22 すると、子要素（div.box）のwidth: 200px;が無視されます。画面に１行に収まるようにwidthが自動調整されるのです。 flex-wrap: wrap;措定 次に、flex-wrap: wrap;を指定します。 すると、子要素のwidthは200pxのままで横並びになります。改行が許容されるので、溢れでた子要素は次の行に落ちます。 良かったですね！もうfloatを使う必要はありませ
複数の編集者がいるWordPressの管理を楽にする、プラグインまとめ「10 WordPress Plugins to Improve Multi-Author Websites」
複数の編集者がいるWordPressの管理を楽にする、プラグインまとめ「10 WordPress Plugins to Improve Multi-Author Websites」 使いやすく、編集も容易に可能なWordPressは、複数人でWordPressの編集に関わることも多いと思います。今回ご紹介するのは、そんなWordPressを管理する際に使い易いオススメのプラグインをまとめた「10 WordPress Plugins to Improve Multi-Author Websites」です。 複数人編集ならではの不透明さや不便さを解消してくれる、あると便利なプラグインが10種類紹介されています。今回はその中から、ピックアップして幾つかご紹介いたします。 詳しくは以下 Editorial Calendar — WordPress Plugins Googleカレンダーのように、直
query_posts（WP_Queryクラス）で’tax_query’を使いこなす
説明 2日にわたって投稿した「query_posts（WP_Queryクラス）でカテゴリーを絞り込む」「query_posts（WP_Queryクラス）で投稿タグを絞り込む」の続き。今日はカテゴリーや投稿タグ以外ののタクソノミーによる絞り込み、複数のタクソノミーの絞り込みの組み合わせについてまとめてみる。 そもそも一連の投稿のきっかけになったのは、新テーマ「Twenty Eleven」の短冊ウィジェットがきっかけだった。その部分はこちら。 'tax_query' => array( array( 'taxonomy' => 'post_format', 'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-status', 'post-format-quote' ), 'field' => 'slug
WordPressの新機能 複数タクソノミークエリーまとめ – Simple Colors
先日、「WordPress 3.1 RC3 をみんなでテスト！ 」に参加し、その際、複数カスタムタクソノミークエリー（en. Multiple Taxonomy Handling）のテストを担当させてもらいました。 ついでに、仕様などについても探ってましたので、まとめてみることにします。 複数タクソノミークエリーとは なるべく正確に言うと、query_posts または get_posts の引数に新たに設けられた tax_query により、カテゴリー、タグ、カスタムタクソノミー等による記事抽出条件を、複数かつ様々なパラメータで細かく設定できる機能。 tax_query の値は、抽出条件毎の配列と各条件の結合方法（パラメータ名：relation）で構成される。 こう書いても、分かりにくいと思いますので、もっとかみ砕いて、粉状にして言うと「これさえ憶えておけば、WordPressでの絞り込
Search Console でプロパティ セットを使って複数のサイトをまとめて集計する
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
Github／Bitbucketのissue機能を使って効率よくタスク管理をする〜バグ報告編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのいなばです。 案件の開発終盤、こんなことが起きていませんか？ 納品が近づき、プロジェクトメンバーで一斉に検証作業を始める 各々バグを見つけ次第、issueを立てていく さあ、バグをかたっぱしから片付けていきましょう しかし、蓋を空けてみると……書き方の悪いissueが乱立！ バグの内容を把握するのに時間がかかる！ 結局わからないのでissueを立てた本人に聞く→結果的にコミュニケーションコストが増える……。コミュニケーションコストを減らすためのツールなのに、やりとりが何往復もしていたら本末転倒ですよね。 そこで、今回はGithubやbitbucketのissue機能を活用したデバッグフェーズでのタスク管理のコツをご紹介します。 悪いissueと良いissueとは？ そもそも、どんなissueが“悪いissue”なのでしょうか？ 例を見てみましょう。（極
WordPress サイトの多言語化に もう迷わない そう、Bogo ならね | Design Hack and Slash
WordPress で多言語サイトを構築する方法はいくつかありますが、おそらく最も手軽な Bogo プラグインによる多言語化をご紹介します。 当サイトも Bogo プラグインを使用して英語記事を公開しています。 Bogo とは Bogo の特徴を端的に表しているプラグインの説明文を引用します。 独自テーブルをたくさん作ったり後で頭痛を起こすような HTML コメントの混入をしない、とても素直な多言語化プラグイン。 プラグイン作成者は Takayuki Miyoshi さん。日本人の方なのでキャッチーな日本語の説明文ですね。 筆者はこの説明文を読んで、Bogo にしてみようと決めました。 また、Miyoshi さんは世界的に有名な「Contact Form 7」プラグインの作成者でもあり、信頼性が高いと言えると思います。 Bogo は、WordPress Codex 日本語版のページにも記載
多言語化WordPressプラグイン 【Bogo】 | 徳島のホームページ制作
とあるWordPressサイトで多言語化案件が出たので これまでは「qTrancelate」を使っていたのですが他にもないのか調べてみました。 プラグインは幾つか見つかったのですが 今回は「Bogo」というプラグインをテストで使ってみました まず「Bogo」を使おうと思ったのは【Contact Form 7】の開発者「「Takayuki Miyoshi」」さんだった事です。 【特徴】 複数のWordPress、またはマルチサイトにしなくても良い 多言語ページごとにスラッグ（ページURL）を指定できる 管理画面も多言語化できる さぁ早速使い方を 1.WordPressプラグイン＞新規追加＞「Bogo」と検索 インストール＞有効化するだけで大丈夫！ 2.多言語の切り替えボタンを設置 ファイルに下記コードを記述すれば多言語を切り替えできます <?php echo do_shortcode( '[
PowerPointで複数の図形の位置を揃える方法
PowerPointで複数の図形の位置を揃える方法を紹介します。 １．問題点 次のような3つの図形があります。 （クリックで拡大：以下同様） この3つの図形を中央で揃えたいのですが、方法が分かりません。 ２．図形の位置を揃える（その1） まずひとつめの方法です。 3つの図形をすべて選択します。 「ホーム」タブをクリック。 「配置」をクリック。 「オブジェクトの位置」→「配置」→「左右中央揃え」をクリック。 これで中央揃えができました。 ２．図形の位置を揃える（その2） もうひとつの方法はオブジェクトをひとつずつドラッグしながら揃える方法です。 PowerPoint2007以降であれば、図形をドラッグすると他の図形との位置関係を点線で表示してくれるようになりました。 スクリーンショットに表示されている点線は青いオブジェクトの中央を指すので、これに黄色のオブジェクトの中心を合わせます。 同じよ
Simple Stack Effects
Simple spread Toggle effect Fan out Toggle effect Random rotation Toggle effect Side Slide Toggle effect Side Grid Toggle effect Peek-a-boo Toggle effect Preview Grid Toggle effect Corner Grid Toggle effect Bouncy Grid Toggle effect Coverflow Toggle effect Leaflet Toggle effect Vertical spread Toggle effect Elastic spread Toggle effect Fan Toggle effect Queue Toggle effect Illustrations by Isaac M
jQueryでajax()の重複実行を回避する方法
jQueryでajax()の重複実行を回避する方法を紹介します。 １．問題点 次のような、ajax()メソッドを使って「http://user-domain/foo.cgi」にアクセスし、実行結果を取得するコードがあります。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(function(){ $('#execute').click(function(){ $.ajax({ url: "http://user-domain/foo.cgi", type: "GET", dataType: 'html', }) .done(function( data ) { $('#foo').html(data); }) .fail(function(
PDFファイルを結合する方法
PDFファイルを結合する方法を紹介します。 ここではAdobe Acrobatを利用した、次の3つの方法を紹介します。 Acrobatのメニューを使って結合する コンテキストメニューを使って結合する 文書メニューを使って結合する １．Acrobatのメニューを使って結合する 以下の「test1.pdf」「test2.pdf」という2つのファイルを結合します。 test1.pdf test2.pdf Acrobatを起動して、「作成」→「ファイルを単一のPDFに結合...」を選択。「作成」の右側にある「結合」にも同じメニューがあります。 「ファイルの結合」ウィンドウが開きます。 （クリックで拡大） 結合したいPDFファイルをドラッグ＆ドロップするか、左上の「ファイルを追加」をクリックして、追加したいPDFファイルを選択します。順番はドラッグで入れ替えることができます。 （クリックで拡大） 右
jQueryで$(document).readyを複数実行した場合のthisやvarについて - maeharinの日記
はじめに jQueryを使う時は、$(document).ready(handler)やその省略法である$(handler)でdom構築ができてからコードを実行することが多い。（handlerは無名関数などの関数オブジェクト） で、たまに複数のファイルで何度も$(handler)を呼び出すことがあるのだけれど、その際$()の引数に渡しているhandler内のthisやvar宣言について混乱しがちだったので整理しておく。ちなみに検証環境はChrome ver24、jQuery1.9.1。概念はES3を基準にする。 前提 書き方色々 以下の3つは同義（真ん中は推奨されない） $(document).ready(handler) $().ready(handler) //this is not recommended $(handler) http://api.jquery.com/ready/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
某機関投資家で働く会社員のブログです。経済、資産運用、IPO、株主優待、保険、クレジットカードなどについて発信 - The Goal
#
LESSのextend機能の使い方について - O2 Project Blog