サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
衆院選
sole-color-blog.com
こんにちは。それからデザイン入社1年目の長島です。 日々、質の良いアウトプットをより効率的に作りたい！と試行錯誤の私が飛びついたのが「Emmet」です。 「Emmet」はDreamweaverCC2017から搭載されており、その他のHTMLエディタでも簡単に導入できます。 HTML/CSSの記述を素早く簡単に行うには、今や「Emmet」なしではもう生きていけない、とまで思っているほどです。 そして、一度導入してしまえば「Emmet」なしの環境にストレスを感じてしまうほど強力な時間短縮ツールになります。 今回は、コーディングスピードを爆発的に上昇させる「Emmet」とは一体どういったものなのかを、よく使う例を交えてご紹介いたします。 それでは早速、HTMLの例を見ていきましょう。 aタグ classを付けた複数のdiv 複雑な構造の繰り返し このように、圧倒的にコーディングの手数を減らすこと
こんにちは。それからデザインの長島です。 みなさま、GWはいかがお過ごしでしたか。私はとある写真展を見に京都に行ってまいりました。楽しかったです。 前回の記事で、私は「Emmet」を使用するといかにHTMLを記述するのが楽になるのかということを書きましたが、「Emmet」はHTMLだけでなくCSSにも使用できます。 前回の記事 それでは、早速CSSの例を見ていきましょう！ width border 複雑な記述 このように、CSSもHTML同様圧倒的にコーディングの工程を減らすことができるのです。 それでは次に、「Emmet」を使用したCSSコーディングの基本的なルールをご紹介します。 「Emmet」の入力規則（CSS編） 「Emmet」の使い方は、ご使用のコーディング環境(DreamweaverやBrackets、sublime等のtextエディター)に「Emmet」を導入後、ルールに基づ
数年前から唱えられているjQuery不要論。jQueryはプラグインも豊富にある便利なライブラリですが、動作が重いのも事実です。とはいえ、「プラグインも使用しているし、新規案件はまだしも既存案件での切り替えは難しい…」という方も多いのではないでしょうか？ 今回は、実案件でも使用機会の多い「スライダー」と「モーダル」のプラグインをご紹介します。 Swiper 動作が軽く、機能も豊富なスライダープラグインです。CDNでも利用することができます。 JQueryプラグインの「bxSlider」や「Owl Carousel」のようにオプションが豊富なうえ、レスポンシブにも対応しています。カスタマイズすればだいたいのスライダー表現を実現することができるので、既存案件の切り替えにもオススメです。 Remodal jQueryや他のライブラリに依存していないモーダルプラグインです。CDNでも利用することが
こんにちは。それからデザインの長島です。 今回は私がいつも使用しているBracketsのプラグインで特に使い勝手が良かったもの、コーディング初心者でも使いやすいものなど、Brackets初心者がインストールするべき機能を紹介します。 Bracketsとは BracketsとはAdobeが提供しているオープンソースコードエディターです。無料で使用でき、コードヒント、ホバークイックビュー、ライブプレビュー機能など、数々の便利な機能がデフォルトで付いています。起動もとても早いです。そして、特徴的なのがプラグイン（拡張機能）の豊富さです。600種類以上もあるプラグインから、自分好みのものをインストールし、カスタマイズしていくのは我が子を育てるかのよう。 プラグインのインストール方法 プラグインのインストール方法は驚くほど簡単です。画面右端にある、ブロックのアイコンをクリックすると「拡張機能マネージ
WordPressはMySQLというデータベースでサイトのさまざまな情報を管理していますが、別のドメインへシステムを移転させるには、基本的なサイトURLの登録情報の他、パーマリンクと呼ばれる各投稿記事のURLに埋め込まれたドメイン名を新ドメイン名へ置換する必要があります。 例えば以下の図は、WordPressのデータベースの一部を視覚化したものです。 サイトURLやパーマリンクは、下図のように保存されています。 WordPressは１記事ごとに記事のURLをデータベースに保存する仕組みになっています。数百、数千といった記事を置換するにはphpMyAdminなどのウェブブラウザからデータベースの操作ができる専用ツールを使うと便利です。 そこで今回は、データベースの操作に不慣れな方でもphpMyAdminからドメイン名を一発置換し、旧ドメインで使っていたWordPressのデータベースを新ドメ
CSSでフォントの種類を指定する「font−family」の正しい記述方法は、デバイスに標準搭載されているフォントやWebフォントの技術の変化などにより日々変わっています。 このブログでも「font−familyのベストな書き方 2015年版」「font−familyのベストな書き方 2017年版」として、当時のトレンドを踏まえたfont−familyの指定方法の記事をアップしました。 今回は実際に使用していて気づいた問題も出てきたので、これを機にアップデートしたいと思います。 前回紹介した「2017年版font−familiy」の問題点 2017年版font−family body { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN
アウトプットする機会が多い毎日を過ごしていると、それに見合った良質なインプットの必要性を感じることがあると思います。そんな時、みなさんはどうされていますか？ 私は「人と会う・話す・ゆるくつながる」ということを意識するようにしています。 ネットで瞬時に大量の情報を入手できる時代だからこそ、本当に「クリエイティブに効く」情報や刺激に出会うには、温度のある情報と人との出会いが欠かせないのではないかと思います。 そこでおすすめなのが、イベントやセミナーへの参加。 学びはもちろん、志の似ている参加者との出会いやその後のつながりは、仕事のアウトプットのみならず、人生も豊かにするきっかけになるはずです。 今回は、「クリエイティブ脳を刺激する」セミナーやイベントの開催情報を入手できるサイトを厳選してお届けします。 新しい視点と出会いたい方は、現在のご自分の業務に直結しない分野の催しに参加するのもおすすめで
サイト制作の工程のなかで、クライアントの要望を聞く「ヒアリング」と実際にできあがったデザインを説明する「プレゼン」はとても重要です。ここがうまくいっている案件とそうでない案件では、制作コストや最終的な制作物のクオリティに至るまで大きな差が出てきます。 今回はデザインヒアリング、プレゼンの際に私が気をつけていることをまとめてみました。 ヒアリング時 デザインについての要望は細かく聞き、 具体的な言葉に落とし込む デザインについての要望やテイストは細かいところまで掘り下げて聞きます。参考サイトなどで挙げてもらったサイトについてどこのどの部分がいいと感じたのか、現状のサイトの不満なところなどなるべく細かくヒアリングします。 クライアントさんによっては「（参考サイトみたいに）カッコよくしたい」など漠然とした要望をいただくこともありますが、「カッコよくしたい」というキーワードだけでデザインをしてしま
「大量のデータをリスト化したページを作成しなければならない」…そんな時、便利なのがCSVです。今回は、jQueryで複数のCSVファイルをパラメータごとに読み込む方法を紹介します。 ※CSVをjQueryで読み込む方法についてはこちらを参考にしました。 デモはこちら。実際のコードは以下です。 JS $(function() { // URLのパラメータを取得する var $dir = location.href.split("#"); var $dir2 = $dir[$dir.length -1]; // idと同じ名前のCSVを読み込む $.get('./csv/' + $dir2 + '.csv',function(data){ var csv = $.csv()(data); var productlist = ''; //indexを使ってくり返し回数をカウント $(csv).e
Webサイトの背景に動画が入るデザインを制作したのですが（関連記事）、ひとつ大きな問題がありました。それは「ファイルサイズが大きすぎて読み込みが遅くなる問題」です。 適切な制作方法や平均ファイルサイズを説明しているサイトがなかったので、今回は実際に制作した際に行なったことをまとめました。 普通に制作するとファイルサイズは20MB強になる Adobe premiereでサイズ1280x720px、30秒程度の動画を作ると20MBを超えてしまいます。Webの素材としてはファイルサイズが大きすぎて、このままでは使えません。 平均サイズ（目標）を調べる ここで同じように動画を背景に配置しているサイトの動画ファイルサイズを調べました。 ざっと調べると以下のような結果に。 DeNA 採用サイト
WordPressでカスタム投稿タイプを使っている方であれば、タクソノミー（分類）にターム（カテゴリー）を登録して使うケースが多いと思います。 今回は、ターム（カテゴリー）一覧ページのパーマリンクを「/カスタム投稿タイプ名/ターム名」のようなシンプルな形式にカスタマイズする方法をご紹介します。 ■WPのバージョンとパーマリンク設定
cssのbackgroundプロパティで使用できる「cover」という値は、画像の縦横比を保ったまま背景領域を全て覆うように自動で拡大縮小する便利なプロパティです。 ただ、この値を使うには画像を背景に指定する必要があり、imgタグで画像を配置したい場合は使用できません。そこで今回は、imgタグでも同じ効果を再現できるjQueryを紹介します。 デモはこちら。実際のコードは以下です。 html <div class="box"> <figure><img src="https://sole-color-blog.com/manage/wp-content/uploads/2016/03/bgImg01.jpg" alt=""></figure> <p>サンプルです</p> </div>
「○○さんはAタイプです。あなたも診断してみよう！」FacebookやTwitterでこんな投稿を目にしたことがありませんか？今回は、SNSでよく見かける診断テストをjQueryでかんたんに作る方法を紹介します。 デモはこちら。実際のコードは以下です。 html <ul> <li> Q1. 問題が入ります <label><input type="radio" name="q01" class="typeA"> YES</label> <label><input type="radio" name="q01" class="typeB"> NO</label> </li> //以下省略 </ul> <button>診断する</button> <div class="result resultA"> あなたはAタイプ </div> <div class="result resultB"> あな
WordPressでサイトを運用していると、固定ページやカスタム投稿タイプを使って作成したコンテンツのなかに、 静的なHTMLを置きたいことがあります。 例えば、 「他のページとレイアウトもテイストも違うランディングページを急いでアップする 」 「 親子ページの一部の階層だけ WordPress化をせず独自プログラムで動かしたい」 といった場合です。Web制作に関わっている人であれば、ディレクトリを設置したりファイルをアップロードすればいいのでは？と考えるのではないでしょうか。 ところが、 WordPress には表示優先度のルールがあるので、上図のように固定ページで登録したページ名（スラッグ）の階層に静的HTMLを置くとWordPressが機能しなくなります。 そのため、静的なHTMLとWordPressを共存させる場合は、少し工夫が必要です。
Linuxで作業をしていると、ファイル名やテキストファイル内の文字列がどのファイルに書き込まれているか調べたり、階層のリストやファイルリストをテキストファイルに出力したりすることがあると思います。 また、ディレクトリの階層が深くなって作成したファイルをどこに保存したかわからなくなってしまった・・・という経験がある方も多いのではないでしょうか？ 今回は、そんな時に役立つ find というコマンドについて、ご紹介します。 文字列検索に便利なfindコマンド findは、ファイルやディレクトリを検索するときに使うコマンドです。 findは、検索条件に合致するファイルの一覧を表示するだけでなく、見つかったファイルに対して「-exec」オプションを使って別のコマンドを実行するといった活用法があります。 基本的な使い方 find [オプション] 検索したいディレクトリ 検索条件 よく使うオプション
CSSでフォントの種類を指定する「Font−family」の正しい記述方法は、デバイスに標準搭載されているフォントやWebフォントの技術の変化などにより日々変わっています。 このブログでも以前「Font−familyのベストな書き方 2015年版」として、当時のトレンドを踏まえたFont−familyの指定方法の記事をアップしましたが、トレンドが変わってきたので、これを機にアップデートしたいと思います。
検索やお問い合わせなどのフォームで使用されるinput要素やselect要素。条件が多岐に渡るほど、フロントエンドでの制御が必要になります。今回は、それらの要素を制御するjQueryをまとめました。 状態を取得する チェックボックス、ラジオボタンの場合 $(“input”).change(function(){ var checked = $(this).prop('checked'); if( checked === true ){ //チェックが入っている場合の処理 } else if( checked === false ) { //チェックが入っていない場合の処理 } });
世の中には無料のものから有料のものまでさまざまなフォントがあります。フォント制作ソフトも手軽に使えるようになった影響か、最近では日本語のフリーフォントもかなり増えており、フリーフォントの投稿サイト「フォントフリー」には2016年10月現在で300を超えるフォントが登録されています。 これだけフォントがあると、選択肢は無限大と言ってもよく、選ぶだけでも一苦労です。 そこで今回はそれからデザインのデザイナーが普段よく使っているフォントについてアンケートを取ってみました。 実制作で「本当に使える」フォントとは一体なんなのか。選んだ理由と合わせて聞いてみました。それでは早速見てみましょう！ 見出ゴMB31（みだしゴエムビーさんいち）｜モリサワ モリサワのスタンダードなフォントとして外せないフォントかなと思いチョイスしました。 シャープなフォントなので、テイストを選ばずいろんな場面で使用しています。
「html／cssでのコーディングはできるけど、WordPressのカスタマイズはできない」というデザイナーやコーダーはまだまだ多いのではないでしょうか。 それからデザインではWordPressを導入する案件が多いですが、かくいう私もこれまではhtml／cssでのマークアップが主で、WordPressのカスタマイズは社内のエンジニアが担当していました。 そんな中で更なるスキルアップを図るべく、実案件でマークアップからWordPressのカスタマイズまで担当する機会をいただいたので、その際に感じたことや学んだことを書きます。 参考にした書籍 今回参考にした書籍はこちらです。 「WordPressの基本的な使い方はわかる」「html／cssは理解している」という人が初めてWordPressをカスタマイズするにあたり、準備からテーマ作成、拡張に至るまでを実践的に説明している教科書です。中でも、サ
ECサイトなら商品カテゴリ、求人サイトなら職種など、膨大な検索項目をまとめる方法のひとつとして、タブで切り替えるUIが挙げられます。今回は、そんなUIの作り方をご紹介します。 デモはこちら。例として、汎用性の高い都道府県を項目にしています。必要なコードは以下です。 html <div class="bigSelectBox clearfix"> /* 大項目エリア */ <ul class="tab"> <li class="on"><a id="tohoku">北海道・東北地方</a></li> /* 中略 */ <li><a id="kyushu">九州地方</a></li> </ul> /* 大項目エリア */ /* 小項目エリア */ <div class="content"> <div class="box on"> <p class="ttl"><label><input ty
パソコンで画像データを扱う際、ファイル名の後にくる拡張子を気にしてみると「.jpg（.jpeg）」「.gif」や「.tif」など画像によって異なる拡張子がついているのを目にするかもしれません。画像データにはJPEG、GIF、PNG、TIFF、BMPなど、様々な形式があり、拡張子はその形式を表しています。 では、それぞれの画像形式にはどういった特徴があるのでしょうか？いざ自分で編集する必要のある場合や、どの形式を使えばよいのか選ぶ際にも迷わないように、それぞれの特徴と適した使い方を簡単にご紹介してみたいと思います。 拡張子とは？ ファイル名のうしろに「.jpg」などの記号。そのファイルがどんな形式のデータであるかを表しています。例えば、PDFファイルは「.pdf」、エクセルファイルは「.xls」など 写真画像ならJPEGが一般的 JPEG（ジェイペグ）はJoint Photographic
WordPressには「the_title()」「the_content()」「the_category()」といった、記事のタイトルや記事に紐付けたカテゴリー名を表示する関数などが多くあります。その中でもタクソノミーやタームの表示に関係する関数が多く混乱してしまうことがあるので、タクソノミーやタームの情報を取得する関数をまとめてみました。 ▼タクソノミー、タームの情報を取得する代表的な関数 アーカイブページのループ内やシングルページでよく使う関数get_the_termswp_get_post_termswp_get_object_termsget_the_term_listthe_termsサイドエリアなどターム一覧を表示させるときによく使う関数get_term_byget_termget_termsアーカイブ一覧ページでタクソノミー名やターム名を見出しなどで使いたいときによく使う関数
こんにちは！Webデザイナーの斧山です。 カラフルな色使いにかわいいイラスト。子供向けサイトってほんっっとにかわいいですよね！今回は見ているだけでも楽しい、幼稚園や保育園、子供向けサービスのWebサイトを中心にデザインのいいサイトをまとめ、その特徴を考えてみたいと思います。それでは早速行ってみましょう！ 特徴１：ターゲットは子供じゃなくおかあさん？ 今回集めたサイトは幼稚園、保育園や子供向けの学習サービスなどがメインです。プ○キュアや妖○ウォッチなどのように子供自ら消費行動を起こすものではないのです。メインのターゲットは、お母さんやお父さん。そのためカラフルではあるものの、原色は避け、パステルカラーな淡い色を使ったサイトが多いようです。 しまじろうクラブ フォトハウス ハピスタ Birdy Babies 特徴２：個性的なフォントを使って元気な印象を出す 普通のゴシック体などではなく少しクセ
いまやWEB制作に欠かせないモーダルウィンドウですが、既存のプラグインを利用すると「やりたい表現があるけど、どこをどうカスタマイズすればいいかわからない…」という状況に陥ってしまった経験がある方も多いのではないでしょうか。 今回は、カスタマイズしやすい簡単なモーダルウィンドウの作り方をご紹介します。 デモはこちら。 必要なコードは以下です。（jQueryの読み込み必須） html <!-- モーダルウィンドウを開くボタン --> <p><a href="#modal01" class="modalOpen">Open</a></p> <!-- モーダルウィンドウ --> <div class="modal" id="modal01"> <!-- モーダルウィンドウが開いている時のオーバーレイ --> <div class="overLay modalClose"></div> <!-- モ
ブログやwebマガジン、キャンペーンサイトまでさまざまなサイトに設置されるFacebookやTwitterなどのSNSボタン／シェアボタン。今回はフロンドエンド系コード共有サイト CODEPENで個性的なUIのボタンを集めました。 ボタンタイプ まずはオーソドックスなボタンタイプのSNSボタン／シェアボタン。
レスポンシブサイトをコーディングする際、「画像を背景に当てたdivの高さをどう指定すればいいかわからない…」「youtubeの埋め込み動画を横幅100%にしたいけど、縦が小さくなってしまう…」と困ったときに便利な、jQueryで比率計算する方法をご紹介します。 方法は簡単！比率の計算式に、取得した値を当てはめていくだけです。 デモはこちら。 必要なコードは以下です。（jQueryの読み込み必須） javascript $(window).on('load resize',function() { //ウィンドウを読み込んだ時、リサイズされた時に動く var WindowWidth = $(window).width(); //ウィンドウ幅の値を取得して定義 $('クラス名またはID名').css('height',(背景画像の高さ * WindowWidth) / 背景画像の横幅 + "p
こんにちは！Webデザイナーの斧山です！ 今回はPhotoshopのフィルター機能を使って簡単に油絵のような画像をつくる方法をご紹介します。それでは早速いってみましょう！ STEP1 まず油絵風にしたい画像をPhotoshopで開きます。 まず、レイヤーを複製します。さらに[レイヤー → スマートオブジェクト → スマートオブジェクトに変換]を選択、複製したレイヤーをスマートオブジェクトにします。スマートオブジェクトにすることでこのあと追加するフィルタなどが再編集可能となり細かい微調整が後からでもできるようになります。 さらに２つ、スマートオブジェクトレイヤーを複製し、合計３つのレイヤーを作ります。分かりやすいようにこれから適用するフィルターごとに名前をつけます。今回は、上から、「Median」「Dry Brush」「Cutout」としました。 STEP2 「Median」「Dry Bru
こんにちは、Webデザイナーの斧山です。 突然ですが、「クライアントからもらった写真のノイズがひどくて使い物にならない・・・」といった経験はないでしょうか？プロカメラマンが撮った写真ならばそんなことはないのですが、素人の方が撮った写真は、携帯のカメラで撮っていたり、カメラの設定がうまくできていなかったりするのでそのままでは使えない場合がよくあります。 今回はそんなノイズだらけの写真を魔法のようにキレイにしてくれるソフト「Neat Image」をご紹介します。もちろんAdobe CCにも対応！ それでは早速行ってみましょう！ まずは「Neat Image」をダウンロード Neat ImageはWindows、Mac、Linuxで利用できる画像のノイズ除去を自動で行なってくれるソフトです。Photoshopプラグイン版もあるので便利です。無料版と有料版があり、無料版では1024Px以上の画像と
divの高さが決まっている時は、“margin-top”に高さの半分のネガティブマージンを指定すれば上下中央になります。（例：divの高さが100pxなら、“margin-top:-50px”） 高さが決まっていない時でも、下記のようにjQueryで要素の高さを取得して、cssにネガティブマージンを代入すれば上下中央にすることができます。 javascript $(function(){ var wH = $(window).innerHeight(); //ブラウザの高さを取得 var divH = $("div").innerHeight(); //divの高さを取得 $("body").css("height", wH + "px"); //bodyにブラウザの高さを代入 $("div").css("margin-top", "-" + divH / 2 + "px"); //div
次のページ
このページを最初にブックマークしてみませんか？
『それからデザイン スタッフブログ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
