婚活LABより、ブライダルネットの期間限定クーポン配布中!!

第3回「Hadron」WEBサイト作成講座ーエディタ画面のチュートリアル

第3回「Hadron」WEBサイト作成講座ーエディタ画面のチュートリアル

前回までに、Hadronにてプロジェクトの新規作成、中断、再開方法を学びました。今回はチュートリアル(Help tour)に沿ってHadronのエディタ画面について解説します。Hadronのヘルプツアーは日本語に翻訳されていない為、当ページで翻訳を交えながら解説します。

HadronのHelp Tourの開始

前回までに作成した「Sample」プロジェクトから「File Explorer」をクリックします。その後「index.html」を選択してください。

Hadronでは親切に「チュートリアルを開始しますか?」というようなポップアップウインドウなどは立ち上がりません。この辺り今後は親切なチュートリアル画面が欲しいと思います。

hadronのファイルエクスプローラー
※①「File Explorer」>>②「index.html」の順に選択。

次に「Edition」をクリックし編集画面に移動し、Element横の赤い丸のボタン(Tips)をクリックしてみましょう。Help Tourが開始されました。英語に堪能な方は順次「GOt it」をクリックしていけばTipsボタンが移動していくのでHadronサイト内で使用方法を学ぶことが出来ます。当サイトではわかりやすく日本語訳しながら解説していきます。

hadronのチュートリアルの開始
※上記画像②の赤丸をクリックするとTipsが確認できる。

Help Tourの再開方法

もし、読み飛ばしてしまったHelp Tourを再度確認したい場合は、左側のメニューから「」をクリックし「Help」から「Restart Help Tour」を選択します。

Hadronチュートリアルの再開

Hadronエディタ画面の各項目解説

Help Tourに沿ってわかりやすく日本語訳をしながらエディタ画面の各項目を解説していきます。

Element

HTML要素のツリー構造で表示したパネルです。

この項目では実際にWEBサイト上に表示されるbody要素以下の階層の要素が表示されています。meta要素などのhead要素内に書かれる要素はこの画面では確認が出来ません。

ここで要素を選択することで要素の追加、削除、並べ替え、コピー&ペーストなどが行えます。

要素を作成するには、この項目の上部の「」ボタンをクリックするかElementツリーパネルを右クリックして作成します。

もしくはElementパネルの下部の「Selection HTML」に直接記述することも可能です。

hadron要素の追加方法※上記の画像の「!」部のパネル「Selection HTML」に直接コードを記述することも可能。

Elementとは・・・

HTMLではElementはHTML要素の事を表します。<body>や<div>など<>で囲まれた要素を英語ではElementといいます。

Selection CSS

定義する(されている)CSSスタイルのパネルです。

このパネルではElementパネルにて選択されている要素に一致するルールが表示されています。特定のビューポート(幅や高さ)にのみ適用されるルールであるメディアクエリを含む任意のCSSルールを作成することが出来ます。

hadron CSSの編集画面
※上記の画像の「!」部をクリックしメディアクエリを使用したCSSの記述もこのパネルより可能。

Selection HTML

HTML文書の編集画面です。Elementパネルにて選択されているHTML文書が表示されています。選択がない場合はbody要素以下のHTML文書が表示されています。

hadron HTML編集画面
※Elementパネルにてheader要素が選択されている為Selection HTMLパネルにはheader要素以下のHTML文書が表示されている。

レイアウトツール

このツールを使用すると、コードを使って設計する際の最大の障害の1つのレイアウトをすばやく作成および変更することができます。

これにより、「Flexbox」と「CSSグリッドレイアウト」を使用してレイアウトを構成することができます。

変更は、選択したCSSルール([Selection CSS]パネル上)に適用されます。このツールを使用している間は、青で強調表示されたルールが表示されます。

hadron flexbox とgridレイアウト

変更を通知する。

すべてのプロジェクトファイルは、ローカルブラウザストレージに保存されます。このメニューを使用して、変更をクラウドに通知します。

このメニューからファイルを同期させることで、多くの人が同じプロジェクトで共同作業を行い、バージョンを正しく識別して保存/復元できます(現在2018年8月では、このすべてが実装されているわけではありません)。

hadron変更を通知
※左メニューのSouce Controlボタンから共同作業者に変更の通知が行えるが現在すべての機能が実装されているわけではない。

今回は簡単にHadronのHelp TourにそってHadronの簡単な編集画面の解説をしました。次回はブランクのプロジェクトを作成しサンプルWEBサイトの作成を進めます。

グループサイト。婚活LABより!婚活無料診断実施中!

CTA-IMAGE 簡単な質問に答えるだけですあなたに最適な婚活タイプが丸わかり!