セクションタグの取得方法 ペライチコーディング【基礎知識】
pera-professional
ペライチでコーディングするなら「セクションタグ」の取得は必須です！
ペライチでコーディングを始める際「セクションタグ」の取得方法は基礎となりますので、この記事で必ず覚えましょう。
「セクションタグ」を取得できれば、ブロックごとにCSSでデザインを装飾できたりと、細かいデザインが実現可能になります。
これからペライチの「コーディング技術」を習得していきたい方は、是非最後までご覧ください。
コーディングの事前準備
ペライチでコーディングを行う際、ブラウザは「Google Chrome」を推薦しております。Google Chromeの「検証」機能を使ってHTMLタグの取得などを行っていきますので、ご準備としまして、先ずはGoogle Chromeのインストールを行ってください。
Google Chromeのインストールはこちら
セクションタグの取得方法
では実際に例を出しながら、セクションタグの取得を行っていきます。今回は、以下の「ブロック」のセクションタグを取得していきます。
ペライチでブロックの設置ができましたら、「プレビュー」で実際にサイトを確認していきましょう。
先ほどもご説明しましたが、ブラウザは「Google Chrome」を使ってご覧ください。
ブラウザでサイトの確認をしましたら、次は画面上で右クリックを押して「検証」を選択してください。
こちらの機能は「デベロッパーモード」となり、サイトのHTML情報やCSSの情報など、サイトの構造を調べることができる機能となります。
こちらの機能を使って、ペライチの「セクションタグ」の検出を行います。
「検証」機能をクリックしますとこちらの画面が表示されます。こちらでは、ペライチで制作したサイトの「HTML構造」が確認できます。
「検証」ではサイトの構造を色々と調べる事ができますが、今回は「赤矢印」の箇所をクリックして進めてください。
「赤枠」をクリックすると、サイト内のブロックを選択できますので、実際にコーディングで装飾したいブロックを「画面上でカーソルを合わせて」選択してください。
ブロックを選択すると画面のように「青背景」に染まりますので、こちらでブロックの選択は完了です。ブロックの選択が終わりましたら、実際に「セクションタグ」の取得を行っていきます。
画像の赤枠「id="section-3"」が、今回のブロックのセクションIDになります。
こちらのIDは、ペライチでブロックを設置する順番によって「変動」しますので、コーディングを行う際はブロックごとにこちらの作業を行って確認してください。
以上で「セクションタグ」の取得は完了となります。今回コーディングを行いたいブロックのIDは「section-3」と確認ができましたので、次は実際にこちらのIDを使ってCSSでコーディングを行っていきます。
CSSコーディングの実例
では実際に取得したIDを使って、指定の箇所のCSSコーディングを行っていきます。今回はブロック内にある「写真」に「影（シャドー）」をかけていきたいと思います。
先ずは以下の「HTML埋め込み（横幅フル）」をサイトの一番下（Footerの一つ上）に設置して、コーディングの準備をしていきましょう。
ペライチで「HTML/CSS/JavaScript」を書く際は、こちらの「HTML埋め込み（横幅フル）」にコーディングする形となります。
「HTML埋め込み」の機能はペライチの「レギュラープラン」以上のプラン契約が必要となり、コーディングでデザインを装飾したい方は「レギュラープラン」以上をおすすめしております。
CSSの実装
では実際にこちらのブロックで、CSSのコーディングを行っていきます。
<style>
/*この中にCSSを記述します*/
</style>上記がCSSを記述する為に必要なコードとなります。<style>と</style>タグで囲み、タグの中にCSSコードを記述していきますが、こちらのタグがないとCSSが効きませんので必ず記述してください。
次に<style>と</style>タグ内に先ほど取得した「セクションタグ」を使って、CSSコーディングを行っていきます。
<style>
#section-3 img {
box-shadow: 10px 10px blue;
}
</style>上記がブロック内の「写真」に影を付けるCSSコードになります。取得したIDに対して頭に「#(半角)」を付けてIDを記述します。
こちらの記述で「id="section-3"」のブロックに対して、CSSを効かせることができます。
#section-3の後に記述している「 img」は、ブロック内の「写真」に対してCSSを効かせる指示になります。IDとimgの間には必ず半角スペースを空けてください。また、こちらの「 img」タグは下記で取得が可能です。
こちらが#section-3の中にある「 img」タグで、ブロック内にある「写真」が選択できます。
このように指定のブロックの中にある「写真」にCSSを効かせる際は、先ほどの「#section-3 img」コードを記述してください。
上記の方法で「 img」タグを取得して、ペライチの「HTML埋め込み（横幅フル）」にコーディングができましたら、下部の「保存」ボタンを押して完了です。
CSSコーディング後の結果
今回CSSで書いた「box-shadow: 10px 10px blue」のコードは、写真に対してブルーの「影（シャドー）」を装飾するCSSになります。
では、上記のCSSでどのように装飾されたかを見てみましょう。
指定したブロック内にある「写真」に対して、ブルーの「影」が装飾されました。
まとめ
このようにコーディングを使ってデザインを行うと、ブロック内の細かなデザインの変更ができますので、通常のペライチサイトよりデザイン性が高くなります。
巷に溢れる「ペライチ感」が出るサイトは、決められたブロックを決められた通りに使ってサイトを制作するので、どれも「似たり寄ったり」なサイトになってしまいます。
ですが、ペライチで「HTML/CSS/JavaScript」を使ってコーディングを行えば、一気に「ペライチ感」もなくなり高品質なサイトへと生まれ変わります。
ペライチでサイトを制作するなら、コーディングができる「レギュラープラン」以上をおすすめしております。是非あなたもペライチで、コーディングにチャレンジしてみてください。
「ペライチ」でサイトを作るなら、機能が豊富な「レギュラープラン」以上がおすすめです！
