Blog
ブログで学ぶUX

カテゴリ: Web制作の記事

JavaScriptのキーボードの入力を受け取る方法

キーボードのイベントには「onkeydown」「onkeypress」「onkeyup」の3種類あります。onkeydownイベントユーザーがキーを押したときにイベントが発生します。書き方HTML<element onkeydown="処理">例:input要素に対してイベントが発生するようにさせた場合<input type="text" onkeydown="処理" />……

投稿日:

JavaScriptで右クリックを禁止する方法

右クリックを禁止にすると、画像の盗用や、ソースコードを隠すことができます。JavaScriptで右クリックを禁止する方法訪問者のJavaScriptが有効であれば、HTMLの<body>部分を以下のように書き換えれば画像の盗用や、ソースコードを隠すことができます。<body oncontextmenu="return false;">右クリックされた場合に「右クリック禁止で……

投稿日:

JavaScriptでフォームに自動フォーカスする方法

JavaScriptでフォームに自動的にフォーカスする方法自動的にフォーカスさせる方法(オートフォーカス)はいくつかありますが、一番問題が発生しないオートフォーカスさせる方法を紹介します。HTMLのautofocus属性を使うHTML5では、すべてのフォームコントロールにautofocus属性が導入されています。しかし、ブラウザによってはautofocus属性をサポートしていない場合があります。も……

投稿日:

JavaScriptで画面サイズを取得・変更する方法

画面サイズを取得する方法横幅の取得方法screen.widthモニターの解像度を取得screen.availWidthモニターの利用可能領域を取得window.innerWidthブラウザウインドウの表示領域の幅(スクロールバーを含む)を取得window.outerWidthウィンドウ外観の幅を取得document.body.clientWidthドキュメント全体の幅を取得document.doc……

投稿日:

JavaScriptでの配列を初期化する方法

配列の初期化する方法 配列の初期化にはArrayクラスのインスタンスとして初期化する方法と、[ ](スクエアブラケット)を使って初期化する方法があります。 // Arrayクラスのインスタンスとして作成 var array = new Array(); // []を使って作成 var array = []; Array.newと[ ]の違い 文字列で配列の宣言と初期化を行った場合、 var arr……

投稿日:

フラットデザインに使える! シンプルなアウトラインアイコン10選

まだまだ衰えを見せないデザイントレンド、フラットデザイン。そんなフラットデザインに使えるアウトライン型アイコンのセットをご紹介します。アウトライン型アイコンは、通常のフラットアイコンよりもミニマルで洗練されたイメージに仕上がります。無料とは思えないハイクオリティなアイコンをテーマ別で厳選して集めたので、ぜひデザインの参考にしてみてくださいね。One line - Free Startup icon……

投稿日:

イラストレーターのグラデーションメッシュの使い方

この記事では、Adobe Illustrator CCのグラデーションメッシュの使い方を説明します。グラデーションメッシュはメッシュツールと、オブジェクトメニューからの2通りの方法で作成することができます。ベースはオブジェクトメニューでメッシュポイントを作成し、必要に応じてメッシュツールで作成すると便利です。グラデーションメッシュとは?オブジェクト等にグラデーションをかけることができる機能です。グ……

投稿日:

春らしい草花や生き物モチーフの無料ブラシ素材10選

ようやく気温も暖かくなってきて、来週にはGWが始まります。さまざまなイベントに合わせて、春らしいデザインをする機会も多いのではないでしょうか。今回は、春に使える無料Photoshop用ブラシ素材をご紹介します。SakuraSeries PS Brushes春と言えばやっぱり桜を思い浮かべますよね。こちらは3種類の桜の花びらのPhotoshopブラシのセットです。ランダムに散らばるようになっているの……

投稿日:

Photoshopのツールバーのアイコン解説

Photoshopではじめに確認しておきたいのが、ツールバーです。ツールバーでは、Photoshopの様々な機能がアイコンで表示されています。どんな機能があるのか、普段使わないアイコンもあると思うので、それぞれ確認しておくと良いでしょう。 そこで今回はどのアイコンが何の機能を示しているか、紹介していきます。 移動ツール 選択しているレイヤーなどを好きな場所に移動することができます。 長方形選択ツ……

投稿日:

Photoshopのアプリ版! Adobe Photoshop Mixとは?

Adobe Photoshop MIXとはAndroidや、iPhone、iPadなどの端末で利用出来るPhotoshopのアプリです。外出先などでアイデアが浮かんだときに、実際に編集をしてアイデアをメモしておくことが出来てしまいますね。機能などについて詳しく見ていきましょう。Photoshopのアプリ版! Adobe Photoshop Mixとは?無料アプリPhotoshopのアプリ版が出た、……

投稿日: