CSS

CSSで”cursor: pointer”が効かない原因と対処方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSで”cursor: pointer”が効かない原因と対処方法について解説しています。cursorプロパティによるマウスカーソル形状の変更の基本、pointerの適用が行われない場合の原因の例と対処方法を覚えましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

CSSで”cursor: pointer”が効かない原因と対処方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まるでしょう。

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。

今回は、CSSに関する内容だね！

どういう内容でしょうか？

“cursor: pointer”が効かない原因と対処方法について詳しく説明していくね！

お願いします！

カーソル形状の変え方

ブラウザに表示された画面の内部や指定された要素に対してcursorプロパティを用いることによって、マウスポインタのカーソルの形状を変更できます。

ユーザーにとって、飽きがこないようにも多種多様のデザインが用意されていました。

通常時

リンクなどにマウスカーソルが乗せられた状態

入力装置などが稼働している状態

パソコンが処理中の状態

発見の可能性が示唆されている状態

その他にも『シグニファイア（Signifier）』を頼りに探してみましょう。

[PR] Webデザインで副業する学習方法を動画で公開中

ブラウザによる違い

OS（オペレーティングシステム）のブラウザの種類によって、マウスポインタのカーソルの形状に若干の相違があります。

Mac

Windows

ポインターカーソルについて

ユーザーが、選択できることを前提として、標準的な状態で使用されています。

なお、標準以外の複数ある状態から、例として、二つ目の「ポインターカーソルを用いて文字（テキスト）が選択された状態」を掲載するものの、参考までに留めましょう。

ポインターカーソルの形状（標準的な状態）

ポインターカーソルを用いて文字（テキスト）が選択された状態

ポインターカーソルが効かない原因と対処法

標準の規定として、状態によってカーソルの形状が決まっている場合でも、CSS（Cascading Style Sheets: カスケーディング・スタイル・シート）にて、標準の定義から変更されている可能性があります。

他の同様の定義よりも優先順位を高めることや規定の適応を解除するための記述を追記することで、元に戻せることや適切な表示の形状に変更可能です。

なお、aタグやbuttonタグに定めるべき属性が未定義の場合やinputタグの属性によっては、標準的なポインターカーソルから変化していないことが多いです。

ポインターカーソルを使ってみよう

HTML

<a class="mouseon_cursor">aタグのボタン</a>
<button class="mouseon_cursor">buttanタグのボタン</button>
<input class="mouseon_cursor" type="button" value="ボタン">

CSS

.mouseon_cursor {
  cursor: pointer !important;
}

動作結果

See the Pen
2020-07-25-sample01 by YOHEI INAI (@yohei_inai)
on CodePen.

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

CSSで”cursor: pointer”が効かない原因と対処方法がよく分かりやすくて良かったです！

ゆかりちゃん、これからも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

初心者でも簡単に！フリーで使えるイラスト作成ソフト10選

フリーで使えるイラスト作成ソフトをまとめて紹介しています。イラストを一から作ることは経験の無い人からすると難しいでしょう。今回紹介するイラスト作成ソフトは初心者...

Webデザイン

CSSだけでタブ切り替えを実装する方法を現役エンジニアが解説【初心者向け】

CSSだけでタブ切り替えを実装する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSS...

CSS

立体感のあるCSSのborderスタイルを現役エンジニアが紹介【初心者向け】

立体感のあるCSSのborderスタイルについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CS...

CSS

CSSのappearanceプロパティの使い方を現役エンジニアが解説【初心者向け】

CSSのappearanceプロパティの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

枠線などを指定したい！CSSのborderの使い方【初心者向け】

今回はCSSで書くborderの使い方に関する解説記事です。borderプロパティは非常に便利で、どのサイトをデザインする上でも必要になってくる知識なので、ぜひ...

CSS

CSSでonclick-event（クリックイベント）を実装する方法を現役エンジニアが解説【初心者向け】

CSSでonclick-event（クリックイベント）を実装する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向...

CSS

あわせてよく読まれている記事

【未経験でも】メーカー勤務から異業種に転職する上でおすすめの仕事

今回は家電メーカーから異業種に転職する方法を解説します。メーカー勤務からの転職においてのメリットや注意点、前職の経験が活かせる職業の例をいくつか挙げて解説します。また最後に、おすすめの転職サービスをいくつか紹介しています。転職活動の際に役立ててください。本記事はエンジニア転職を保証するTechAcademy Proの就職実績を元に制作しています。田島悠介今回は、キャリアに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介メーカー勤務から異業種に転職する方法について詳しく説明していくね！大石ゆかりお願いします！家電メーカーを辞める人の理由思い通りの部署に配属されない家電メーカーに就職する方は、基本的に相当優秀な方です。売り手市場の現在出会っても、家電メーカーは人気の就職先です。そもそも、人気の就職先になる理由として、学生の目に止まりやすい知名度の高さがあります。家電メーカーは、テレビCM、雑誌・新聞、インターネット広告、看板、量販店と、いたるところで広告を掲載しています。従って、就職したいという学生や、転職したい求職者が多いです。人気があるということは、能力が高くても、希望の部署に配属されるとは限らないという事を意味しています。理系の学生であれば、家電メーカーの開発部門を希望したが、販売部門で営業をすることになったとう不満が多いでしょう。しかし、企業側からすると、会社の様々な業務を経験させることで、適正を判断し、より良い人材に育ってほしいという社員教育の意味も含んだ采配となっています。そうはいっても、学生からすると、希望の部署に配属されないため、入社一年目で辞めることもあるようです。なお、中途採用者に関しては、採用初年から希望部署に配属されます。これは、その部署で働くために採用されているためです。経営統合によるリストラ家電メーカーは国際競争にさらされ、経営統合することも多くなっています。シャープシャープは2016年に台湾の鴻海という企業に買収されました。東芝東芝の白物家電を担当する東芝ライフスタイルは2016年に中国の美的集団に買収されました。白物家電というのは、個人宅で利用する、洗濯機、冷蔵庫等の家電代表とする、家電製品を意味します。三洋電機三洋電機とはパナソニックの創業者である松下幸之助氏の義理の弟が設立した家電メーカーです。そして、日本を代表する家電メーカーでもありました。 2011年に中国のハイアールに買収されました。どの家電メーカーも、国際的に知名度の高いメーカーでした。買収後は当然のように数千人単位でリストラが行われます。リストラ自体発表されず、なぜか数千人単位で社員が辞めていることもあるでしょう。もっと給料がほしいという希望「電機業界の年収」ランキング（＝グローバルウェイ調べ）　itmadia 経営統合によるリストラで、リストラさせたくない社員が、自ら会社をやめることもあります。家電メーカーの給与は決して悪いわけではありません。しかし、家電メーカーで数十年培った研究開発や技術は、世界的に見ても非常に価値がある技術です。もちろん、国際的にも知名度が高く、研究開発に潤沢な資金と時間を注ぐことができたからこそ、社員の技術力が高くなったという経緯があります。会社からしてみると、すぐに売上にならない技術への先行投資へ、多額の資金と時間を投資しているため、社員の給料を安易に増やすことは難しいでしょう。これに対して、社員からすると、自ら持つ技術を高く評価してくれる海外企業へ転職できれば、給料は3倍になることが現実的です。ただし、3倍の年収で海外大手に転職した技術者、3年後に解雇された理由という記事にも有るように、実際3倍の年収で転職すること自体は可能です。ただ、記事内でも言われているように、働き方によっては3年で簡単に解雇されます。とはいっても、3倍で3年働いたら9年分の年収を獲得できるという考え方もできるため、最初から3年だけ働いて、次の転職に活かすという考え方もできるかもしれません。転職するメリット給与日本の全都道府県で1番給料が高いのは平均年収2478万円のあの会社！2019年最新版先程家電メーカーの年収を示しましたが、日本の企業でも年収2478万円を提示している企業があります。 M&Aキャピタルパートナーズの75人という社員数から考えると、就職転職共に難しいかも知れません。キーエンスの2089万円であれば、すこしは現実的な2253人という社員数のようです。日本を代表する家電メーカーで、第一線で働いている方にとっては、高い給与を国内企業で受け取れることは、非常にメリットが大きいと言えます。なぜなら、先ほど紹介した記事のように、海外企業の場合使い捨てのような扱いを受けることも有るためです。希望の仕事ができる家電メーカーから転職する場合は、転職先の企業で希望の仕事をすることができる可能性が高いです。理由としては、転職先企業としては、希望の仕事で成果を上げてもらうために中途採用しているためです。なお、希望の仕事を割り振られない可能性としては、単純に人が欲しくて採用されてしまったという可能性や、転職先企業の都合により該当の仕事がなくなってしまう場合も有る点に注意が必要です。 [PR] Webデザインで副業する学習方法を動画で公開中家電メーカーから転職でおすすめの職種製造業家電メーカーに新卒段階から入社された方は、工場での勤務経験や、生産管理業務を行った経験も豊富だと思います。その様な経歴を活かす場合製造業に転職することが良いです。製造業の場合は、大手メーカーに比べると給料が下がるかも知れません。次の内容は、平成29年厚生労働省が発表した賃金構造基本統計調査における製造業の月給平均です。 20代　約23万円 30代　約29万円 40代　約36万円 50代　約41万円大手メーカーに比べると決して高いわけではありません。しかし、大手メーカーで製造の仕事をしたかったが、様々な理由で営業の職種に配置転換を行われ、現在に不満を抱えている方であれば、好きな仕事に従事できることは何よりの喜びかと思います。営業家電メーカーで営業職をやり続けたかったが、工場勤務などの非営業職に配置転換された場合は、営業職への転職がおすすめです。完全歩合制の営業職であれば、給料も1000万円を超えることも現実的です。また、営業中心の企業に転職すれば、工場勤務部門自体が存在しないため、営業だけに集中して仕事を続けることが可能です。海外のメーカー職国内での経験を生かして海外のメーカー職に転職する事も可能です。海外メーカーであれば、給与が2倍、3倍に増える可能性も高いです。むしろ、給与が3倍以上にならなければ、あえて海外メーカーで働くことは危険なのかも知れません。管理職国内の企業で、家電メーカーの管理方法を取り入れたい企業は多くあります。とくに中小企業にとっては、管理職を育成する時間もノウハウもないため、家電メーカーの管理職ノウハウを喜ばれるでしょう。プログラマー家電メーカーで、Webサイトを担当したり、家電自体のプログラミングを担当したりしていた場合は、プログラマーへの転職がおすすめです。役立つ転職サービスメイテックネクスト製造業専門の転職サービスです。家電メーカーの製造ノウハウをは、製造業全般で喜ばれるノウハウです。メイテックネクストいい求人NET 営業特化型転職サービスです。家電メーカーの営業職としての経験を他社で活かしましょう。いい求人NET 海外転職スカウトサービス海外で働きたい方向けの、海外転職用サービスです。日本の家電メーカーの品質管理技術を海外メーカーで活かすことが可能です。海外転職スカウトサービス日経エグゼクティブ転職管理職として家電メーカーでの経験を活かしたい向けの転職用サービスです。日経エグゼクティブ転職エンジニア転職保証コース TechAcademyが行っているエンジニア転職保証コースです。プログラミング未経験・初心者でも12週間で東京のIT企業へエンジニアとして転職を目指せるコースです。現役エンジニアとキャリアカウンセラーが学習から転職までサポートしています。家電メーカーでのプログラミング経験を、最新のプログラマーとして生かしていきましょう。エンジニア転職保証コースエンジニアになるための学習方法学習サービス Progate プログラミング言語の基本に特化した、オンラインで無料から使用できる学習サービスです。今までプログラミングを学んだことのない人でも始められる各言語のカリキュラムが揃っています。有料会員では実践レベルのものまですべてのコースを受講可能です。 Progateのレポート記事 Schoo 仕事に関係するさまざまな知識やスキルを学ぶことができる、動画と生放送による総合学習サービスです。生放送では講師に質問することもでき、参加しながらライブで勉強できます。有料会員ではすべての録画授業の閲覧・ダウンロードが可能です。 Schoo Udemy プログラミングやデザインなどの仕事に関する各種スキルを動画で学ぶサービスです。各コースでは講師が用意した小テストで復習したり、資料ファイルをダウンロードしたりすることができます。コースは有料のものと無料のものがあります。 Udemy スクールデジタルハリウッド Webやデザイン・CGなどのデジタルコンテンツに関する通学制スクールです。就職・転職だけでなくフリーランスや在宅ワークといったさまざまな形態の働き方へのマッチングサポートも充実しており、在学中から始められる仕事なども紹介されています。デジタルハリウッドヒューマンアカデミー職業に関する各資格の学習ができる総合スクールになります。学習形態は通学・通信・オンラインから選ぶことができます。各資格の日程なども公式サイトから一覧できるため、予定を立てて学ぶことができます。ヒューマンアカデミーリナックスアカデミー東京と横浜に校舎のある通学制スクールです。Linux・ネットワークの講座とJavaプログラミングの講座があります。少人数クラス担任制による、実務の流れに合わせた授業の進行が特徴です。そのため実際の業務に直結した本格的な技術と知識を集中して習得したい方におすすめです。リナックスアカデミーこの記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。地域の職業プログラマー育成活動では、小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！また、オンラインのプログラミングスクールTechAcademyではエンジニア転職保証のコースを提供しています。プログラミング未経験の方でも12週間で東京のIT企業へエンジニアとして転職を目指せるコースです。現役エンジニアへオンラインで個別に相談できる無料カウンセリングを実施しているので、まずはこちらから試してみてください！

エンジニア転職

Photoshopでトーンカーブを使って色調補正する方法【初心者向け】現役デザイナーが解説

Photoshopでトーンカーブを使って色調補正する方法を初心者向けに解説した記事です。トーンカーブを使用すると、画像の色や明るさを細かく調整できます。目次カーソル形状の変え方ブラウザによる違いポインターカーソルについてポインターカーソルが効かない原因と対処法ポインターカーソルを使ってみよう執筆してくれたメンター (※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています) 田島悠介今回は色調補正の機能の1つ「トーンカーブ」を使ってみよう。大石ゆかり田島メンター！！トーンカーブは何をするんですか～？田島悠介明るさの補正やコントラスト、色合いなどカラーに関する調整をまとめて行えるんだ。少し複雑だけれど、慣れるといろいろな表現ができるのでぜひ挑戦してみよう。大石ゆかりはい！やってみまーす！トーンカーブの設定画面トーンカーブの設定画面を説明します。今回はサンプルとして下の画像を使用します。上部メニュー「イメージ」内にある、「色調補正」→「トーンカーブ」を選択します。すると、トーンカーブの設定画面が開きます。画面内に表示されたグラフの対角線上に直線があり、この線を変形（カーブ）させることによって色を調整していきます。また、このグラフの横軸は「変更前の値」を、縦軸は「変更後の値」を示しています。下の画像のようにカーブのない直線の状態は、変更前と変更後の色の差がないことを意味します。トーンカーブの基本的な使い方実際に線を動かして画像の色調を補正してみましょう。トーンカーブで色調補正をする場合、カーブの形状パターンをいくつか覚えておくと便利です。例えば、直線上の一点をドラッグして上に移動し、下の画像のような上向きのカーブにすると画面全体が明るくなります。ドラッグした点は「制御点」として曲線上に追加され、この制御点をさらに動かすことで補正具合を調整できます。下の画像のような下向きのカーブにすると画像全体が暗くなります。設定画面の右側にある「プレビュー」にチェックを入れると、開いている画像に調整具合が反映されます。ぜひ、プレビューを確認しながら適切なカーブを探してみてください。曲線の形状をさらに変更する場合は、線上をクリックし新たに制御点を追加します。追加した制御点はCtrl（command）を押しながらクリックするか、グラフの枠外へドラッグすることで削除できます。制御点を利用し下の画像のようなS字の形状にすると、暗い部分はより暗く、明るい部分はより明るくなり、メリハリのあるはっきりした画像になります。トーンカーブの線を左右反対にすると、画像の色が反転されます。田島悠介基本的な使い方はこんな感じかな。大石ゆかりトーンカーブを触っただけなのに、ずいぶん雰囲気が変わりましたね。田島悠介曲線の操作方法には他にもいくつか便利なものがあるので、そっちも見てみよう。 [PR] Webデザインで副業する学習方法を動画で公開中トーンカーブの便利な機能設定画面の右側にある「自動補正」ボタンを押すとPhotoshopが画像を解析し、自動的に制御点が追加され、曲線が形成されます。ペンの形をした「描画してトーンカーブを変更」のアイコンをクリックすると、グラフ上に直感的に線を描画してカーブの形状を変更できます。ペンのアイコンをクリックして線を描画した後、左の「ポイントを編集してトーンカーブを変更」アイコンをクリックすると、描画した形を反映したまま制御点によって編集し直せます。田島悠介あとから微調整するためにも、この辺りの編集方法はしっかり押さえておくといいと思うよ。大石ゆかり制御点はいくつでも追加できるんですね。でもいろいろ触ってたら何か色合いが変な画像になっちゃいました…… 田島悠介慣れないうちは今回やったメリハリをつけるS字など、いくつか決まった形とその効果を覚えておくのがいいかもしれないね。大石ゆかり他にも編集例が見たいです！風景写真の色調補正例今度は他の写真を使ってトーンカーブを編集してみましょう。下の都市風景の写真を補正していきます。少しぼやけた印象があるので、トーンカーブの曲線を下に向けてくっきりとした印象にしていきます。写真のトーンを落とすことで、全体的に引き締まった印象になりました。今度はトーンカーブの曲線を上に向けて明るくしてみましょう。全体が明るくなり、写真の印象が明るくなりました。大石ゆかりトーンカーブを少し操作するたけで、かなり印象が違う写真になるんですね！田島悠介トーンカーブをマスターすれば、同じ写真から複数パターンの写真を作れるんだよ。カーブの形状パターンを覚えておけば、ある程度補正後のイメージが予測できるから、覚えておくといいよ。大石ゆかりはい！覚えてみます！コントラストを強調した色調補正例次は下の写真の色調を補正していきます。逆光により手前の人物が暗くシルエットのように見え、雰囲気のある写真です。もう少し太陽の光が目立つよう、少しトーンを落としつつコントラストを高めてみましょう。トーンカーブは以下のように編集しました。太陽の光以外の明るさを落とすことでコントラストがより強調され、感動的な印象が加わりました。大石ゆかりトーンカーブだけでもいろいろな雰囲気の写真が作れるんですね！田島悠介トーンカーブと他の編集を組み合わせて使うことはよくあるから、しっかりと覚えておくように。大石ゆかり分かりました！ありがとうございます！まとめトーンカーブは、画像のもつ階調（最も暗い部分から最も明るい部分までの遷移）を、変更前は横軸で、変更後を縦軸で示したものです。直線をさまざまな形状の曲線に変更することで、画像の色調を細かく補正できます。初めのうちは、いくつかのカーブの形状パターンがどんな効果を持っているのかを覚えておくとよいでしょう。 Photoshopには他にも「明るさ・コントラスト」や「レベル補正」などの色調補正機能がありますが、トーンカーブを使えばそれらを一度に調整できるようになります。トーンカーブを使った画像補正を覚えて、さらに幅広い表現を身につけてみてください。 Photoshopを学習中の方へこれで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。

Photoshop

CSSでマウスカーソルの変更方法を現役エンジニアが解説【初心者向け】

CSSでマウスカーソルの変更方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をみてみましょう。なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。田島悠介今回は、CSSに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介マウスカーソルの変更方法について詳しく説明していくね！大石ゆかりお願いします！目次 cursorプロパティについてカーソルの種類と対応ブラウザ cursorプロパティの注意点カーソルを変えてみようまとめ cursorプロパティについて CSSでマウスカーソルを変更するにはcursorプロパティを使用します。 cursorプロパティの記述方法は以下のとおりです。 cursor: キーワード; キーワードにはカーソルを示す名称を指定しましょう。または以下のように画像ファイルを指定することも可能です。 cursor: url(画像ファイル) キーワード; [PR] Webデザインで副業する学習方法を動画で公開中カーソルの種類と対応ブラウザ cursorプロパティはほとんどのブラウザで対応しているものの、スマートフォンのAndroidの組み込みブラウザ(WebView)及びFireFoxでは対応していません。 cursorプロパティの注意点 cursorプロパティは一部のブラウザで対応していない点に注意が必要です。また、マウスカーソルは位置を指し示す役割があります。具体的な位置を指し示すことが分かりづらいようなカーソルは避けるようにしましょう。カーソルを変えてみよう今回のサンプルプログラムではcursorプロパティを使用してマウスカーソルを変える方法について確認しましょう。なお、画像ファイルはBootstrap IconsからAlarmをファイルに保存して使用しています。 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sample</title> <style> div { width: 100px; height: 50px; display: inline-block; background-color: lightblue;

CSS

Photoshopを使ってベジェ曲線を描く方法【初心者向け】

ベジェ曲線とはコンピューターグラフィックにおいて主に図形や文字を描画する際に使用されるもので、始点・終点などの座標を元に形成されています。一般的には、Adobe Illustratorを使って描くことが多いです。 Photoshopではこのベジェ曲線を「ペンツール」機能を使用することによって作成できます。目次カーソル形状の変え方ブラウザによる違いポインターカーソルについてポインターカーソルが効かない原因と対処法ポインターカーソルを使ってみよう執筆してくれたメンター (※今回の作業はすべてAdobe PhotoShop CCのバージョンでおこなっています) 大石ゆかり田島メンター！！ベジェ曲線って何ですか～？田島悠介点と点の間を滑らかな曲線になるように計算して描画されるベクター形式の線だよ。 Photoshopでは「ペンツール」で描画することができるんだ。大石ゆかりペンツールってなかなかよく分からなくて、あまり触ったことがないです…… 田島悠介いくつかのポイントを押さえれば、思った通りの線が引けるようになると思うよ。早速やってみよう。 Photoshopでベジェ曲線の図形を描画する方法画面左のツールパネルからペンツールアイコンを右クリックし、一番上の「ペンツール」を選択します。カンバス内の適当なところでクリックしてみましょう。次に、少し離れたところで同じようにクリックすると点と点が直線で繋がれました。この各点を「アンカーポイント」、間の線を「パス」と言います。今度は別の場所で、クリックした指を離さずにそのまま下方向にドラッグしてみましょう。すると、ドラッグした方向とその180度反対の方向に直線が出てきます。この直線は「ハンドル」と言い、向きや長さを調整して曲線の形状を調整できます。田島悠介この「ハンドル」がベジェ曲線を作成するときに重要になるので操作をよく覚えておこう。大石ゆかり操作しようと思ったら、新しいアンカーポイントが作成されちゃいました…… 田島悠介ハンドルを操作するときはCtrl(Macの場合はcommand)を押しながら触ることを心がけよう。カーソルの形が変わるのでそれを目安にするといいよ。ハンドルを回すことで曲線の形状を調整できます。ハンドルはCtrl(command)を押しながら端の点をドラッグすることでいつでも操作が可能です。以下のように、始点と終点が別の場所にある状態のパスを「オープンパス」と言います。オープンパスに対して始点と終点が同じ位置にあるパスのことを「クローズドパス」と言います。線を設定する方法パスの上で右クリックし「パスの境界線を描く」を選択するとパスの形に沿って線を描画できます。以下はパスに沿って線を描画した状態です。画面左のツールパネルで描画色に設定されている色で線が描画されました。内側を塗りつぶす方法パスの上で右クリックし「パスの塗りつぶし」を選択するとパス内を塗りつぶすことができます。クリックすると表示される「パスの塗りつぶし」ウインドウでは、色の設定を行うことができます。以下はパス(クローズドパス)を塗りつぶした状態です。オープンパスの場合は自動で始点と終点が結ばれ範囲が作成されます。パスを選択範囲に変更する方法パスの上で右クリックし「選択範囲を作成」を選ぶとパスの形状に沿って選択範囲が作成されます。以下は選択範囲が作成された状態です。塗りつぶしの時と同様に、オープンパスの場合は自動で始点と終点が結ばれ範囲が作成されます。パスの形状を調整する方法形状をより単純化したい時などは、アンカーポイントを少なくしてみましょう。アンカーポイントの上で右クリックし「アンカーポイントを削除」でポイントを削除できます。直線的な部分を滑らかな曲線にしたい時は、アンカーポイントにハンドルを追加してみましょう。ペンツールアイコンを右クリックして「アンカーポイントの切り替えツール」を選択します。ハンドルの作成されていないアンカーポイント上でドラッグすることで、ハンドルを後から追加できます。アンカーポイントの位置を調整したい場合は、画面左のツールパネルから「パス選択ツール」を選びます。アンカーポイントに合わせドラッグすると、ポイントを自由に移動させることができます。作成したパスを全て削除したい場合は右クリックから「パスを削除」を選択します。田島悠介アンカーポイントとハンドル、このふたつの操作方法をよく知っておくのが基本だね。大石ゆかり後から図形の形を変えたいときはアンカーポイントを追加したり移動したり、ハンドルで操作したりしたらいいんですね。田島悠介ペンツールの操作はブラシツールと違って直感的にはあまりうまく動作しないけれど、ひとつひとつの操作やショートカットキーを丁寧に覚えていけば自由に使えるようになるよ。大石ゆかりはい！練習してみます！まとめ今回は、Photoshopでベジェ曲線を描く方法を、パスの描画に着目して紹介いたしました。円形ツールなどで描画する「シェイプ」も、実はベジェ曲線で描かれたクローズドパスの図形になります。ベジェ曲線が編集できると、ちょっとしたパスの修正が容易に行えて非常に便利です。アンカーポイントやパス、ハンドルの操作などはIllustratorのペンツールとほぼ共通ですので、スキルのひとつとしてぜひ習得してみてください。 [PR] Webデザインで副業する学習方法を動画で公開中Photoshopを学習中の方へこれで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。

Photoshop

Javaでカードゲームを作成する方法を現役エンジニアが解説【初心者向け】

Javaでカードゲームを作成する方法について解説します。実際にプログラムを書いて説明しているので、ぜひ理解しておきましょう。そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプJava講座の内容をもとに作成しています。田島悠介今回は、Javaに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介カードゲームを作成する方法について詳しく説明していくね！大石ゆかりお願いします！ Javaでカードゲームを作成 Javaでババ抜きを実装します。コンソールに出力し、カードの描写は”[” + カードの数値 + “]”で簡易化して表示します。プレイヤーと相手のそれぞれが保持しているカードの情報はString型のリストに格納します。最初に分配するカードや、相手によって選ばれるカードはMath.random()を用いてランダムに選びます。例えば1,2,3,4,5という5つの要素が格納されたリストから、ランダムにひとつの要素を取得する場合は (int) (Math.random() * リストの要素数) で得られる値を要素番号に指定してリストから取得します。相手のカードを選んだら、自分のリストに追加します。自分の保有するリストに同じ値が2つある場合はその2つの要素をリストから削除します。プレイヤーと相手で交互に繰り返し、どちらかのリストが0件になったら終わりです。実際に書いてみよう import java.util.ArrayList; import java.util.List; import java.util.Scanner; public class Babanuki { //相手のカードのリスト static List<String> player1_cards = new ArrayList<String>(); //プレイヤーのカードのリスト static List<String> player2_cards = new ArrayList<String>(); //ゲーム継続降らす static boolean continue_game = true; public static void main(String[] args) throws Exception { initGame(); Scanner sc = new Scanner(System.in); System.out.println("-------------------------------------------------------------"); System.out.println("重複を削除します: y:yes"); String s = sc.next(); if (s.equals("y")) { displayCardsReverse(clearCards(player1_cards)); displayCards(clearCards(player2_cards));

Java

HTMLで蛍光ペンのようなマーカーを作成する方法を現役デザイナーが解説【初心者向け】

HTMLで蛍光ペンのようなマーカーを作成する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。田島悠介今回は、HTMLに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介蛍光ペンのようなマーカーを作成する方法について詳しく説明していくね！大石ゆかりお願いします！蛍光ペンのマーカー例テキストの大事な所や目立たせたい所に、蛍光ペンのマーカーで引いたようなラインをHTMLとCSSで簡単に表現することができます。spanタグやstrongタグにクラス名を付けて使用しますが、特にstrongタグは、見た目にも検索エンジンにもテキストの重要性を伝えることができます。太さと色を変える方法 CSSでクラス名を付けて、「linear-gradient」属性を使用します。ラインの太さを変える transparentの後の「%」の値で太さを設定します。大きい値にすると、マーカーのラインは細くなり、小さい値にすると太くなります。100％にすると、マーカーのラインは消えてしまいます。0%～95%の値がおすすめです。ラインの色を変える「#」で始まる6桁のカラーコードで色を設定します。こちらは検索して調べると出てくるので、覚える必要はありません。 [PR] Webデザインで副業する学習方法を動画で公開中蛍光ペンのマーカーをひいてみよう太さ0%のマーカー HTML 吾輩は猫である。名前はまだ無い。 CSS .marker_line0 { background:linear-gradient(transparent 0%, #fec1fe 0%); } 太さ20%のマーカー HTML 吾輩は猫である。名前はまだ無い。 CSS .marker_line20 { background:linear-gradient(transparent 20%, #fec1fe 0%); } 太さ40%のマーカー HTML 吾輩は猫である。名前はまだ無い。 CSS .marker_line40 { background:linear-gradient(transparent 40%, #fec1fe 0%); } 太さ60%のマーカー HTML 吾輩は猫である。名前はまだ無い。 CSS .marker_line60 { background:linear-gradient(transparent 60%, #fec1fe 0%); } 太さ80%のマーカー HTML 吾輩は猫である。名前はまだ無い。 CSS .marker_line80 { background:linear-gradient(transparent 80%, #fec1fe 0%); } See the Pen 蛍光マーカー太さ by HO-Cosmos (@ho-cosmos) on CodePen. ピンクのマーカー HTML 吾輩は猫である。名前はまだ無い。 CSS .marker_pink { background:linear-gradient(transparent 60%, #fec1fe 0%) }; 黄色のマーカー HTML 吾輩は猫である。名前はまだ無い。 CSS .marker_yellow {

HTML

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

CSSで”cursor: pointer”が効かない原因と対処方法を現役エンジニアが解説【初心者向け】

目次

カーソル形状の変え方