仕事で、都道府県を選択させてそれに応じた情報を表示させるUIを作る必要がありました。 例えば、店舗情報や求人情報などは都道府県毎に整理して表示させることになるでしょう。 しかし、都道府県の選択をユーザーにストレスなく操作させるのは難儀なことです。 なにせ、選択肢が47種類もあるのですから。 なので今回は、都道府県UIをHTML+CSS+JavaScript(jQuery)を使用して作ってみました。 使いやすい都道府県選択UIとは そもそも、使いやすい都道府県選択にするには、何を目指せばよいのでしょうか。 今回は「最短」「最速」で、「特定の都道府県を選べる」ことを目標に、UIを模索していました。 既存のUIを見てみる まずは、今まで自分が作ってきたUIや、既に運用されているサイトなどを参考に、どんなUIがあるか調べてみました。 セレクトボックス選択 セレクトボックスは、<select></s

HTMLサイトの共通部分(ヘッダーやフッター)をPHPでパーツ化し、現在のページのメニューにクラスを追加する方法。 2019年03月14日 コーディング コーディングを始めた頃(遠い昔)に学んだテクニックがarutegaさんのブログで紹介されてた。当時「共通化にはまってやりまくってた時にページごとにクラスをつけたいっ！」て思って、頑張って実装したテクニックを思い出したのでメモ。 サイトのヘッダーなど、全ページで共通する部分をパーツ化しよう まずが共通部分をパーツ化(コンポーネント化)しよう。 コンポーネン化の方法はこちらですごくわかりやすく解説されていたのでリンクを貼らさせていただきました。 共通パーツ化の方法はこちら

JavaScriptのデバッグは、ウェブ開発の必須スキルのひとつです。プログラムの実行をデバッグすることで、現在の変数の値や、処理がどのように進んでいるのかを確認できます。デバッグによってプログラムが意図した動作になっているかの分析に役立てられます。 本記事ではGoogle Chromeブラウザーの「Chrome Developer Tools」（以下「デベロッパーツール」、「DevToolsデブ・ツールズ」という略称もあります）を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。20分ほどで理解できるようまとめているので、順番に試しながら読み進めてください。 この記事で学べること デベロッパーツールの使い方 JavaScriptのブレークポイ

Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、**改善施策ってまず何をどうすればいいの？**という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか？ EJSっていうのはですね、なんかもう、こう、すんごいツールでして！　とにかく、使うとコーディングがめっちゃ早くなるんですよ！！ 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは？ EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます

2016年11月7日 便利ツール 数日前Adobeのエディターツール、Dreamweaver CC 2017が新機能とともにリリースされました。過去にDreamweaverからCodaに乗り換えた私ですが、苦楽をともにしてきたCodaさんがどうもアップデートのたびにプラグインがうまく動かないなど、使いづらくなってきて…。そんな時に新生Dreamweaverの情報を耳にしたので、さっそく試してみました。 ↑私が10年以上利用している会計ソフト！ Dreamweaver CC 2017をインストール Adobeのツールはサブスクリプションモデルなので、Creative Cloudに契約する必要があります。Photoshop CCやIllustrator CCなど、多彩なAdobeツールが使い放題のコンプリートプラン（月額4,980円）、Dreamweaverのみ利用できる単体プラン（月額2,1

console.log関連についてまとめました。 モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。 console.hogehogeのいろいろ 基本 引数を入れることで出力結果をカスタマイズできます console.info、console.warn、console.error それぞれで見た目を変えることができます。 console.assert 式を評価してfalseの場合にログ出力します。 console.count ログの出力結果が同じ場合にカウント数が自動的に増えていきます。 console.dir オブジェクトのプロパティの中身をログに出力します。 console.dirxml HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。 console.group、conosle.groupCollapsed co

クリエイティブなプロデザイナーが実践する、デザインテクニックを身につけるチュートリアルやつくり方をまとめています。 豊富すぎるツールは Illustrator ビギナーにとって、戸惑うことも多いでしょう。そんなときは順番ごとにデザインを進める、実践的なチュートリアルを参考に、基本的なツールを学んでみましょう。テクニックが増えていくことで、Illustrator をより自在に操作することができるでしょう。 詳細は以下から。 Illustrator をしっかり学びたいひとへ。参考にしたい入門チュートリアル、つくり方まとめ 夏をテーマにしたカラフルなアイコンを作成する方法 ペンツールを使ってデザインする、シンプルでかわいいアイコンパックのつくり方。 惑星アイコンのつくり方 銀河系の惑星をひとつずつ、色鮮やかな配色のフラットスタイルで描いたアイコン素材セット。 ゲームに出てくるファンタジーな武器を

アセット派とスライス派、勝つのはどっちだ！ 目次 書き出し速度選手権とは？ 結果発表 【初心者向け】Photoshopのアセットで最低限使うショートカット 【中級者向け】書き出し時のテクニック　〜検索と置換編〜 【中級者向け】書き出し時のテクニック　〜マスク編〜 【初心者向け】アセット細かいTips集 書き出し速度選手権とは？ どうも！デザイナーの川野です。 突然ですがみなさん、Photoshopで画像を書きだす際にどんな方法を使っているでしょうか？ Photoshopからだと「アセット」と「スライス」という主に2つの書き出し方法があり、 CC版から追加された機能である「アセット」がかなり便利！という話は 周知のとおりかと思います しかし未だにビーワークスでは慣れたスライス機能を使いつづける人がちらほらいて、 なんとかその人達にアセットを広める方法はないか・・ということで このたび「書き出

Ben Gremillion氏は、UXPinのコンテンツデザイナーです。以前はウェブデザイナー、およびその後にバックエンドディベロッパーを務めていました。彼は新聞デザインからキャリアをスタートさせ、デジタルの未来を見据えて即座にHTML/CSSを学びました。 実を言うと、ステークホルダーやその他の関係者があまり深く考えずに「整理・整頓する」ことを求めるのに、私は飽き飽きしています。整理されているということは、ただ単に物が少ないということではありません。整頓するということは、全てをなくすわけではありません。これらの言葉は、ページ上で重要でない要素を取り除くということを意味しているのです。 もし複雑な入力フォームがあったならば、ユーザーは一目見ただけですぐに去ってしまうでしょう。これを防ぐための手っ取り早い方法は、散らかっている要素を取り除くことと、グリッドを追加することです。今日は、ユーザー

フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。 そんなときに活用できるのが、今回使い方を紹介する gulp です。 gulp.js このエントリーでは、gulp が使えるように、gulp とはどういうものなのかの簡単な説明から、導入の基礎部分までを書いておきます。コピペでしか使ったことがない！という人や、誰かのコピペに頼って使っていたような人も、今後の活用していくための参考に利用してもらえたら嬉しいです。 gulp とは？ gulp.js は Node.js 製の毎回行うような作業を自動化してくれるツールです。よく様々なサイトでタスクランナーとして紹介されていますが、正確には

フォントアイコンの導入方法を初心者向けに、FontAwesomeを例に説明しています。

こんにちは、サンデーです。 僕は読者さんからメールをいただくことが多いんですが、その中でよく「サンデーさんの文章は優しい人柄がにじみ出ている」と言われます。 ありがとうございます！　いやぁ、照れますなぁ。 確かに、会った人からも「穏やかな人」と言われることは多いんですけどね（笑）。 でも、文章ってデジタルなものです。 ブログの雰囲気が実際の人柄と一致しているとは限りません。 たとえ冷たい人でも、文章の書き方によっては親近感を作り出すことも可能です。 僕だって何も考えずに書いたらそっけない文章を作ってしまうので、ある程度は親しみを出すテクニックを活用してるんですよ。 僕が文章を作るときにやっている「親近感を出すコツ」を教えますね。 ↓動画でも解説しているのでどうぞ

可視範囲になってから表示されたり動いたり、スクロールに応じてアニメーションさせる方法を紹介します。動きをつけて目を引くことで、効果的に伝えることができるかもしれません。 以前、「jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる｜Webpark」という記事で同じようなものを紹介したのですが、デモが気に入っていない、アニメーションが1度きりということで作り変えました。 まずはサンプルをご覧ください。スクロールするとアイコンとテキストが順番にフェードインします。 このサンプルで使われている、画面いっぱいに表示する方法と、上にスクロールしたときに現れるメニューは以前紹介しています。気になる方はどうぞ。 画面サイズに合わせて高さを指定する3つの方法｜Webpark jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー｜Webpark とい

海外デザインブログCanva Design School Blogで公開された「Design Elements and Pinciples」より許可をもらい、日本語抄訳しています。 デザインはなんとも難解で複雑な、楽しくて面白いビジネスと言えます。 デザインをはじめたばかりのときは、覚えることも多く、やらなければいけないこともたくさんあり、色々と検討しなければけないでしょう。また同時に、テクノロジーの進化によって、新しいソフトウエアが発売されたり、次から次へと変化するデザイントレンドも意識する必要があるでしょう。しかし、すべてを同時に学ぶとなると参ってしまいます。 この記事では、デザインをするときに覚えておきたい、20個の基本原則をまとめてご紹介します。前半となる今回は、まず10個のデザインテクニックを見ていきましょう。 詳細は以下から。 コンテンツ目次 ライン 縮尺、スケール 配色、カラ

フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ