ขนาดวิดีโอ: 1280 X 720853 X 480640 X 360
แสดงแผงควบคุมโปรแกรมเล่น
เล่นอัตโนมัติ
เล่นใหม่
【⬇STUDIOスクールを開校しました⬇】nocode-gym.com 💻NoCode GYM | 未経験からノーコードWEB制作で副業！4/6から開校！【⬇︎STUDIOテンプレート『BtoB Template』受取り⬇︎】s.lmes.jp/landing-qr/1661122121-W2mMyYEz?uLand=VRw9Fg✅ニュース/ブログ etc...✅イベント告知/管理✅資料配布/リード獲得✅レスポンシブ✅全40ページ🎁他所だと2万円相当のテンプレート今だけ無料配布しています！！💡ご質問は公式LINEへ⬇s.lmes.jp/landing-qr/1661122121-W2mMyYEz?uLand=VRw9Fg✅目次1-1. 00:04:28 WEBページのレイアウトを学ぼう00:05:06 1-1-1. 実際のサイトから学ぶレイアウト(段組み1-2. 00:06:00 ボックスを横に並べる方法を学ぼう00:06:50 1-2-1. STUDIOでボックスを作成する00:11:01 1-2-2. 直感的にボックスをドラッグ&ドロップで並べる00:14:39 1-2-3. グループとボックスを横に並べる00:17:25 1-2-4. ボックスに横幅を設定する00:21:38 1-2-5. 別のボックスを横に並べて練習する00:25:28 1-2-6. ボックスの並べる数を変更してみる00:28:03 1-2-7. ボックス3つを均等に並べてみる1-3. 00:29:30 ボックスを分割(追加)しレイアウトする00:30:00 1-3-1. STUDIOでボックスを準備する00:31:37 1-3-2. ボックの中にボックスを分割(追加)する00:33:31 1-3-3. 分割(追加)したボックスを横に並べる00:35:47 1-3-4. ボックスをさらに分割(追加)する1-4. 00:37:21 ボックスの横幅を指定しレイアウトする00:37:59 1-4-1. ボックスを6：4の比率で並べる00:40:42 1-4-2. ボックスの横幅が100%を超えた場合の対応を学ぼう00:44:28 1-4-3. ボックスの横幅を「%」以外で指定してみよう00:46:48 1-4-4. 片側のボックスサイズを固定する *誤 1-4-5と記載あり1-5. 00:49:07 応用編：逆向き矢印の使い方を学ぼう00:50:30 1-5-1. 文書と画像の並び順を理解する00:52:43 1-5-2. 右向きではなく左向き矢印で並べる00:54:10 1-5-3. PCとスマホで並び順を変更する1-6. 00:57:22 レスポンシブデザインを試してみよう00:57:58 1-6-1. パソコンで表示するレイアウトを作る01:01:54 1-6-2. PCレイアウトをスマホに対応させる01:07:34 1-6-3. タブレットにレイアウトを揃える①01:08:50 1-6-4. タブレットにレイアウトを揃える②01:11:20 1-6-5. 絶対配置で自由にレイアウトする2.ブログサイトに必要なパーツを準備しよう2-1. 01:14:40 テキストのサイズや色を設定し必要なパーツを作る01:15:12 2-1-1.STUDIOでページを追加する01:15:54 2-1-2.サイトで使用するカラー(色)を決める01:19:33 2-1-3.使用するフォントの種類を決める01:22:46 2-1-4.フォントサイズを決める01:28:50 2-1-5.レイアウトの大枠を設定する01:32:33 2-1-6.応用編：CMSで使用するリッチテキスト01:34:12 2-1-7.グローバルナビゲーションを作成する01:38:56 2-1-8.ナビゲーションの見た目を整える01:41:55 2-1-9.STUDIOのリスト化機能を学ぶ01:45:49 2-1-10.ギャップ機能で間隔を調整する01:47:44 2-1-11.テキストにリンクを設定する01:49:51 2-1-12.リンクにホバー設定をする01:52:02 2-1-13.ナビゲーションの見た目を整える01:55:04 2-1-14.ナビゲーションをスマホ最適化する2-2. 01:58:18 STUDIOで行うサイトの基本設定01:58:20 2-2-1.サイトの全体設定を行う02:02:25 2-2-2.パーツに応じて最適なタグを設定する02:04:31 2-2-3.応用編：CMSの機能をオンにしてみる3.ブログサイトをゼロから作成しよう3-1. 02:06:29 レイアウトの基本的な枠組みを作成する02:06:29 3-1-1.完成サイトを確認02:08:25 3-1-2.6つの作業工程を理解しよう02:09:43 3-1-3.大枠のレイアウトを組んでいく02:14:19 3-1-4.レスポンシブに対応する3-2. 02:16:01 レイアウトにコンテンツを追加する02:16:16 3-2-1.ヘッダーにロゴを追加する02:18:16 3-2-2.ナビゲーションを追加する02:22:29 3-2-3.ナビゲーションにスマホデザインを設定する02:23:26 3-2-4.記事のカテゴリーラベルを作る02:26:04 3-2-5.記事タイトルと日付を作る02:29:34 3-2-6.サムネイル画像を作る02:30:15 3-2-7.記事の概要文を作る02:31:13 3-2-8.H2見出しと本文を作る02:33:39 3-2-9.細かいレイアウト(余白)を調整する02:37:37 3-2-10.サイドバーで記事リストを作る①02:45:23 3-2-11.サイドバーで記事リストを作る②02:49:41 3-2-12.サイドバーで記事リストを作る③02:56:20 3-2-13.フッターにコピーライトを作る3-3. 02:58:25 横幅のレイアウトを調整しよう02:58:54 3-3-1.横幅の完成状態を確認しよう02:59:55 3-3-2.横幅を固定するためのボックスを作る03:01:42 3-3-3.インナーボックスの上下に余白を設定03:02:26 3-3-4.ヘッダーとフッターの横幅を固定する03:02:26 3-3-5.ナビゲーションにホバーを設定する03:06:50 3-3-6.サイドバーで(イン)ホバーを設定する03:09:27 3-3-7.STUDIOのインホバー機能を学ぼう3-4. 03:11:11 レスポンシブデザインを設定しよう03:11:28 3-4-1.現時点でのレスポンシブ状況を確認03:12:26 3-4-2.ブレイクポイントを追加してみよう03:13:53 3-4-3.タブレットのレスポンシブ対応①03:20:06 3-4-4.タブレットのレスポンシブ対応②03:23:21 3-4-5.スマホ(モバイル)のレスポンシブ対応03:27:43 3-4-6.スマホ(ミニ)のレスポンシブ対応03:33:13 3-4-7.レスポンシブ設定の確認方法3-5. 03:35:50 残りのパーツを追加しよう03:36:25 3-5-1.SNSボタンを作成しよう03:41:09 3-5-2.SNSボタンをレスポンシブ設定する03:43:34 3-5-3.SNSのシェア設定をする03:47:29 3-5-4.関連記事エリアを作成する03:51:54 3-5-5.関連記事をレスポンシブ設定する3-6. 03:53:58 イレギュラーな横幅を設定しよう03:54:01 3-6-1.グローバルナビゲーションの横幅を調整03:56:43 3-6-2.完成したページを再確認しよう
1.WEBページのレイアウトを学ぼう6:03 1-1ボックスを使った段組み7:04 1-2ボックスを横に並べる方法29:40 1-3ボックスの分割/追加しレイアウトする37:56 1-4ボックスの横幅を指定しレイアウトする50:30 1-5逆向き矢印の使い方57:59 1-6レスポンシブデザイン2.ブログサイトに必要な事前準備1:15:13 2-1テキストサイズや色の設定をし必要パーツを作る
助かります✨
非常に助かります。お陰様で、2年前に挫折したプロジェクトを再開することになりました。ご活躍を祈ります。
副業Webデザイナーです。普段はwordpressで作成していますが、Studioでの作成も多いみたいなのでちょうど今からStudio触り始めたから良い動画です
今からWeb制作始めようと思ってる者です。大学生です。お話聞かせていただけませんか？
とても参考になる動画でした…。いつもレスポンシブで乱れるので苦戦してました。ありがとうございます…、次の動画も期待してます。
ご視聴ありがとうございます。次回作そろそろ出ます。。
色々な勉強動画見てきましたが、初めて挫折せず見終わることができました！ただ作るだけじゃなく理屈と合わせて説明してくれるので深く理解でき、今後は自分で応用できそうです。素晴らしい動画を配信してくださり、ありがとうございます。
公式より分かりやすくて感謝です！毎日見てます♪ HP作成も見たいです！
本当ですか！とても嬉しいです✨
とってもわかりやすかったです。まだWEBサイトの勉強をし始めたばかりで同じものを作るのに3日かかりました・・・・これまでレスポンシブ設定を全て終わってから微調整していましたが、この動画を拝見してルール通りにやると簡単にできるのでとても勉強になりました。次の動画も楽しみにしています！
お疲れ様でした！嬉しいコメントありがとうございます✨また次回作にご期待ください。
すごく分かりやすかったです。ありがとうございました！！
めちゃめちゃわかりやすかったのでCMS編やってほしいです！！！
お待たせしました。そろそろ出ます。
この動画めちゃくちゃ良かったです！次のCMSの動画待ってます！
ありがとうございます😊CMS編乞うご期待ください！
@@Minato-h6h ご質問ありがとうございます！8月初旬に仕様変更があり、リスト化した要素(ul以下のli)を横並びにするには【ulをWクリック】すると、表示されていない矢印ボタンが表示されます！
細かく説明していただいているのでとても見やすく、勉強になります。皆様同様、ホバーのプレビューでの表示ができないところで止まってしまいました。教えてください！！よろしくお願いいたします。
LINEでご回答しております！ホバーのプレビューができない理由はホバーをつけた要素の上に表示される要素に背景色がついているためです(この場合liの中の要素に白背景色がついてる)。liにホバーをつけても、その上に重なるpに背景色がついているので、pの下では背景色が変わってますが、表面的にはそれが見えていないということです。
公式わかりづらすぎて使わないで3年経ったわ
デザインの大事なポイントをきちんと説明されている貴重な動画ですね！初心者にも分かるように説明されていてとても素晴らしいです！質問があるのですが、最近コメントに返信されておられないので、公式LINEに質問した方がよろしいでしょうか？
めちゃくちゃ分かりやすかったです！ありがとうございましたm(_ _)m
navのところにレイヤーであわせても矢印キーがでてきません。基本的な事をすみませんが教えてください。矢印キーと並び位置の箱がでてこないときの対処法が知りたいです。
ブルーのレイヤー/枠が表示されてる時はリスト化されているので、矢印が出にくいです。ブルーのレイヤーをWクリックしていると矢印を変更するボタンが出てきます。
これが無料はすげえ時代だ
動画を見て勉強させていただいています🙇♀️初歩的な質問ですみませんが、最初のテキストボックスやボックスのドラッグ&ドロップが効かず、全て手動で移動させています。おまけに、綺麗に揃えることも出来ていません。Box2を Box1の隣に置くときも自動的にグループ化されず手動でレイヤータブから移動させる必要があります。最初の最初で躓いてしまい、いろいろ調べているのですが原因がわからず…教えていただけますでしょうか。
次回の動画はいつ頃になりますかね？
リスト化したとき、右側に編集ボックスが出てこない。。。
@yoonyul0201さん、今のバージョンだとリスト化した後の編集ボックスは左側に出てきてますよ。僕も最初戸惑ったので一緒です😅
2:19:32のところで、2-1のnavをコピーし貼り付けたて青に変更するとギャップ作成するときにできる間のところに色がつきます。どうしたら直りますか？
要素と要素の間に隙間(ギャップ)ができる理由は、①要素の横幅に余白(外側/内側)ができて、要素間に隙間ができている(その隙間から下(親)のレイヤーにつけた背景色がチラ見しているなど) ②親Boxにギャップ機能を用いて子要素の間に意図的にギャップを作っている ③要素にborderをつけている いずれかの要因が考えられます。
質問があります。1-2-2のボックスを横並びで躓いているのですが、横並びにすると横並びにしたいペアが自動的にちっちゃくなり、動画のようになりません。なにか設定があるのでしょうか？
親ボックスの横幅がautoになっているからかと思います。100%に設定してみてください。
度々すみません。2:35:30あたりのarticleの高さ1000px→autoに変更した際、枠が少し小さくなりました。その後本文を増やすと増えた分上下に拡張してしまい、困っています。どうしたらいいでしょうか？
高さは絶対値で指定しない方がいいです。autoはarticleの中に含まれる要素の高さの合計値が自動で設定されます。つまりテキストの行数を増やしたらその分だけ高さが増えます。逆に高さを1000pxに固定すると中の要素の合計が1000pxを超えると枠をはみ出してレイアウト崩れが起きます。高さはautoに設定しましょう。
リストにURLを貼る欄は、右側に出ると開設で仰っていますが、レイヤーの上の方に出てきます。そしてリンクがうまく繋がらず、先に進めず。。。
そうなんです！仕様の変更で左パネルのレイヤー上に表示されるようになりました。リンクが繋がらない場合はURLタイプの入力列になっているか、そこからエディタ上に正しく紐付けられているか確認してください。分からない場合は概論欄のLINEから質問してください！詳細にご回答します。
1:16:00
なんかすごくわかりやすそうなので見始めた初心者です。最初にboxを４つ作りテキストをドラッグして貼り付けました。次にそれをダブルクリックしてbox１に名称を変更することができません。ダブルクリックしても何もかわらないのですが、やり方がなにかあるのですか？
何らかの原因で選択したいテキストを選択できていない状況ですね。考えられる原因としてはレイヤがー深くなっているとかでしょうか。選択できる状態まで何度もクリックしてテキストを選択できるか試してみてください。正しく選択できればテキストの入力モードになります。該当のテキストを正しく選択できているかどうかは、レイヤー機能を使えば確認もできます。詳細は以下のURLをご覧ください。help.studio.design/ja/articles/5838449-%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E3%83%91%E3%83%8D%E3%83%AB
また、1:55:50あたりで、モバイルでのリスポンス対応で「折返し」や「下向き」などのマークが出てきません。何か問題があるんでしょうかね？
エディタアップデートに伴う[リスト機能]の横並びについて以下の動画で詳しく解説しています！app.quden.io/videos?videoId=64d6ff20c737d600276c6a7c
@@SaaSpark様、を選択した状態でenterを押すと「並びの向き方」が表示されるようになりました。有益な動画に感謝しております。
背景ホバー何回設定してプレビュー見てもできません。どなたか理由教えてください😭文字だけはホバー出来ます。
①設定対象の要素が異なる(上に別レイヤーが重なってるため反映されて見えない) ②最初のアイテムだけに適用されている どちらかだとは思いますが、別の方で①が原因で反映されていない方がいました。より的確なアドバイスが必要な場合は概要欄のLINEから問い合わせしてください！プロジェクトに入らせていただきチェックします。
時間で何をしてるか分けてほしいです！
ご視聴ありがとうございます！概要欄かコメントに詳細なIndexが載せてあります。
@@SaaSpark 失礼いたしました。。リスト化とても便利ですね！リスト化したとき、１行に３項目並べたいのですが、縦にしか並んでくれません。どのように並ぶ方向を設定できますか？
@@915riri8リスト化してできるに対して(liの直上要素)に右矢印を設定すれば出来ますよ！
@@915riri8 リストの仕様が変更された様です。を選択して全体が青い状態になったらWクリックしてみてください。「→」が選択できるようになります。
@@SaaSpark ありがとうございます！！明日試してみます!
こんにちは最近studioの勉強をし始めました。分からないところがあるんですがリスト化した後、１つを操作すれば他も同じ様に変更するはずなのになりません。1番最初のやつを変更するとそれだけが単体で変更され、２つ目の方を変更すると全部が変更します。どうなってしまってるのでしょうか？何回もやり直ししてますが、同じ様になります。教えていただけたらありがたいです。
ご返信遅れました！可能性としてはリスト化のタイミングで、ulが2つ出来た可能性があります。レイヤーパネルをみてulの中にulができていないかを確認してください。もしくはリスト化のタイミングで、1つ目のliはそのままに、2番目以降がul>liのリストになっている可能性があります。いずれにせよレイヤーパネルを確認してください。分からない場合は概論欄のLINEから質問してください！詳細にご回答します。
質問ですが、2時間19分32秒の所で、navを青に変えようとしたら、行間の線しか青にならず、全体は白のままなのですが、どうすれば全体を青に変えられますか？
新しいバージョンと仕様がかなり変わってますかね？こういった動画ではつきものかと思いますが、対応する機能がどこにあるか探すのに時間がかかってしまって残念ですね…
エディタアップデートに伴う[リスト機能]の横並びについて以下の動画で詳しく解説しています。リクエストいただければ現状verの扱い方も解説いたしますね。app.quden.io/videos?videoId=64d6ff20c737d600276c6a7c
あと、ホバーの設定ができるのに反映されません。見ていただきたいのですが、可能でしょうか？
どちらも対応可能なので、公式LINEからご連絡ください！
こんにちは、ライブプレビューの時に、タブレットやスマホの画面を見るには、どういった操作をすればいいですか？
各デバイスからライブプレビュー用のURLにアクセスするか、ブラウザの開発コンソールを利用して表示を変更してみてください！
ありがとうございます！出来ました！
「リンクにホバー設定をする」について、その設定が出来ません。私のパソコンはWindows11なんですけど、何か問題があるんでしょうかね。
いえ、Windows11かどうかでホバー設定の可否が変わるということは考え難いです。ホバーは設定できるが反映されない、ホバーを設定するボタンが押せない、どちらになるでしょうか？
ありがとうございます。「ホバーは設定できるが反映されない」です。何故でしょうか？
@@今野靖 実際に画像や挙動を見てみないとわからない点もあるので、概要欄の公式LINEでご連絡いただけますでしょうか？作業プロジェクトを直接確認できれば具体的なアドバイス可能です！
立て続けにすみません。同じところでパディングを10と15に設定する際に、数字を一桁しか入力できません。どのようにしたらいいですか？
正しく数字を入力できていない、入力してもEnterボタンなどを押せていない可能性があります。半角数字での入力、Enterキーもしくはテンキー矢印キーの上下で数字を変動させてみてください。
URLリンクがうまくいきません。。。
詳細な質問回答はLINEでやってますのでぜひ！
21:42
初めまして。有意義なわかりやすい動画ありがとうございます。動画を拝見しながら同じものを作って学習しているのですが、1時間58分38秒の辺りでやっているレスポンシブデザインの為にリストを横並びにするところで、横並びにするための矢印が出ません。グループ化、リンク指定、ホバー時の色付けまでは出来たのですが、全く同じ手順で進めていて矢印が出ないのは何かミスが原因でしょうか？仕様的な変更があったのでしょうか？お答えいただけたら幸いです。次の動画も楽しみにしています！
再生時間の正確な所をいただけますか？直近同じような報告を受けているので仕様変更箇所について仰られている可能性が高いです。8月初旬に仕様変更があり、リスト化した要素(ul以下のli)を横並びにするには【ulをWクリック】すると、表示されていない矢印ボタンが表示されます！
お返事ありがとうございます🙇♂️すみません💦見ながら時間の記入したはずがすごくズレてました💦1時間52分03秒（2-1-13）でやっている部分でした。やはり仕様変更があったんですね！今すぐに立ち上げられる状態では無いので確認はできませんが、お返事の内容的にそこの部分だと思いますので帰宅次第試してみます！ご丁寧なお返事ありがとうございます🙇♂️
@@れいにー-o2v ぜひ試してみてください！まだ質問も多くないので今なら答え放題です✨なんでも聞いてください！
ご丁寧にありがとうございます！その後問題なく出来ました！！もう少しで終わりそうなので参考にさせていただきながら学習させていただきます！
とても分かりやすい動画ありがとうございます！1:57:34のスマホのメニュー内枠線につきまして、全てに枠線をつけると重なる部分が2pxになり表示されます。ここはどのように解消されたのでしょうか？cssでいいますとborder-collapse: separate;が初期設定なのか、枠線が一部太くなります。
【途中から】
コメント失礼します。概要欄にLINEが見当たらないのですが、(TikTok、Twitter、Instagramはありました)どこに記載されているのでしょうか？
【⬇STUDIOスクールを開校しました⬇】
nocode-gym.com
💻NoCode GYM | 未経験からノーコードWEB制作で副業！4/6から開校！
【⬇︎STUDIOテンプレート『BtoB Template』受取り⬇︎】
s.lmes.jp/landing-qr/1661122121-W2mMyYEz?uLand=VRw9Fg
✅ニュース/ブログ etc...
✅イベント告知/管理
✅資料配布/リード獲得
✅レスポンシブ
✅全40ページ
🎁他所だと2万円相当のテンプレート
今だけ無料配布しています！！
💡ご質問は公式LINEへ⬇
s.lmes.jp/landing-qr/1661122121-W2mMyYEz?uLand=VRw9Fg
✅目次
1-1. 00:04:28 WEBページのレイアウトを学ぼう
00:05:06 1-1-1. 実際のサイトから学ぶレイアウト(段組み
1-2. 00:06:00 ボックスを横に並べる方法を学ぼう
00:06:50 1-2-1. STUDIOでボックスを作成する
00:11:01 1-2-2. 直感的にボックスをドラッグ&ドロップで並べる
00:14:39 1-2-3. グループとボックスを横に並べる
00:17:25 1-2-4. ボックスに横幅を設定する
00:21:38 1-2-5. 別のボックスを横に並べて練習する
00:25:28 1-2-6. ボックスの並べる数を変更してみる
00:28:03 1-2-7. ボックス3つを均等に並べてみる
1-3. 00:29:30 ボックスを分割(追加)しレイアウトする
00:30:00 1-3-1. STUDIOでボックスを準備する
00:31:37 1-3-2. ボックの中にボックスを分割(追加)する
00:33:31 1-3-3. 分割(追加)したボックスを横に並べる
00:35:47 1-3-4. ボックスをさらに分割(追加)する
1-4. 00:37:21 ボックスの横幅を指定しレイアウトする
00:37:59 1-4-1. ボックスを6：4の比率で並べる
00:40:42 1-4-2. ボックスの横幅が100%を超えた場合の対応を学ぼう
00:44:28 1-4-3. ボックスの横幅を「%」以外で指定してみよう
00:46:48 1-4-4. 片側のボックスサイズを固定する *誤 1-4-5と記載あり
1-5. 00:49:07 応用編：逆向き矢印の使い方を学ぼう
00:50:30 1-5-1. 文書と画像の並び順を理解する
00:52:43 1-5-2. 右向きではなく左向き矢印で並べる
00:54:10 1-5-3. PCとスマホで並び順を変更する
1-6. 00:57:22 レスポンシブデザインを試してみよう
00:57:58 1-6-1. パソコンで表示するレイアウトを作る
01:01:54 1-6-2. PCレイアウトをスマホに対応させる
01:07:34 1-6-3. タブレットにレイアウトを揃える①
01:08:50 1-6-4. タブレットにレイアウトを揃える②
01:11:20 1-6-5. 絶対配置で自由にレイアウトする
2.ブログサイトに必要なパーツを準備しよう
2-1. 01:14:40 テキストのサイズや色を設定し必要なパーツを作る
01:15:12 2-1-1.STUDIOでページを追加する
01:15:54 2-1-2.サイトで使用するカラー(色)を決める
01:19:33 2-1-3.使用するフォントの種類を決める
01:22:46 2-1-4.フォントサイズを決める
01:28:50 2-1-5.レイアウトの大枠を設定する
01:32:33 2-1-6.応用編：CMSで使用するリッチテキスト
01:34:12 2-1-7.グローバルナビゲーションを作成する
01:38:56 2-1-8.ナビゲーションの見た目を整える
01:41:55 2-1-9.STUDIOのリスト化機能を学ぶ
01:45:49 2-1-10.ギャップ機能で間隔を調整する
01:47:44 2-1-11.テキストにリンクを設定する
01:49:51 2-1-12.リンクにホバー設定をする
01:52:02 2-1-13.ナビゲーションの見た目を整える
01:55:04 2-1-14.ナビゲーションをスマホ最適化する
2-2. 01:58:18 STUDIOで行うサイトの基本設定
01:58:20 2-2-1.サイトの全体設定を行う
02:02:25 2-2-2.パーツに応じて最適なタグを設定する
02:04:31 2-2-3.応用編：CMSの機能をオンにしてみる
3.ブログサイトをゼロから作成しよう
3-1. 02:06:29 レイアウトの基本的な枠組みを作成する
02:06:29 3-1-1.完成サイトを確認
02:08:25 3-1-2.6つの作業工程を理解しよう
02:09:43 3-1-3.大枠のレイアウトを組んでいく
02:14:19 3-1-4.レスポンシブに対応する
3-2. 02:16:01 レイアウトにコンテンツを追加する
02:16:16 3-2-1.ヘッダーにロゴを追加する
02:18:16 3-2-2.ナビゲーションを追加する
02:22:29 3-2-3.ナビゲーションにスマホデザインを設定する
02:23:26 3-2-4.記事のカテゴリーラベルを作る
02:26:04 3-2-5.記事タイトルと日付を作る
02:29:34 3-2-6.サムネイル画像を作る
02:30:15 3-2-7.記事の概要文を作る
02:31:13 3-2-8.H2見出しと本文を作る
02:33:39 3-2-9.細かいレイアウト(余白)を調整する
02:37:37 3-2-10.サイドバーで記事リストを作る①
02:45:23 3-2-11.サイドバーで記事リストを作る②
02:49:41 3-2-12.サイドバーで記事リストを作る③
02:56:20 3-2-13.フッターにコピーライトを作る
3-3. 02:58:25 横幅のレイアウトを調整しよう
02:58:54 3-3-1.横幅の完成状態を確認しよう
02:59:55 3-3-2.横幅を固定するためのボックスを作る
03:01:42 3-3-3.インナーボックスの上下に余白を設定
03:02:26 3-3-4.ヘッダーとフッターの横幅を固定する
03:02:26 3-3-5.ナビゲーションにホバーを設定する
03:06:50 3-3-6.サイドバーで(イン)ホバーを設定する
03:09:27 3-3-7.STUDIOのインホバー機能を学ぼう
3-4. 03:11:11 レスポンシブデザインを設定しよう
03:11:28 3-4-1.現時点でのレスポンシブ状況を確認
03:12:26 3-4-2.ブレイクポイントを追加してみよう
03:13:53 3-4-3.タブレットのレスポンシブ対応①
03:20:06 3-4-4.タブレットのレスポンシブ対応②
03:23:21 3-4-5.スマホ(モバイル)のレスポンシブ対応
03:27:43 3-4-6.スマホ(ミニ)のレスポンシブ対応
03:33:13 3-4-7.レスポンシブ設定の確認方法
3-5. 03:35:50 残りのパーツを追加しよう
03:36:25 3-5-1.SNSボタンを作成しよう
03:41:09 3-5-2.SNSボタンをレスポンシブ設定する
03:43:34 3-5-3.SNSのシェア設定をする
03:47:29 3-5-4.関連記事エリアを作成する
03:51:54 3-5-5.関連記事をレスポンシブ設定する
3-6. 03:53:58 イレギュラーな横幅を設定しよう
03:54:01 3-6-1.グローバルナビゲーションの横幅を調整
03:56:43 3-6-2.完成したページを再確認しよう
1.WEBページのレイアウトを学ぼう
6:03 1-1ボックスを使った段組み
7:04 1-2ボックスを横に並べる方法
29:40 1-3ボックスの分割/追加しレイアウトする
37:56 1-4ボックスの横幅を指定しレイアウトする
50:30 1-5逆向き矢印の使い方
57:59 1-6レスポンシブデザイン
2.ブログサイトに必要な事前準備
1:15:13 2-1テキストサイズや色の設定をし必要パーツを作る
助かります✨
非常に助かります。お陰様で、2年前に挫折したプロジェクトを再開することになりました。ご活躍を祈ります。
副業Webデザイナーです。普段はwordpressで作成していますが、Studioでの作成も多いみたいなのでちょうど今からStudio触り始めたから良い動画です
今からWeb制作始めようと思ってる者です。大学生です。お話聞かせていただけませんか？
とても参考になる動画でした…。
いつもレスポンシブで乱れるので苦戦してました。
ありがとうございます…、次の動画も期待してます。
ご視聴ありがとうございます。次回作そろそろ出ます。。
色々な勉強動画見てきましたが、初めて挫折せず見終わることができました！
ただ作るだけじゃなく理屈と合わせて説明してくれるので深く理解でき、今後は自分で応用できそうです。
素晴らしい動画を配信してくださり、ありがとうございます。
公式より分かりやすくて感謝です！毎日見てます♪ HP作成も見たいです！
本当ですか！とても嬉しいです✨
とってもわかりやすかったです。
まだWEBサイトの勉強をし始めたばかりで同じものを作るのに3日かかりました・・・・
これまでレスポンシブ設定を全て終わってから微調整していましたが、
この動画を拝見してルール通りにやると簡単にできるのでとても勉強になりました。
次の動画も楽しみにしています！
お疲れ様でした！嬉しいコメントありがとうございます✨また次回作にご期待ください。
すごく分かりやすかったです。ありがとうございました！！
めちゃめちゃわかりやすかったのでCMS編やってほしいです！！！
お待たせしました。そろそろ出ます。
この動画めちゃくちゃ良かったです！次のCMSの動画待ってます！
ありがとうございます😊CMS編乞うご期待ください！
@@Minato-h6h ご質問ありがとうございます！8月初旬に仕様変更があり、リスト化した要素(ul以下のli)を横並びにするには【ulをWクリック】すると、表示されていない矢印ボタンが表示されます！
細かく説明していただいているのでとても見やすく、勉強になります。皆様同様、ホバーのプレビューでの表示ができないところで止まってしまいました。
教えてください！！よろしくお願いいたします。
LINEでご回答しております！ホバーのプレビューができない理由はホバーをつけた要素の上に表示される要素に背景色がついているためです(この場合liの中の要素に白背景色がついてる)。liにホバーをつけても、その上に重なるpに背景色がついているので、pの下では背景色が変わってますが、表面的にはそれが見えていないということです。
公式わかりづらすぎて使わないで3年経ったわ
デザインの大事なポイントをきちんと説明されている貴重な動画ですね！初心者にも分かるように説明されていてとても素晴らしいです！
質問があるのですが、最近コメントに返信されておられないので、公式LINEに質問した方がよろしいでしょうか？
めちゃくちゃ分かりやすかったです！
ありがとうございましたm(_ _)m
navのところにレイヤーであわせても矢印キーがでてきません。基本的な事をすみませんが教えてください。矢印キーと並び位置の箱がでてこないときの対処法が知りたいです。
ブルーのレイヤー/枠が表示されてる時はリスト化されているので、矢印が出にくいです。ブルーのレイヤーをWクリックしていると矢印を変更するボタンが出てきます。
これが無料はすげえ時代だ
動画を見て勉強させていただいています🙇♀️
初歩的な質問ですみませんが、最初のテキストボックスやボックスのドラッグ&ドロップが効かず、全て手動で移動させています。おまけに、綺麗に揃えることも出来ていません。
Box2を Box1の隣に置くときも自動的にグループ化されず手動でレイヤータブから移動させる必要があります。
最初の最初で躓いてしまい、いろいろ調べているのですが原因がわからず…教えていただけますでしょうか。
次回の動画はいつ頃になりますかね？
リスト化したとき、右側に編集ボックスが出てこない。。。
@yoonyul0201さん、今のバージョンだとリスト化した後の編集ボックスは左側に出てきてますよ。
僕も最初戸惑ったので一緒です😅
2:19:32のところで、2-1のnavをコピーし貼り付けたて青に変更するとギャップ作成するときにできる間のところに色がつきます。どうしたら直りますか？
要素と要素の間に隙間(ギャップ)ができる理由は、①要素の横幅に余白(外側/内側)ができて、要素間に隙間ができている(その隙間から下(親)のレイヤーにつけた背景色がチラ見しているなど) ②親Boxにギャップ機能を用いて子要素の間に意図的にギャップを作っている ③要素にborderをつけている いずれかの要因が考えられます。
質問があります。1-2-2のボックスを横並びで躓いているのですが、横並びにすると横並びにしたいペアが自動的にちっちゃくなり、動画のようになりません。なにか設定があるのでしょうか？
親ボックスの横幅がautoになっているからかと思います。100%に設定してみてください。
度々すみません。
2:35:30あたりの
articleの高さ1000px→autoに変更した際、枠が少し小さくなりました。
その後本文を増やすと増えた分上下に拡張してしまい、困っています。
どうしたらいいでしょうか？
高さは絶対値で指定しない方がいいです。autoはarticleの中に含まれる要素の高さの合計値が自動で設定されます。つまりテキストの行数を増やしたらその分だけ高さが増えます。逆に高さを1000pxに固定すると中の要素の合計が1000pxを超えると枠をはみ出してレイアウト崩れが起きます。高さはautoに設定しましょう。
リストにURLを貼る欄は、右側に出ると開設で仰っていますが、レイヤーの上の方に出てきます。そしてリンクがうまく繋がらず、先に進めず。。。
そうなんです！仕様の変更で左パネルのレイヤー上に表示されるようになりました。リンクが繋がらない場合はURLタイプの入力列になっているか、そこからエディタ上に正しく紐付けられているか確認してください。分からない場合は概論欄のLINEから質問してください！詳細にご回答します。
1:16:00
なんかすごくわかりやすそうなので見始めた初心者です。最初にboxを４つ作りテキストをドラッグして貼り付けました。次にそれをダブルクリックしてbox１に名称を変更することができません。ダブルクリックしても何もかわらないのですが、やり方がなにかあるのですか？
何らかの原因で選択したいテキストを選択できていない状況ですね。考えられる原因としてはレイヤがー深くなっているとかでしょうか。選択できる状態まで何度もクリックしてテキストを選択できるか試してみてください。正しく選択できればテキストの入力モードになります。
該当のテキストを正しく選択できているかどうかは、レイヤー機能を使えば確認もできます。詳細は以下のURLをご覧ください。
help.studio.design/ja/articles/5838449-%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E3%83%91%E3%83%8D%E3%83%AB
また、1:55:50あたりで、モバイルでのリスポンス対応で「折返し」や「下向き」などのマークが出てきません。何か問題があるんでしょうかね？
エディタアップデートに伴う[リスト機能]の横並びについて以下の動画で詳しく解説しています！
app.quden.io/videos?videoId=64d6ff20c737d600276c6a7c
@@SaaSpark様、を選択した状態でenterを押すと「並びの向き方」が表示されるようになりました。有益な動画に感謝しております。
背景ホバー何回設定してプレビュー見てもできません。どなたか理由教えてください😭文字だけはホバー出来ます。
①設定対象の要素が異なる(上に別レイヤーが重なってるため反映されて見えない) ②最初のアイテムだけに適用されている どちらかだとは思いますが、別の方で①が原因で反映されていない方がいました。より的確なアドバイスが必要な場合は概要欄のLINEから問い合わせしてください！プロジェクトに入らせていただきチェックします。
時間で何をしてるか分けてほしいです！
ご視聴ありがとうございます！概要欄かコメントに詳細なIndexが載せてあります。
@@SaaSpark 失礼いたしました。。リスト化とても便利ですね！
リスト化したとき、１行に３項目並べたいのですが、縦にしか並んでくれません。どのように並ぶ方向を設定できますか？
@@915riri8リスト化してできるに対して(liの直上要素)に右矢印を設定すれば出来ますよ！
@@915riri8 リストの仕様が変更された様です。を選択して全体が青い状態になったらWクリックしてみてください。「→」が選択できるようになります。
@@SaaSpark ありがとうございます！！明日試してみます!
こんにちは
最近studioの勉強をし始めました。
分からないところがあるんですが
リスト化した後、１つを操作すれば他も同じ様に変更するはずなのになりません。
1番最初のやつを変更するとそれだけが単体で変更され、２つ目の方を変更すると全部が変更します。
どうなってしまってるのでしょうか？
何回もやり直ししてますが、同じ様になります。
教えていただけたらありがたいです。
ご返信遅れました！可能性としてはリスト化のタイミングで、ulが2つ出来た可能性があります。レイヤーパネルをみてulの中にulができていないかを確認してください。
もしくはリスト化のタイミングで、1つ目のliはそのままに、2番目以降がul>liのリストになっている可能性があります。いずれにせよレイヤーパネルを確認してください。分からない場合は概論欄のLINEから質問してください！詳細にご回答します。
質問ですが、2時間19分32秒の所で、navを青に変えようとしたら、行間の線しか青にならず、全体は白のままなのですが、どうすれば全体を青に変えられますか？
①設定対象の要素が異なる(上に別レイヤーが重なってるため反映されて見えない) ②最初のアイテムだけに適用されている どちらかだとは思いますが、別の方で①が原因で反映されていない方がいました。より的確なアドバイスが必要な場合は概要欄のLINEから問い合わせしてください！プロジェクトに入らせていただきチェックします。
新しいバージョンと仕様がかなり変わってますかね？こういった動画ではつきものかと思いますが、対応する機能がどこにあるか探すのに時間がかかってしまって残念ですね…
エディタアップデートに伴う[リスト機能]の横並びについて以下の動画で詳しく解説しています。リクエストいただければ現状verの扱い方も解説いたしますね。
app.quden.io/videos?videoId=64d6ff20c737d600276c6a7c
あと、ホバーの設定ができるのに反映されません。見ていただきたいのですが、可能でしょうか？
どちらも対応可能なので、公式LINEからご連絡ください！
こんにちは、ライブプレビューの時に、タブレットやスマホの画面を見るには、どういった操作をすればいいですか？
各デバイスからライブプレビュー用のURLにアクセスするか、ブラウザの開発コンソールを利用して表示を変更してみてください！
ありがとうございます！出来ました！
「リンクにホバー設定をする」について、その設定が出来ません。私のパソコンはWindows11なんですけど、何か問題があるんでしょうかね。
いえ、Windows11かどうかでホバー設定の可否が変わるということは考え難いです。ホバーは設定できるが反映されない、ホバーを設定するボタンが押せない、どちらになるでしょうか？
ありがとうございます。「ホバーは設定できるが反映されない」です。何故でしょうか？
@@今野靖 実際に画像や挙動を見てみないとわからない点もあるので、概要欄の公式LINEでご連絡いただけますでしょうか？作業プロジェクトを直接確認できれば具体的なアドバイス可能です！
立て続けにすみません。同じところでパディングを10と15に設定する際に、数字を一桁しか入力できません。どのようにしたらいいですか？
正しく数字を入力できていない、入力してもEnterボタンなどを押せていない可能性があります。半角数字での入力、Enterキーもしくはテンキー矢印キーの上下で数字を変動させてみてください。
URLリンクがうまくいきません。。。
詳細な質問回答はLINEでやってますのでぜひ！
21:42
初めまして。
有意義なわかりやすい動画ありがとうございます。
動画を拝見しながら同じものを作って学習しているのですが、1時間58分38秒の辺りでやっているレスポンシブデザインの為にリストを横並びにするところで、横並びにするための矢印が出ません。
グループ化、リンク指定、ホバー時の色付けまでは出来たのですが、全く同じ手順で進めていて矢印が出ないのは何かミスが原因でしょうか？
仕様的な変更があったのでしょうか？
お答えいただけたら幸いです。
次の動画も楽しみにしています！
再生時間の正確な所をいただけますか？直近同じような報告を受けているので仕様変更箇所について仰られている可能性が高いです。
8月初旬に仕様変更があり、リスト化した要素(ul以下のli)を横並びにするには【ulをWクリック】すると、表示されていない矢印ボタンが表示されます！
お返事ありがとうございます🙇♂️
すみません💦
見ながら時間の記入したはずがすごくズレてました💦
1時間52分03秒（2-1-13）でやっている部分でした。
やはり仕様変更があったんですね！
今すぐに立ち上げられる状態では無いので確認はできませんが、お返事の内容的にそこの部分だと思いますので帰宅次第試してみます！
ご丁寧なお返事ありがとうございます🙇♂️
@@れいにー-o2v ぜひ試してみてください！まだ質問も多くないので今なら答え放題です✨なんでも聞いてください！
エディタアップデートに伴う[リスト機能]の横並びについて以下の動画で詳しく解説しています！
app.quden.io/videos?videoId=64d6ff20c737d600276c6a7c
ご丁寧にありがとうございます！
その後問題なく出来ました！！
もう少しで終わりそうなので参考にさせていただきながら学習させていただきます！
とても分かりやすい動画ありがとうございます！
1:57:34のスマホのメニュー内枠線につきまして、
全てに枠線をつけると重なる部分が2pxになり表示されます。
ここはどのように解消されたのでしょうか？
cssでいいますとborder-collapse: separate;が初期設定なのか、枠線が一部太くなります。
【途中から】
コメント失礼します。
概要欄にLINEが見当たらないのですが、(TikTok、Twitter、Instagramはありました)どこに記載されているのでしょうか？