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

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

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

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

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

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

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、スクールが向いているかもしれません。
お試しのつもりで、まずは一度無料相談に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分をすべて無料でできます。
無理な勧誘は一切ないので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！無料相談はこちら

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

標準の規定として、状態によってカーソルの形状が決まっている場合でも、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デザイン講座を開催しています。

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

プログラミングを独学していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう厳しい試験を通過した講師があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

CSSでかわいいデザインのボタン10選を現役エンジニアが紹介【初心者向け】

CSSでかわいいデザインのボタン10選について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 CSS...

CSS

CSSのletter-spacingの使い方【初心者向け】

CSSのletter-spacingの使い方について解説します。そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読む...

CSS

HTMLのdl要素を使って説明リストを作る方法を現役エンジニアが解説【初心者向け】

HTMLのdl要素を使って説明リストを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

Webページごとに異なるCSSを適用する方法を現役デザイナーが解説【初心者向け】

Webページごとに異なるCSSを適用する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

CSS

CSSでブロック要素を下揃えにする方法を現役エンジニアが解説【初心者向け】

CSSでフレックスボックスレイアウトを設定し、ブロック要素を下揃えにする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者...

CSS

事例から学ぶ！Webアニメーションのテクニックまとめ

本稿は、Studio by UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Nick Babich氏によって投稿されまし...

Webデザイン

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

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

今回は家電メーカーから異業種に転職する方法を解説します。メーカー勤務からの転職においてのメリットや注意点、前職の経験が活かせる職業の例をいくつか挙げて解説します。また最後に、おすすめの転職サービスをいくつか紹介しています。転職活動の際に役立ててください。本記事はエンジニア転職を保証する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企業へエンジニアとして転職を目指せるコースです。現役エンジニアとキャリアカウンセラーが学習から転職までサポートしています。家電メーカーでのプログラミング経験を、最新のプログラマーとして生かしていきましょう。エンジニア転職保証コースコラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

エンジニア転職

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

Photoshopでトーンカーブを使って色調補正する方法を初心者向けに解説した記事です。トーンカーブを使用すると、画像の色や明るさを細かく調整できます。目次カーソル形状の変え方ブラウザによる違いポインターカーソルについてポインターカーソルが効かない原因と対処法ポインターカーソルを使ってみよう執筆してくれたメンター (※今回の作業はすべてAdobe Photoshop CCのバージョンで行っています) 田島悠介今回は色調補正の機能の1つ「トーンカーブ」を使ってみよう。大石ゆかり田島メンター！！トーンカーブは何をするんですか～？田島悠介明るさの補正やコントラスト、色合いなどカラーに関する調整をまとめて行えるんだ。少し複雑だけれど、慣れるといろいろな表現ができるのでぜひ挑戦してみよう。大石ゆかりはい！やってみまーす！トーンカーブの設定画面トーンカーブの設定画面を説明します。今回はサンプルとして下の画像を使用します。上部メニュー「イメージ」内にある、「色調補正」→「トーンカーブ」を選択します。すると、トーンカーブの設定画面が開きます。画面内に表示されたグラフの対角線上に直線があり、この線を変形（カーブ）させることによって色を調整していきます。また、このグラフの横軸は「変更前の値」を、縦軸は「変更後の値」を示しています。下の画像のようにカーブのない直線の状態は、変更前と変更後の色の差がないことを意味します。トーンカーブの基本的な使い方実際に線を動かして画像の色調を補正してみましょう。トーンカーブで色調補正をする場合、カーブの形状パターンをいくつか覚えておくと便利です。例えば、直線上の一点をドラッグして上に移動し、下の画像のような上向きのカーブにすると画面全体が明るくなります。ドラッグした点は「制御点」として曲線上に追加され、この制御点をさらに動かすことで補正具合を調整できます。下の画像のような下向きのカーブにすると画像全体が暗くなります。設定画面の右側にある「プレビュー」にチェックを入れると、開いている画像に調整具合が反映されます。ぜひ、プレビューを確認しながら適切なカーブを探してみてください。曲線の形状をさらに変更する場合は、線上をクリックし新たに制御点を追加します。追加した制御点はCtrl（command）を押しながらクリックするか、グラフの枠外へドラッグすることで削除できます。制御点を利用し下の画像のようなS字の形状にすると、暗い部分はより暗く、明るい部分はより明るくなり、メリハリのあるはっきりした画像になります。トーンカーブの線を左右反対にすると、画像の色が反転されます。田島悠介基本的な使い方はこんな感じかな。大石ゆかりトーンカーブを触っただけなのに、ずいぶん雰囲気が変わりましたね。田島悠介曲線の操作方法には他にもいくつか便利なものがあるので、そっちも見てみよう。 [PR] Webデザインで副業する学習方法を動画で公開中トーンカーブの便利な機能設定画面の右側にある「自動補正」ボタンを押すとPhotoshopが画像を解析し、自動的に制御点が追加され、曲線が形成されます。ペンの形をした「描画してトーンカーブを変更」のアイコンをクリックすると、グラフ上に直感的に線を描画してカーブの形状を変更できます。ペンのアイコンをクリックして線を描画した後、左の「ポイントを編集してトーンカーブを変更」アイコンをクリックすると、描画した形を反映したまま制御点によって編集し直せます。田島悠介あとから微調整するためにも、この辺りの編集方法はしっかり押さえておくといいと思うよ。大石ゆかり制御点はいくつでも追加できるんですね。でもいろいろ触ってたら何か色合いが変な画像になっちゃいました…… 田島悠介慣れないうちは今回やったメリハリをつけるS字など、いくつか決まった形とその効果を覚えておくのがいいかもしれないね。大石ゆかり他にも編集例が見たいです！コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

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プロパティは一部のブラウザで対応していない点に注意が必要です。また、マウスカーソルは位置を指し示す役割があります。具体的な位置を指し示すことが分かりづらいようなカーソルは避けるようにしましょう。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

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

今さら聞けない！GitHubの使い方【超初心者向け】

開発者にとってなくてはならないサービスとしてGitHubがあります。エンジニアにとっては当たり前のサービスですが、これからプログラミングの勉強を始める初心者にとってはよくわからないかもしれません。そこで今回は、GitHubの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもGitHubとは何なのか、どんな時に使うツールなのかを知っていきながら、実際の使い方を紹介しています。本格的に使おうと思ったらもっと多くのことを知る必要がありますが、業務で使うということでなければ十分でしょう。目次カーソル形状の変え方ブラウザによる違いポインターカーソルについてポインターカーソルが効かない原因と対処法ポインターカーソルを使ってみよう執筆してくれたメンター Gitについてそもそもよく分からないという方は、GitHubとは何なのか解説した記事を読むとさらに理解が深まります。今回の記事の内容は動画でもご覧いただけます。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。大石ゆかり田島メンター！！GitHubってなんですか〜？田島悠介 GitHubはね、Gitをオンライン上で管理するサービスだよ。大石ゆかりもう少し詳しく教えてもらえますか〜？ GitHubとは GitHubとは、ソフトウェア開発プロジェクトのためのソースコード管理サービスです。ソースコードを更新したバージョンの管理や閲覧、バグ追跡機能、SNSの機能を備えており、開発者にとってなくてはならないサービスです。また、GitHubを使ってソースコードの管理を行っている企業も多数あります。 GitHubが人気な理由と類似サービスとの違い GitHubと同じようなソースコード管理サービスとしては、BitbucketやGitLabなどがあります。それぞれのサービスとの違いをもとに、GitHubが人気な理由を見ていきましょう。理由1：無料のプライベートリポジトリソースコードを管理する単位をリポジトリと呼びます。リポジトリは格納場所という意味で、他の利用者にも公開されるパブリックリポジトリと、公開が関係者だけに限定できるプライベートリポジトリがあります。ソースコードを公開したくない場合は、プライベートリポジトリを選択する必要がありますが、以前はGitHubは有料、BitbucketやGitLabでは無料という状況でした。しかし2020年4月から、GitHubでも無料のプライベートリポジトリを無制限に作成可能になりました。これによりGitHubを使いたかったがソースコードは公開したくない個人や企業の利用が大幅に増え、さらにGitHubの人気が高まる状態となりました。理由2：オープンソースコミュニティに育まれたSNS機能オープンソースとはソースコードが公開されており、誰でも無料で利用できるソフトウェアのことを指します。また、オープンソースコミュニティとは、オープンソースの開発者同士の集まり、結びつきのことです。 GitHubでは以前から多くのオープンソースが管理されており、たくさんのオープンソースコミュニティが形成されています。このオープンソースコミュニティに育まれる形で、GitHubには以下のような機能が充実しており、コミュニティが開発を行いやすくなっています。コミュニティの中で誰がどのぐらい貢献しているかを可視化する機能（スター、貢献度）開発メンバーの知見を共有する機能（Wiki、GitHub Pages）ソースコードの更新などに関する議論をやりとりする機能（Issues、Codeとの連動）単にソースコード管理サービスとしての機能だけを捉えると、実はGitHub、Bitbucket、GitLabとも大きな違いはありません。しかしこのような開発しやすい環境を支援する機能という点では、GitHubが頭一つ抜けている印象を持ちます。理由3：先進的な機能の拡充 GitHubは2018年にMicrosoft社に買収され、傘下の一企業となりました。 Microsoft社は買収後もGitHubを独立企業として維持する意向を示しており、両社はオープンソースコミュニティにとっても良好な関係となっています。このような環境の中から、以下のような先進的な機能が次々と誕生しています。世界中のエンジニアに人気のあるMicrosoft社のフリーのソースコード編集ソフト「Visual Studio Code」をオンラインで利用できる「Codespaces」オープンソースコミュニティに開発者としてではなく、資金提供者として参加できる「Sponsors」機能ソフトウェアの開発から公開までの一連の流れをサポートする「GitHub Actions」これら先進的な機能は類似のソースコード管理サービスにはないものであり、開発者にとってGitHubを選ぶ理由の1つとなっています。 GitHubのアカウント登録それではさっそくGitHubに登録してみましょう。まずは、GitHubのトップページにアクセスします。ここでメールアドレスを入力し、緑色の「Sign up for GitHub」ボタンをクリックします。次の画面でUsername（ユーザー名）やPassword（パスワード）を入力します。下の方にある「Pick the spiral galaxy」は、不正なユーザー登録を防ぐための仕組みです。クイズになっており渦巻状の銀河の絵を数回選択します。なお、このクイズは定期的に変わるようです。決められた回数、クイズに正解すると「Create account」ボタンを押せるようになります。ボタンを押して次に進みましょう。このような画面になります。登録したメールアドレスに認証のメールが届きます。メールの内容に従いユーザー認証を行ってください。以上でGitHubのアカウント登録は完了です。大石ゆかり GitHubの登録はできました♪それで、どうやって使うんですか〜？田島悠介その前にいくつか知っておいたほうがいいことがあるから、教えておくね。大石ゆかりはい、お願いします♪ [PR] Webデザインで副業する学習方法を動画で公開中GitHubを使う上で知っておきたい事前知識早速GitHubを使っていきたいところですが、使い始める前に知っておきたい事前知識を3つ紹介します。ここで紹介する言葉がまったくわからない場合は、理解しておきましょう。事前知識1：ローカルリポジトリとリモートリポジトリ事前知識2：コミットとプッシュとは事前知識3：ブランチ（branch）とは事前知識4：インデックス（index）とは事前知識1：ローカルリポジトリとリモートリポジトリリポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2カ所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。事前知識2：コミットとプッシュとは最低限この2つは知っておきましょう。コミット(commit) ファイルの追加や変更の履歴をリポジトリに保存することプッシュ(push) ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作事前知識3：ブランチ（branch）とはソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。事前知識4：インデックス（index）とはリポジトリ管理下にあるディレクトリの中には、一時的に使うファイルなど、Git管理が不要なものもあります。そこでGitでは、バージョン管理する対象のファイルやフォルダを「インデックス」と呼ばれる台帳に登録することで、必要なもののみバージョン管理が行えるようになっています。逆に言えば、新たにフォルダやファイルを作成した場合、コミットする前にインデックスに登録する必要があります。忘れないようにしましょう。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、

Git

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

目次

カーソル形状の変え方