『SCSS』とは？ CSSを見やすく、書きやすくする拡張言語の『SASS』の1つ。 直訳すると『文法的に素晴らしいスタイルシート』。 実際にCSSとして使用するためにはSCSSファイルをCSSファイルにコンパイル（変換）する必要がある。 『SASS』と『SCSS』の違い SASS・・・インデントを使う記法でCSSとはかなり相違がある。通常のCSSルールで記述するとエラーがでる SCSS・・・CSSと互換性があるので通常のCSSルールで書いてもエラーがでない。記述方法がCSSとほぼ同じでとっつきやすい 『SCSS』を使うメリット ①変数が使える 　→phpやjavascriptのように変数によく使う値を格納しておけるので、変更する際に1箇所の変更ですむ 　→自分で分かりやすい変数名をつけれるのでコードが解析しやすくなる ②階層構造を使える 　→htmlのように階層構造でコードを記述できるので、記述量を減らせたりメンテナンスしやすいコードにすることが出来る ③ミックスインという機能が使える 　→『@mixin』というコードを使うことでコードの塊（関数に似ている）を作成し、複数の場所で呼び出して使用することが出来る ④継承という機能が使える 　→親要素で指定したスタイルを別の子要素でそのまま使用したり、追加でスタイルを当てて使用したりすることが出来る 『SCSS』のコンパイル手順 ①エディタのダウンロード 代表的なコードエディタ ・Brackets ・Sublime Text ・Visual Studio Code ・Atom ②コンパイラの準備 GUIコンパイラ ・koala ・prepros →アプリを立ち上げてファイルかフォルダを選択すると、アプリを立ち上げている間は自動でコンパイルしてくれる。 コンパイル後のスタイルも選択できる。 プラグイン『Live Sass Compiler』を使用する（VSCodeのみ） ①『Live Sass Compiler』をインストール ②コンパイルの監視を開始 ③SCSSのコーディングを行う

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;使えばスクロールさせない モーダルを作るときとかは使えるテクニックですね。

こんな感じ はじめに Nuxtで作ったwebアプリで、スマホアプリのsplash screen（?のような起動時に表示される画像）を表示させたいと思いました。 よくあるローディング画面とは違って、必ず指定した秒数だけ表示させるようにしたかったので色々と調べた結果をここに記録します！！ splash screen用の画面 最初の画面が表示される前に、ふんわりとロゴが表示されます。 components/LoadingScreen.vue <template> <div :class="{ loader: true, fadeout: !isLoading }"> <div class="page-container"> <img class="splash" src="@/assets/images/Logo.png" /> </div> </div> </template> <script lang="ts"> import Vue from "vue"; export default Vue.extend({ name: "LoadingScreen", props: ["isLoading"], }); </script> <style scoped> .page-container { max-width: 500px; width: 100%; margin: auto; } .loader { background-color: #ffffff; bottom: 0; color: white; display: flex; align-items: center; text-align: center; left: 0; overflow: hidden; position: fixed; right: 0; top: 0; } .splash { width: 150px; } .fadeout { animation: fadeout 2s forwards; } @keyframes fadeout { to { opacity: 0; visibility: hidden; } } </style> LoadingScreen.vueを一番最初に表示させる Nuxtで一番上の階層？にあるdefault.vueを編集。 これでindex.vueが読み込まれる前にsplash screenっぽい感じで、ロゴ画像をふんわりと表示させることに成功しました！ layouts/default.vue <template> <div> <LoadingScreen :isLoading="isLoading" /> <transition name="fade" v-if="!isLoading"> <Nuxt /> </transition> </div> </template> <script> const LoadingScreen = () => import("../components/LoadingScreen.vue"); export default { components: { LoadingScreen, }, data() { return { isLoading: true, }; }, mounted() { setTimeout(() => { this.isLoading = false; }, 1000); }, }; </script> <style scoped> .fade-enter-active, .fade-leave-active { transition: opacity 1s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style> 参考

はじめに プログラミング学習の一番最初は、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