WEB制作系のブログや学習系のサイトでよく見るこのようなソースコード＆プレビュー表示。
See the Pen CSS画像丸く切り抜く 位置指定 by sukimadou (@sukimadou) on CodePen.
今回はWEBツール「CodePen」を使って このプレビュー表示をやってみましょう。
CodePenとは
今回使用するCodePenというWEBツールは、ブラウザ上でHTMLやCSSのコーディングができるツールです。
書いたコードがリアルタイムでプレビューされるので、コーディング練習にも最適です。
１番の特徴は作成したソースコードをシェアできること！
CodePenを使ってみよう
アカウント登録
CodePenは無料で使用できるツールですが、アカウントが必要になります。
CodePenのサイトにアクセスしてまずはアカウント登録をしましょう。
→CodePen
右上の「Sign Up」からアカウントを作成します。
Twitter、GitHub、Facebookのアカウントかメールアドレスから選んで登録できるので、好きなものを選んで作成してください。
コード書いてプレビューを作成
アカウント登録が済んだら「Pen」をクリック。
こちらがまっさらな新規画面。
HTML、CSS、JSの枠内へコードを入力すると赤枠部分にリアルタイムでプレビューされます。
このような感じです。
左上のタイトルは鉛筆マークをクリックすると変更できます。
作成したプレビューをサイトに埋め込む
プレビューを作成したらサイトに埋め込んでみましょう。
右下の「Embed」をクリック。（小さくて見づらい…）
この画面で埋め込みの仕様を決めます。
- Themeのタブでプレビュー表示モードを「light」か「Dark」に
- Preview部分の「HTML」「CSS」でどちらをデフォルト表示にするか決定
- 赤矢印部分をドラッグで表示時の高さを設定
仕様の設定が済んだら「Copy＆Paste Code」のグレー部分のコードを表示したいサイトへコピー＆ペーストして埋め込み完了です。
See the Pen CSS画像丸く切り抜く 位置指定 by sukimadou (@sukimadou) on CodePen.
こんな感じで表示されればOKです。
CodePenで画像を使用する
CodePenで画像を使用したい場合、私はGoogleドライブに画像をあげてそれをリンクで引っ張って使用しています。
Googleのアカウントを持っていれば誰でも無料で使えます。
→Googleドライブ
Googleドライブにアクセスしたら使用したい画像を赤枠部分にドラッグ＆ドロップでアップロードします。
アップロードした画像を右クリックしてリンクを取得します。
ブログやサイトに埋め込む場合やコードを共有する場合は、リンクの設定を「リンクを知っている全員」にしてリンクをコピー。
ここで少しリンクのコードをいじります。
https://drive.google.com/file/d/画像のID/view?usp=sharing
となっているリンクを
https://drive.google.com/uc?export=view&id=画像ID
こちらのように書き換えてください。
HTMLやCSSで画像を呼び出す部分に上記で手を加えたリンクを貼れば画像が反映されます。
