Care Code
こんにちは、まっすと申します。
今回はWeb作成の勉強をしている人なら必ず見たことがある『Code Pen』で画像を利用する方法を紹介します。
Code Penってなに？と思った人もいるかもしれませんが、わからないことをgoogleで検索した時に見たことがあるはず！
「code」と「プレビュー」を見ることのできるものです。
Code Penはこんなのです！
See the Pen Untitled by care-code (@sub-care-code) on CodePen.
きっと見たこともあるという人も多いのではないでしょうか！
この記事は自己学習の記録としても使っていこうかなと思います。
Code Penでの画像利用時の注意点
- GoogleドライブもしくはDropboxの利用が必要である
- 画像のURLはそのままでは利用できない
もし「Code Pen」での画像の利用方法がわからない、将来的に「Code Pen」を利用して自分もコードについて紹介したいという人の役に立てれば嬉しいです(๑>◡<๑)
Code Pen とはどんなもの？
「Code Pen」とはブラウザ上でHTML・CSS・JavaScriptのコーディングができるサービスになります。
リアルタイムにコーディングしているプレビューが表示され、Webサイトやブログなどにプレビュー画面を埋め込むことができるのが特徴です。
Code Penで画像を利用する方法
さきほど紹介した通り、HTML・CSS・JavaScriptのコーディングをリアルタイムでプレビュー表示できるという点は想像がつきやすいですよね。
しかし、画像ってどうやって使うの？
私はかなり悩みました！
「Code Pen」では画像を使用する際に少し特殊な作業が必要になります！
Code Penで画像を利用するために必要なもの
画像を利用するために必要なものは
- Googleドライブ
- Dropbox
以上のうち、どちらか1つになります！
Googleドライブは「Gmail」などを利用している人はすでに持っていますよね。
どちらも無料でアカウントが作成できますので、安心してください！
今回は、Googleドライブでの使用方法を紹介します！
Googleドライブを利用した方法
まずは「Code Pen」で利用したい画像をGoogleドライブにアップロードします。
Googleの検索フォーム右上にある点をクリックし、その中にある「ドライブ」をクリックします。
マイドライブの中に画像をドラッグアンドペーストして「アップロード」します。
画像にマウスを合わせて「右クリック」→「リンクを取得」をクリックします。
「リンクをコピー」をクリックし、リンクを取得します！
今回の画像では以下のURLがコピーされました。
「https://drive.google.com/file/d/1VfdWX-2ZbI2GxNc_MmdvJj5U7625s7W5/view?usp=sharing」
実はこのままでは「Code Pen」では利用できません。
Code Penで画像を読み込む方法
さきほどコピーしたリンクのURLの一部を書き換える必要があります！
「https://drive.google.com/file/d/画像ID/view?usp=sharing」
このURLの「file/d/」の後ろから「/view?」の前までが画像のIDになります。
この画像では「1VfdWX-2ZbI2GxNc_MmdvJj5U7625s7W5」になりますね。
この画像IDを「https://drive.google.com/uc?export=view&id=」の後ろにペーストします！
今回は「https://drive.google.com/uc?export=view&id=1VfdWX-2ZbI2GxNc_MmdvJj5U7625s7W5」ということになります。
編集したURLを<img>のsrcに絶対パスで貼り付けます。
See the Pen Untitled by care-code (@sub-care-code) on CodePen.
無事に画像を読み込むことに成功しました！
私は普通にURLをコピーしてしまい、画像が表示されない状態で苦戦しました！笑
こんなの普通は知らないですよね。。。
でもわかってしまえば簡単ですよね。
まとめ：Code Penで画像を利用するにはURLを変更する必要がある
今回実感しましたが、この方法は最初から知っていたという人は少ないのではないでしょうか？
Code Penで画像を利用する方法のまとめ
- GoogleドライブもしくはDropboxの利用が必要である
- どちらも無料で利用できる
- 画像のURLを取得する必要がある
- 画像のURLはそのままでは利用できない
もしこの記事が悩んでいる人の役に立っていればうれしいです！
私は独学で Web作成を勉強し、悩みまくりました。。。
今後もWeb作成で悩んでいる人に役立つ情報を発信できればと思います。
twitter(@massut3t)もやっていますので、ぜひフォローやDMよろしくお願いします。
一緒に目標に向かって頑張りましょう！
