カピバラサウンド | Capybara-Sound

カピバラサウンドとは？

カピバラサウンドは『これだけで基本がしっかり身につく HTML/CSS＆Webデザイン1冊目の本』について著者自身が補足解説などをする音声配信です。

この取り組みをする理由としては以下の通りです。

・書籍の諸々の制限によりお話できなかったあれこれを載せたい
・書籍を読んだ方からよく頂く「つまづきポイント」や質問について解説したい

また、一人で書籍での学習をしていると孤独を感じやすいものと思います。

音声を聞きながら学習をすることで講師が横にいて教えてくれているような雰囲気を作り出せたらなと思い、そしてそれが挫折を防ぐための助けになったらと考え音声を用意しました。

※書籍の補助教材のような立ち位置のため音声のみでの学習はできません。

↓音声でもカピバラサウンドについて説明しております。

カピバラサウンドについて2023/12/1

音声の内容についての注意事項

・書籍の補助教材のような立ち位置のため音声のみでの学習はできません。
・現状では書籍の内容に沿って簡単な解説や補足などを入れている音声となっていて、応用や発展技術の深堀りをしているものではございません。
・ポッドキャストのような定期的な配信ではなく用意された音声をいつでも聴けるサービスとなります。

かならずこれらの音声の内容についてをご理解いただいたうえで課金登録をするようにお願いいたします。ご期待の内容と音声の内容に齟齬がございましても返金などの対応は致し兼ねますのでご注意くださいませ。

利用料金について

書籍の内容を話していることもあり、有料での提供となります。

利用料金はサブスクリプション制で 月額550円(税込) （コーヒー1杯分程度）となります。（2024年05月03日現在）

無料サンプル

はじめに・本書の読み方P1～10
学習の流れと作るデザインP11～15
データと特典P16～19
WEBサイトとは？P20～25
ブラウザとエディタP26～30
拡張子とdifffP31～33
はじめてのファイル作成と保存P34～35

配信済み音声

-1章-

【P1～10】はじめに・本書の読み方 [5分6秒]
【P11～15】学習の流れと作るデザイン [3分48秒]
【P16～19】データと特典 [10分51秒]
【P20～25】WEBサイトとは？ [5分20秒]
【P26～30】ブラウザとエディタ [9分54秒]
【P31～33】拡張子とdifff [12分0秒]
【P34～35】はじめてのファイル作成と保存 [6分41秒]

-2章-

【P36～37】マークアップの意味と重要性 [5分43秒]
【P38～41】情報整理のワーク [8分31秒]
【P42～45】HTMLの基本とお決まりセット [11分8秒]
【P46～48】見出し（h1・h2・h3）のマークアップ [12分44秒]
【P49～53】主要タグのマークアップ [13分21秒]
【P54～56】画像とパスについて [17分31秒]
【P57～59】em・table・address [10分30秒]
【P60～61】インデント・改行・コメントアウト [6分40秒]

-3章-

【P62～65】第2部の導入 [3分31秒]
【P66～67】CSSの基本 [7分26秒]
【P68～69】デベロッパーツール [5分43秒]
【P70～73】CSSファイルをHTMLファイルに読みこむ [15分39秒]
【P74～75】デフォルトCSSとリセットCSS [11分5秒]
【P76～77】ボックスモデルについて [9分57秒]

-4章-

【P78～79】background-colorと色 [6分26秒]
【P80～81】font-familyとfont-size [8分15秒]
【P82～83】border [8分1秒]
【P84～85】paddingとmargin [10分58秒]
【P86～88】ブロックボックスとインラインボックスの中央寄せ [12分38秒]
【P89～93】単位とコーディングの進め方 [19分18秒]

-5章-

【P94～97】第3部の導入 [5分4秒]
【P98～99】ヘッダーやフッターなどの名称について [11分28秒]
【P100～104】HTMLのセルフワークとエリアを区切るタグ [10分57秒]
【P105～107】セクションとアウトライン [10分8秒]
【P108～111】time・figure・small [17分29秒]

-6章-

【P112～115】フレックスボックスについて [14分49秒]
【P116～118】background-image [16分17秒]
【P118～121】子孫セレクタとその他のセレクタ [14分43秒]
【P122～124】横並びとdivとspan [14分17秒]
【P125～128】classセレクタについて [19分23秒]
【P129～131】セレクタの書き方について [12分37秒]
【P132～135】display:inline-block;について [15分19秒]
【P135～137】background-repeat・background-position [5分46秒]
【P137～139】CSSのプロパティを書く順番 [14分44秒]

-7章-

【P140～143】第4部の導入 [5分50秒]
【P144～146】セルフワークとページ内リンク [10分21秒]
【P147～153】フォームのマークアップ [17分56秒]

-8章-

【P154～155】CSSを書いて行く手順 [9分14秒]
【P156～158】webフォントについて [15分39秒]
【P159～161】レイアウトに関するCSSとletter-spacing [13分48秒]
【P162～164】backgroundプロパティとbackground-size [11分55秒]
【P165～170】positionプロパティについて [22分38秒]
【P171～173】CSSの優先順位（詳細度）とmarginの相殺 [11分40秒]
【P173～174】contentoと疑似要素（::before/::after） [9分11秒]
【P175～178】flexでレイアウトを組む [21分29秒]
【P179～183】属性セレクタとvertical-align [18分17秒]
【P184～185】パララックス効果 [8分50秒]

-9章-

【P186～188】トランジションアニメーション [14分45秒]
【P189～191】キーフレームアニメーション [13分6秒]

-10章-

【P192～193】レスポンシブウェブデザインの基本 [8分35秒]
【P194～197】viewport・ブレイクポイント・メディアクエリ [13分8秒]
【P197～198】デベロッパーツールでスマホの見え方を確認 [5分9秒]
【P199～201】スマホのサイズに要素を収める方法 [10分0秒]
【P202～205】viewportを基準とする単位（vh・vw） [17分27秒]
【P206～207】高解像度ディスプレイについて [11分26秒]

-11章-

【P208～211】第5部の導入 [6分26秒]
【P212～214】Webサイト制作の流れ [14分51秒]
【P215～219】Webデザインの基本 [18分4秒]

-12章-

【P220～221】複数ページを作るときのポイントとファイル構成 [10分35秒]
【P222～224】font-familyの優先順位 [11分1秒]
【P225～227】max-widthとベクター画像（svg画像） [11分52秒]
【P227～229】filterプロパティ [7分20秒]
【P230～233】text-transformプロパティ [12分32秒]
【P233～235】background-clipとベンダープレフィックスとグラデーション [10分0秒]
【P236～238】imgタグとbackground-image [11分34秒]
【P239～241】object-fitプロパティ [10分27秒]
【P242～245】画像に影をつけるふたつの方法 [11分14秒]
【P246～249】Google Mapsの埋め込み方法 [9分3秒]

-13章-

【P250～255】グリッドレイアウトについて [19分16秒]
【P256～258】CSSを書く順番 [6分35秒]
【P258～261】max-widthかwidthか [11分46秒]
【P262～264】デバイス毎に要素の表示をコントロールする方法 [9分19秒]
【P265～267】align-selfプロパティと反転レイアウト [6分46秒]
【P268～269】flexの個数の調整・変更 [3分1秒]
【P270～271】gridの配置の調整・変更 [5分3秒]

-14章-

【P272～275】参考サイトを読んでハンバーガーメニューをつける [21分3秒]

-15章-

【P276～277】ファビコンについて [8分4秒]
【P278～279】OGPについて [7分1秒]

-さいごに-

【P280～281】さいごに（書籍を終えた後の勉強について） [12分40秒]

はじめかた（アカウント登録）

新規アカウント作成画面からアカウントの登録をしてから、サブスクリプションの登録（支払手続き）をするとすべての音声を聴けるようになります。

既にアカウントを持っている方はログイン画面にお進みください。

課金開始までの流れ

1. 新規アカウントの仮登録（メールアドレスを入力）
2. 入力したアドレスに本登録用のURLが載ったメールが届きます
3. 本登録用のURLにアクセスしてパスワードを入力するとアカウントが作成されます
4. Stripe（サブスクリプション契約）ページへ移動
5. 支払情報を入力（クーポンはここで入力）
6. 決済が成功するとサービスの利用が開始されます
7. 一か月ごとに課金が継続されます
※不要になったらいつでもキャンセルできます

よくある質問

クーポンはいつ入力すればいいですか？

「サブスクリプション契約に進む」ボタンを押した後に表示されるページで「（プロモーション）コードを追加」の文字をクリックしてクーポンコードを入力した後「適用する」を選択すると反映されます。

クーポンの入力を忘れてしまいました。差額の返金はできませんか？

システム上、返金処理がとても難しいため返金は不可とさせていただいております。大変心苦しくはあるのですが、私どもにコーヒー1杯奢ったと思っていただけますと幸いです。

いつでも解約できますか？

はい。アカウント情報のページからいつでも解約可能です。解約しても支払済みの期限まではサービスの利用は可能です。

Stripeってなに？安全なの？

Stripeは世界の数百万におよぶ企業が導入しているオンライン決済代行プラットフォームです。
少なくとも個人が開発する決済システムよりははるかに安全ですが一定のリスクは存在することをご理解のうえご利用ください。Stripeに関する当サービスの利用規約はこちら。
クレジットカード情報などはStripeのサービス上で入力いただくため、当サービスのシステム上に残ったりそれを管理者が閲覧できたりすることはございません。

決済がうまく通りません

すみません。決済関連はすべてStripeの仕様に任せきりなため、原因の究明は難しいです。他のクレジットカードを試すなどお願いいたします。

クレジットカードを持っていないのですが

すみません。会計の手間を省き簡易化・一元化することによって低価格でサービスを運営しておりますので他の決済方法の実装はいまのところ考えておりません。

領収書の発行は可能ですか？

お支払いが成功するとご登録のメールアドレスにメール及びPDFが送られます。また、アカウントを退会していなければStripeカスタマーポータルというページの「インボイスの履歴」から領収書をダウンロードいただけます。