overflowとは overflowとはCSSのプロパティの１つで「要素のボックスからはみ出た部分をどう扱うか」を指定します。 cssでよく使うやつですね。 styles.css .box { /* 初期値。はみ出た部分はそのまま表示される。 */ overflow: visible; /* はみ出た部分が非表示。 */ overflow: hidden; /* はみ出た部分が非表示。その中でスクロールできる. */ overflow: scroll; /* ブラウザにより表示が変わる（基本的にはスクロールできる状態に） */ overflow: auto; } じゃあbodyに当てればはみ出た部分消してくれるってこと？ ふーん、便利じゃん。 styles.css body { overflow: hidden; } これでレスポンシブして要素がはみ出ても変な余白ができたりしないはず！ しかし、別の問題が発生します。 あれ？スクロールできなくなったんだけど？？？ bodyにoverflow: hidden;してしまうとビューポートへ適用されてしまいます。 ビューポートとは、簡単にいえば「ブラウザのウインドウに表示されている領域」を指します。 つまり、表示されている領域からはみ出るすべての要素が非表示になってしまうのです。 　解決策 styles.css body { overflow: scroll; } ここまで読んでくださった君のような勘のいい方はもうお気づきですね。 bodyにoverflowするときはscrollにしましょう。 スクロールできて要素がはみ出たときに変な余白を消すことができます。 逆に言えばoverflow: hidden;使えばスクロールさせない モーダルを作るときとかは使えるテクニックですね。

はじめに プログラミング学習の一番最初は、HTML/CSSを学ぶ方が多いと思います。 そこから、バックエンド(PHP/Ruby etc...)を学んでWeb開発の道に進んだり、 ローコード(WordPress)やノーコード(bubble、STUDIO)を使って、Web制作の道に 進んだりとあらゆるロードマップが広がっていくと思います。 特にがっつりとバックエンドを学ばずにWeb制作を始める場合は、 ローコード・ノーコードツールの利用は不可欠です。 HTML/CSSだけですと全く動きのないサイトになってしまいますからね。 今回は、HTML/CSSでポートフォリオ制作した方がそのポートフォリオをWP化 出来るよう環境構築の手順を記述していこうと思います。 Local by Flywheelのインストール XAMPPやMAMPを使ってWP環境を構築することも出来ますが、 これらは扱いが少々複雑なので、初学者にはオススメしません。 Local by Flywheelを使えば非常に簡単に環境構築が出来るので、 今回は、Local by Flywheelを使用する手順をご紹介していきます。 Local by Flywheelインストール方法 下記サイトよりインストールを開始します。 https://localwp.com/ 使用デバイスを選択します。 必要情報を入力後にGET IT NOWをクリック！ これで、お使いのPCにLocal by Flywheelがインストールされたはずです。 インストール後の設定手順 インストールされたLocal by Flywheelを開くと下記の画面が表示されると思います。 画面中央にある、CREATE A NEW SITEをクリックしてください。 ※Local by Flywheelのバージョンによって若干表示に差異がある可能性があります。 任意のサイト名を入力 PreferredとCustomから選択出来ますが、PHPのバージョンやWebサーバーの種類、 My SQLのバージョンをカスタマイズする必要がなければ、PreferredでOKです！ ユーザ名、パスワード、自身のメールアドレスを入力 ※ここでのメールアドレスは今後サイトにお問い合わせ機能などを作る際に活用します。 設定入力後にADD SITEをクリックすれば、Wordpressサイトの構築が完了です。 そして、完了後にADMINをクリックするとWordpressの管理画面に遷移出来ます。 先ほど作成したユーザ名・パスワードを入力 管理画面にログイン後はまず、日本語化の設定を完了させましょう。 ※設定変更後は、画面下部にあるSave Changesのボタンを押し忘れないようにしましょう。 これで、管理画面の日本語化も完了です！ 現在のWPでは、作成したファイルを何も置いていない為、初期画面になっています。 次回からは、どのようにしてWP上に作成したファイルを配置して、 反映させていくかを紹介していこうと思います！ おわりに 最後まで記事を見てくださりありがとうございました！ 私は、何十万とするプログラミングスクールには、通っていませんが、 Freeks(フリークス)のカリキュラムを通して学んでいました。 サポートもしっかりしているので独学に限界が来たと感じた方は、 一度下記詳細を確認してみてください。 https://twitter.com/freeks_japan

はじめに プログラミング学習の一番最初は、HTML/CSSを学ぶ方が多いと思います。 そこから、バックエンド(PHP/Ruby etc...)を学んでWeb開発の道に進んだり、 ローコード(WordPress)やノーコード(bubble、STUDIO)を使って、Web制作の道に 進んだりとあらゆるロードマップが広がっていくと思います。 特にがっつりとバックエンドを学ばずにWeb制作を始める場合は、 ローコード・ノーコードツールの利用は不可欠です。 HTML/CSSだけですと全く動きのないサイトになってしまいますからね。 今回は、HTML/CSSでポートフォリオ制作した方がそのポートフォリオをWP化 出来るよう環境構築の手順を記述していこうと思います。 Local by Flywheelのインストール XAMPPやMAMPを使ってWP環境を構築することも出来ますが、 これらは扱いが少々複雑なので、初学者にはオススメしません。 Local by Flywheelを使えば非常に簡単に環境構築が出来るので、 今回は、Local by Flywheelを使用する手順をご紹介していきます。 Local by Flywheelインストール方法 下記サイトよりインストールを開始します。 https://localwp.com/ 使用デバイスを選択します。 必要情報を入力後にGET IT NOWをクリック！ これで、お使いのPCにLocal by Flywheelがインストールされたはずです。 インストール後の設定手順 インストールされたLocal by Flywheelを開くと下記の画面が表示されると思います。 画面中央にある、CREATE A NEW SITEをクリックしてください。 ※Local by Flywheelのバージョンによって若干表示に差異がある可能性があります。 任意のサイト名を入力 PreferredとCustomから選択出来ますが、PHPのバージョンやWebサーバーの種類、 My SQLのバージョンをカスタマイズする必要がなければ、PreferredでOKです！ ユーザ名、パスワード、自身のメールアドレスを入力 ※ここでのメールアドレスは今後サイトにお問い合わせ機能などを作る際に活用します。 設定入力後にADD SITEをクリックすれば、Wordpressサイトの構築が完了です。 そして、完了後にADMINをクリックするとWordpressの管理画面に遷移出来ます。 先ほど作成したユーザ名・パスワードを入力 管理画面にログイン後はまず、日本語化の設定を完了させましょう。 ※設定変更後は、画面下部にあるSave Changesのボタンを押し忘れないようにしましょう。 これで、管理画面の日本語化も完了です！ 現在のWPでは、作成したファイルを何も置いていない為、初期画面になっています。 次回からは、どのようにしてWP上に作成したファイルを配置して、 反映させていくかを紹介していこうと思います！ おわりに 最後まで記事を見てくださりありがとうございました！ 私は、何十万とするプログラミングスクールには、通っていませんが、 Freeks(フリークス)のカリキュラムを通して学んでいました。 月額¥9,800でサポートもしっかりしているので、 独学に限界が来たと感じた方は、 一度下記詳細を確認してみてください。 https://twitter.com/freeks_japan

「HTMLに動画を埋め込む方法」　 ・iframeタグを使用する（youtubeなどの動画サイトから読み込む） ・videoタグを使用する（動画ファイルをアップロードして読み込む） videoタグの使用方法 ・mp4, webmなどの動画ファイルの読み込みで動画を表示 属性一覧 ・controls コントロールパネルを表示する 再生ボタン 再生 ボリューム ・auto 自動再生 ・loop 繰り返し再生 ・poster 開始画面の画像を設定 ・playsinline インライン再生を可能にする スマホのsafariでwebサイトの動画の埋め込まれている動画を再生しようとすると強制的に全画面表示になってしまうことがある。 全画面表示をせずにその場で再生させることができるのがインライン再生 ・インライン再生を可能にするには、autoplay, muted, playsinline 三つの属性が必要になる。 どれか一つでもかけているとうまくインライン再生されないので注意する。 ・width/height 横幅と高さを指定する ・preload 動画の読み込み設定 webサイトを読み込む時に、事前に動画ファイルをDLするかを指定する。 none: 事前のファイル読み込みを禁止 metadata: 長さやファイルサイズなどのメタ情報（動画の情報）だけを読み込む auto: 初期値：動画ファイルを事前にダウンロードする ・複数の形式の動画を読み込む mp4で動画が再生されない時のことを考えて複数形式の動画をあらかじめ用意しておく。（セーフティネット） １「mp4」を読み込む ２ だめなら「webm」を読み込む ３それでもダメなら「ogg」 ４それでもダメなら「エラーメッセージ」を表示する youtubeなどの動画サービスを埋め込む ・iframeタグを使用する。 １youtubeの動画の「共有」から「埋め込む」を選択 ２埋め込むためのコードが表示されるのでコピーしてhtmlに貼り付けるだけでOK ・Videoタグで動画が再生されない３つの、ケースと解決策 ・androidで動画が再生できない 「Basic認証」でwebページにアクセスできる人を「ユーザーパスワード」を用いて制限するという機能がある。 そのBasic認証がかかったページをandroidで閲覧すると動画を見ることができない。 ・mp4なのに再生できない mp4でも「コーデック」といい、圧縮のデータ方式が異なるので コーデックを確認して「AVC形式」「H.265形式」でmp4を経て書き出す ・IEでvideoタグが使えない場合 IZE8以前では「videoタグ」が使用できないので「html5media.js」を使用する タグの中にする文言が、ある 背景に動画を表示する方法 ・要素いっぱいに動画のサイズを広げて、文字の入ったdiv要素をabsoluteで、浮かせて動画の上に載せるイメージ iframe ・weサイトの中で別のwebサイトを埋め込むことができる（other youtube and google maps） ・iframeの装飾は、枠のデザインしかできず、読み込んだページのデザインを変えるにはJSを使用 ・iframeを使うと少ないスペースにたくさんの情報をスクロールすることで読みこみ可能。 ただこれは目的の情報に辿り着きにくくなる。 ・CSSのoverflowプロパティでは擬似的にフレームを作ることができるの

画像挿入 ・HTMlでの画像挿入にはimgタグ。src属性, alt属性, title属性 1 src（画像の指定） ・画像や文章など、表示したいファイルの出どころを指定。指定する際は絶対パス、相対パスのどちらでも可能。 相対パスの場合googleじゃ、実行するHTMLファイルの格納位置で変わるので注意。 ２ alt（画像の説明文を記載） ・Googleの検索エンジンはこの属性で何の画像かを判断する。画像が表示されなかった時にもこの属性が表示される。title属性よりも詳細な内容を表示する。 3 title(タイトルを設定する) ・画像やリンク先のタイトルを表示する。マウスカーソルを画像に合わせると吹き出し形式で表示される。 ４ width, height（画像幅、画像の高さを指定） ・大きさを変更しない場合でもサイズ指定を行う 「画像の上に文字を重ねる方法」 １ 画像表示 ２ 文字を表示する ３ 画像の上に文字を重ねる 「position: relative」と「position: absolute」を使用する。