今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

mito

8月から始めた #30DAYSトライアル。ついに全てのステージ完走です！

momo

わ〜い！！

せっかくなので、ここまでの学びをまとめたいと思います。

こんな学びがありました！〜PHP&SQL編〜

HTMLやCSSの書き方とは違うPHP独自の書き方とオブジェクト指向を学びました。

#30DAYSトライアル
3rd DAY1：Progate PHP Ⅰ

wordpressでも連想配列、foreach文はよく見かける気がするので、きちんと抑えておきたい！

— mito@ひよっこwebデザイナー (@mito_works) November 1, 2019

https://twitter.com/mito_works/status/1190605992414760960

https://twitter.com/mito_works/status/1190980247539159040

https://twitter.com/mito_works/status/1191589994491596801

DAY5：Progate SQL Ⅰ　#30DAYSトライアル #3rd
書いてサッと答えが返ってくる感じ、SQLやっぱり好きだなぁ〜。と改めて。
むか〜しとったOracleのBronze SQLの知識も無駄にはなっていないと思ってちょっと嬉しくなった！

— mito@ひよっこwebデザイナー (@mito_works) November 5, 2019

連想配列

オブジェクト指向

こんな学びがありました！〜環境構築編〜

ローカル環境で複数のWordPressを管理できる方法を学びました。

mito

これで複数案件、同時並行でも大丈夫です！

https://mito-lab.com/mamp-wordpress/

こんな学びがありました！〜WordPress編〜

分からないところは参考書を逆引きで使って学習を進めました。

mito

このブログ書いていることもあり、“あの実装は裏でこういう処理を書いているのか！”と理解が早かったです。

#30DAYSトライアル #3rd
DAY10：Wordpress(3)
HTML 、CSS、PHPを理解した上で進めているので、wordpress独特の書き方のみ「初めて見る！」という状態。

過去の積み重ねのおかげでスムーズに進む気がする！

— mito@ひよっこwebデザイナー (@mito_works) November 11, 2019

#30DAYSトライアル #3rd
DAY13：Wordpress(6)page.phpを編集

esc_urlを調べると"URLに最適化される"と一言。

？？？？

と思ったけれど、実際出力してみると一目瞭然！！(カテゴリー表示部分)

var_dump()も大活躍です pic.twitter.com/mP1e9DIKKU

— mito@ひよっこwebデザイナー (@mito_works) November 14, 2019

#30DAYSトライアル #3rd
DAY14：Wordpress(7)

メインクエリという処理の本筋みたいな存在をようやく理解！

「WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第2版]」
逆引きで使えて、すごく分かりやすい！初心者もすんなり理解できるのでおすすめですhttps://t.co/cdcvrixh1B pic.twitter.com/QQgqAeWdKW

— mito@ひよっこwebデザイナー (@mito_works) November 15, 2019

WordPressの要点

トップページにピックアップ記事を表示

サイドバーの作り方

検索結果ページ＋404ページの作り方

ショートコード自作

WordPress勉強のオススメ書籍

momo

参考にしたのはこの3冊！

momo

知識の定着には繰り返し「見る、書く」がいいね！

まとめ

#30DAYSトライアル #3rd
DAY18,19：Wordpress(11,12)

無事完走〜！！
とはいえ、最後は駆け足だったりまだまだスキル不足を実感。
引き続き学びます♪

「Wordpressで制作できる」

と言ってもいろんなレベル感があること、今自分がどこのレベルにいるのか、なんとなくでもつかめたことがよかった！

— mito@ひよっこwebデザイナー (@mito_works) December 17, 2019

mito

これからは、案件をこなしつつ、知識を定着させていこうと思います！

#30DAYSトライアルのコンテンツと参考書を併用して進めると挫折せずに取り組めました。

コンテンツのわかり易さに感謝です！

ブログを書いていていて毎回使っている定型文ありませんか？

今回は、そんな定型文の入力を簡単にしてくれるショートコードについてまとめました。

mito

これは#30DAYSトライアルの課題を少しアレンジしたものです！

ショートコードとは

ショートコードは、記事の本文で[タグ名]のように記述し、あらかじめ設定した関数を呼び出すことができる機能です。

momo

うまく利用すると、投稿の手間が省けて便利だね！

ショートコード作成の全体像

今回はいつも冒頭で書いているこちら挨拶を ショートコード化します！

↓↓↓

function.phpに追加

以下をfunction.phpに追加します。

function shortcode_mytwitter(){
    return 'こんにちは、mito(<a href="https://twitter.com/mito_works" target="_blank">@mito_works</a>)です。';
}
add_shortcode('twitter', 'shortcode_mytwitter');

momo

ショートコード名がtwitter、ショートコードが見つかった時に実行する関数がshortcode_mytwitterだね！

記事の本文で利用

記事を書く際に「[タグ名]」と書きます。

↓↓↓

まとめ

momo

定型文はショートコードとして登録しておくとブログ記事を書く際の時短になるね！

今回は、WordPressのフォルダ構成について書いていきます。

それではいってみましょう〜！

なぜ書こうと思ったか？

WordPressを独学で勉強していて、とりあえずテーマをそのまま使い、触ってみるところからスタート。

その後、テーマをカスタマイズしたり、プラグインをインストールしたり、ローカルにWordPressの環境を2つ作るなど、応用的なことがしたくなりました。

その際、WordPressのフォルダ構造はどうなっていて、どこに何があるのか、きちんと把握できていないと時間がかかってしまいます。

mito

特に管理画面上からではなく、直接ファイルを触ることも増えたので、一度フォルダ構成をしっかり頭に入れよう思いました！

momo

WordPressのフォルダ構造という全体を抑えることで何をどのように変えればいいか？という仮説も立てられて、効率化につながるね！

ざっくりWordPressとは？

ファイルとデーターベースで構成されています。

・ファイル
パソコンの中にもあるファイルと同じようなテキストファイルにプログラムなどの情報が書いてあるもので、FTPというサーバからファイルを取得するツールを使ってダウンロードが可能なもの

・データベース
ファイルと違って、MySQLというデータを管理するシステムによって管理されている投稿データなどのデータの固まりで、FTPというツールではダウンロードできない特殊な形式のデータ

（参考：WordPress初心者向け　フォルダ構成・データベース構成解説）

momo

通常のHTMLとの違いは、HTMLの場合は静的でデーターベースから値を取得するということはないけれど、WordPressの場合は、WordPressを仲介して、データベースから値を取得するので動的なサイトということだね！

WordPressファイルの3つの分類

コア（本体）
｜_WordPressのプログラム本体
｜_設定情報（データベースの接続情報、インストール場所のパス情報など）

テーマ（見栄え）
｜_プログラムが組み込まれた HTMLファイル、CSS

プラグイン（機能、拡張）
｜_　プラグインのプログラム
｜_　アップロードした画像

momo

通常、WordPressのカスタマイズと言われて触る部分はテーマ（見栄え）の入るだよ！

データベースの4つの分類

投稿データ
投稿データに付随するデータ
WordPressの設定情報（「設定」の画面で設定する情報など）
プラグインなどの設定情報

momo

設定情報についてはファイル、データベース両方にあり、不思議に思ったかもしれないけれど、以下のような分類になっているよ！

ファイルとして保存されている情報は、データベースに接続するための情報（そもそもこれがないとデータベースに接続できないから）、インストールされているファイルのパス情報（その都度データベースにアクセスに行くと速度が犠牲になる可能性がある情報）など、主にインストール時に入力、決定する情報がファイルに保存されています。

また、データベースには、管理画面の「設定」から保存する情報など、後からでも管理画面から設定変更出来るような設定の情報が保存されています。

WordPressのフォルダ構成

mito

どこに何があるのか？知っていると色々な作業がスムーズなのでここにまとめます。

※以下、WordPressのルートフォルダを「/」（ドキュメントルート）として表現しています。

まず、一番大事で更新回数も多いフォルダ「wp-content」。

momo

「wp-content」フォルダの中にあるプラグインやテーマ、プログラムによってそのサイトがオリジナルのものとして構築されるよ！

まとめ

フォルダ構成を把握することで、どこに何があるかの勘所が掴めます。

管理画面上からだけではなく、直接ファイルへのアクセスし、修正できるようになります！

WordPressでWeb制作を行う際にまずローカル環境で制作しますよね？
その際に1つのデーターベースで複数のWordpressを管理したいと思ったこと、ありませんか？

momo

自分のブログ、案件での開発環境など複数のWordpressローカル環境が必要になる場合があるよね

実は簡単に1つのデータベースで複数のWordPress環境を動かすことができるのでご紹介します。

mito

まずは、MAMPをローカル環境で使うための環境設定の復習からです。

MAMPのインストール

ダウンロードページに遷移し、ダウンロードをします。

MAMPインストーラーを開き、指示に従ってMAMPのインストールを進めます。

アプリケーションフォルダに配置できたら完了です。

MAMPの設定

先ほど配置した、「アプリケーション > MAMP」内の「MAMP.app」をダブルクリックし、起動します。

MAMPを起動したら、メニュー内の「MAMP > Preferences」を選択し、設定画面を開きます。

設定画面を開いたら、「Ports」タブを開きます。
以下のようなデフォルトの設定のままにしています。

「Start Servers」をクリックしてサーバーを起動させます。

momo

上の画像の赤枠で囲った部分が緑色になれば起動しているよ！

MAMPにWordPressをインストール＆配置

WordPress公式サイトから最新バージョンのWordPressをダウンロードします。

ダウンロードしたファイルはzipファイルです。
解凍すると「wordpress」という名前のフォルダとなり、その中にはWordPressを構成するファイルが入っています。

momo

「wordpress」フォルダを「アプリケーション > MAMP > htdocs」内に移動させ配置するよ！

データーベースの作成

ブラウザでMAMPの「WebStart page」を開きます。

momo

アプリケーションからも開けるよ！

続いて「PHPMYADMIN」を開きます。

「データベース」タブを選択。

「データベースを作成する」という項目を確認します。
空欄にデータベースの名前（名前は何でもOK）を入力し、その右の項目は「utf8_general_ci」を選択し。「作成」ボタンをクリックします。

データベースとWordPressの紐付け

ファイルの設置とデータベースの作成が出来たらlocalhost:8888へアクセスし、手順通り設定します。

http://localhost:8888/wordpress/wp-admin/setup-config.php

データーベースに関する必要事項を入力します。

WordPressに関する必要事項を入力します。

先ほどの情報でログインします。

momo

ログインできれば完成だよ！

2つめの環境構築

WordPressのインストール

先ほどの同じやり方でインストールを行い、ファイルごと同じ場所に配置します。

データーベースの設定

MAMP上から先ほどと同じように新しくテーブルを作成します。

データーベースとWordPressの紐付け

「MY WEBSITE」をクリック。

今回作成した「wordpress_B」をクリック

WordPressの設定画面が出るので手順に従い進めます。

以下のようにデーターベース名とテーブル接頭辞を変えるだけで1つめ作成時と同じように作成します。

momo

ログインできれば完成！簡単だね！

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

mito

いきなりですが、30DAYSトライアルの2ndステージ。完走しました！！

#30DAYSトライアル
2nd DAY29,30：実践コーディング
今までの知識を総動員させてとなんとかできましたっ！！
うれしい♪♪♪

「できるものなんだ！」ってすごく自信になったけれど、
もう少し余裕を持ってできるようになりたい！！
(約4~5日かかりました。) pic.twitter.com/U9Sj1tF2FR

— mito@ひよっこwebデザイナー (@mito_works) October 21, 2019

mito

2ndで学んだことをまとめます。

2nd前半の学び

コードの書き方からアニメーションの使い方まで幅広くインプットできました。

https://mito-lab.com/coding-30days-2nd-1-3/

https://mito-lab.com/coding-30days-2nd-4-6/

https://mito-lab.com/coding-30days-2nd-7-8/

mito

特に勉強になったり、忘れたくないなと思うものは切り出して記事にしました！

https://mito-lab.com/title-css-straip/

https://mito-lab.com/float-biginner/

https://mito-lab.com/position-flex/

https://mito-lab.com/jquery-animation/

https://mito-lab.com/svg/

2nd後半

学んだことを試す場。前半で学んだSassやjQueryやJavaScriptを使って実践です。

mito

答えがないので「習得した知識を組み合わせて試す→検索して試す」をひたすら繰り返していました。

https://mito-lab.com/30days-2nd-day17-26/

人から「これポイントですよ！」と教えられたことよりも、実践の中で「これはポイントだ！」と気づいたことでは、「めちゃくちゃ重要なことだ！」という切実さが違います。

そして知識としての定着率も変わってくることを実感しました。

ほんとに今更だけど、bootstrapは煩雑になりがちなcssのコードを減らすために使うものと気づいた。(私の見解)
便利〜と思って、本来の目的わからず闇雲に使うの良くないな＞＜。#30DAYSトライアル

— mito@ひよっこwebデザイナー (@mito_works) October 17, 2019

最終課題の学び

#30DAYSトライアル
2nd DAY27,28：実践コーディング
残すところレスポンシブ対応。
背景デザインが一色のベタ塗りではないので、「これどうやって実装するんだろう？」と悩み、positonを多用することに。divの囲み方含め試行錯誤したので勉強になりました！

あと少し〜。 pic.twitter.com/lo7ScgDwjF

— mito@ひよっこwebデザイナー (@mito_works) October 21, 2019

3日で終わらせるのがベストという演習を4~5日かけました。

mito

つまずいたら根詰めてやるのではなくて一旦寝かせるというやり方をしていました。実質の時間だと3日くらいだと思いますが、頭を一旦リセットするために寝かせる時間は必要でした。

momo

時間がかかった一つの要因として、ワイヤーフレームを書いていなかったということがあるね。

https://twitter.com/mito_works/status/1186476124886298624

それから「このデザインよく見ている気がするけれど、どこで見たか思い出せない・・」というものが結構ありました。

mito

いつも見ているはずなのに。。見た場所も思い出せないし実装もできない・・。もう少し意識的にサイトを見るようにしたいという教訓を得ました。

実装方法の引き出しを増やしていきたいと思います。

mito

ひとまずパーツごとのサイトレビューをやってみたいなと思っています。

まとめ

1stから約2ヶ月間取り組んだ #30DAYSトライアル。

2ヶ月前には、今は当たり前のように使っているテキストエディタVscodeも知らなかったし、BootstrapもScssも知らなくて。。

mito

今ではショートカットキーを駆使しながらVscodeを使い、BootstrapやScssを使い、効率的にコードを書くことを意識してます。

0から10以上になった知識。ふりかえると、毎日の積み上げてきたもの、感慨深いです。

知識のインプットからそれを使ったアウトプットまで止まることなく一気通貫で取り組めてスキルアップできるものだと思います。

mito

学んだことを即実践で活かせるので、スキルとして身につきやすい。短期間でスキルアップしたい人にとってはとても良いコンテンツだと思います！

全力でオススメします！

2つのコンテンツを横に並べてそのうち1つの位置をちょっとずらしたい。
ついでに背景の色も変えたい！なんてことありませんか？

mito

#30daysトライアル 2ndの実践演習を元に解説します！

完成イメージとワイヤーフレーム

完成イメージとワイヤーフレームはこちらです。

momo

いきなりコーディングを始めるんじゃなくて手書きでもいいのでワイヤーフレームを書くのはおすすめだよ！

mito

そうすることで、CSSの書く分量を減らしてくれるBootstrapを計画的に使えたり、sassの変数宣言の設計など保守性の高いコーディングができます！

ですね！

それで、順序としては
複雑になってくる→Bootstrap使おう
じゃなくて
こことここはBootstrap使って簡略化しよう→必要な箇所に必要な分だけ使う

って感じです！

だから最初に手書きでもいいのでワイヤーフレームを書くのが大事なんですよね

— ショーヘー@東フリCMO (@showheyohtaki) October 17, 2019

https://mito-lab.com/coding-30days-11-12/

https://mito-lab.com/coding-30days-13-14/

https://mito-lab.com/coding-30days-15-16/

https://mito-lab.com/coding-30days-2nd-7-8/

HTMLのコーディング

ワイヤーフレームに合わせてコーディングしていきます。

    <section id="access">
        <div class="accessItems">
            <div class="address offset">
                <h3 class="font-weight-bold pt-4 contentsTitle">Access</h3>
                <p class="py-5">〒106-6XXX<br>東京都港区六本木 XX町目Y番地<br>セントラルタワー</p>
                <div>
                    <a href="#" class="btnWhite">Google Maps</a>
                </div>
            </div>
            <div class="map">
                <iframe width="100%" height="100%" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15064.912379910664!2d139.87216275814978!3d35.63005293109904!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60187d75d4baaaab%3A0x495f687a2ad1916f!2z5p2x5Lqs44OH44Kj44K644OL44O844K344O844O744Ob44OG44Or44Of44Op44Kz44K544K_!5e0!3m2!1sja!2sjp!4v1568727612321!5m2!1sja!2sjp" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
            </div>
        </div>
    </section> 

SCSSのコーディング

装飾を加えていきます。

#access{
    position: relative;
    height: 810px;
　　 color: #F3F3F3;

    .accessItems{
        display: flex;
        .address{
           padding-left: 93px;
        　　background-color: $black;
        　　color: #fff;
           width: 980px;
           height: 550px;
        }
        .map{
            box-shadow: 0 0 10px #d6d6d6;;
            position: absolute;
            top:120px;
            right: 55px;
            width: 720px;
            height: 515px;
        }
    }
}

まとめ

momo

親、子の関係性、何を基準にしているのか？を意識すると理解が早いよ！

mito

最初にワイヤーフレームを書いておくと早いです。

(スマホはレイアウトが異なっていたので、上のコードはcssでdisplay=noneのして新しく書きました。)

今回はSVGファイルについての話題です。

mito

最近コーディングをしていてアイコンやロゴデータがSVG形式ということがよくあります。

SVGデータの特徴と、どういうときに使うのが良いのかをまとめました。

momo

それじゃあ、いってみよう〜！

SVGとは

SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、JPEGやPNGのような画像(ビットマップデータ)ではなくイラストレーターで扱うベクターデータです。

momo

ベクターデータは「画像を、点の座標とそれを結ぶ線（ベクター、ベクトル）などの数値データをもとに、演算によって再現する方式」だよ！

SVGの良いところ

「拡大・縮小しても画質が損なわれない」

SVGはベクトル形式の画像であり、拡大縮小に強く画質が劣化しません。
そのため、どのような画面上であっても鮮明かつ明瞭な画像を表示できます。

momo

スマホやタブレットや高解像度ＰＣでもキレイな画質で表示できるよ！

mito

スマホでは綺麗に表示されているのに、PCでは画像が荒い。。なんてことは起きないんですね。

momo

ちなみに、EPSなどのフォーマットもSVGファイルと同じベクトル形式だよ！

逆にGIF、JPEG、PNGなどの「ラスタ形式」の画像は、ピクセルを縦横に並べる方法で画像を描画します。

ラスタ形式の画像は拡大縮小してしまうと画質が劣化してしまったり、画像がギザギザになります。加えて、ファイルサイズが大きくなってしまい負担になるというデメリットがあります。

動きやぼかしなどのエフェクトを加える事も可能

「数値データをもとにして演算された画像」なのでCSSやJavaScriptのアニメーションととても相性が良いです。
動きやぼかしなどのエフェクトを加える事も可能です。

テキストエディタで開きファイルを編集することが可能

画像として編集することも、コードを編集することもどちらも可能です。

momo

テキストエディタで開き、簡単な変更やクラス名をSVGデータ自体にもたせたりすることもできるのが便利だよ！

SVGのデメリット

ベクトル画像は複雑な計算式で画像を描画しているため、写真のように複雑で繊細な配色や輪郭の画像描画には適していません。

momo

ロゴ、タイトル、アイコンなど単純なものはSVGファイル、写真はjpegもしくはpngと使い分けると良いね！

SVGデータの作り方

mito

illustratorを使ってSVGデータとして書き出す方法で作りました。

イラストレーターでパスデータ作成

文字データはアウトライン化します。

SVG形式でファイルを保存

ファイル保存時に拡張子svgを選択します。

mito

簡単に作れますね！

JPEG・PNGからSVGへ変換する方法

pngデータしかないけれど、SVGとして使いたい！という時などに有効です。

mito

今回は簡単にsvgへ変換できるオンラインサービス(Online Image Vectorizer)を使ってみました。

momo

ワンクリックで簡単にsvgデータへ変換できるよ！

今回変換した画像はこちらです。

まとめ

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

mito

30DAYSトライアルの2ndステージ。いよいよ後半です。

momo

2ndのDAY17~26はxDのデザインカンプからコーディングしたサイトにアニメーションをつけていったよ！

#30DAYSトライアル #2nd

2nd DAY16
一通りできた！！（と思う。）バッチリ仕様通りではないので完成度は70%くらいかな。
余裕がなかったので余裕がある人向け課題はほぼできず＞＜。
レスポンシブでの余白が微妙だな〜とかは少しずつ直していきます。 pic.twitter.com/frBC6iU5ce

— mito@ひよっこwebデザイナー (@mito_works) September 24, 2019

mito

この10日間で学んだことや気づきをまとめます。

twitter投稿でふりかえる10日間の学び

twitterで投稿していた内容をまとめました。
どんなことが学べるのかの参考になれば幸いです。

DAY17『マウスホバー時の動きを付ける』

#30DAYSトライアル #2st

2st DAY17 アニメーション
ずっと気になっていた画像にホバーすると少し拡大になるあの動き、簡単に実装できることがわかって使いたくてうずうずする！！

— mito@ひよっこwebデザイナー (@mito_works) September 27, 2019

DAY18. 『Webフォント、デバイスフォントを理解する』

#30DAYSトライアル #2st

2st DAY18 Webフォント、デバイスフォント
Webフォントって重いんだ！知らなかった。

デザインする時フォトショの中にあるフォントからデザインのことだけ考えて選んでいたけど、デバイスフォント、Webフォント、画像どれにするか決めてデザインするようにしようと思う。

— mito@ひよっこwebデザイナー (@mito_works) September 28, 2019

DAY19. 『コーディング後の品質を担保するテスト』

#30DAYSトライアル
2st DAY19
昔、プログラミングをしていた時、テスト仕様書作って、すべての分岐を通るように単体→結合と細かくテスト＆キャプチャも全部残してたんですが、HTML、CSSのコーディングは厳密にテストしないんだな〜と勝手な印象があったけど、プロはやっぱりそんなことないですね。

— mito@ひよっこwebデザイナー (@mito_works) September 29, 2019

DAY20. 『スライダー（カルーセル）を作る』

#30DAYSトライアル
2st DAY20

ウィンドウ幅いっぱいのスライダーをslickで実現。
「ウィンドウ幅いっぱい」という指定に苦戦しました。
ダウンロードしたjQueryもそのまま使うのではなく、scssを変更すると個性が出るなと。 pic.twitter.com/UCNEeb0n6k

— mito@ひよっこwebデザイナー (@mito_works) September 30, 2019

jQuery、ダウンロードしたまま使うのではなく少しコードをカスタマイズして色や形を変えると印象が随分変わるのだなと思いました。

DAY21. 『スクロールに応じて要素を「フワッ」と登場させる』

#30DAYSトライアル
2nd DAY21

「WOW」ライブラリを使ってアニメーション。
こんなに簡単に、こんなにリッチな動きが実現できるなんてすごいなぁ〜。

そして動きが入るとそこに命が吹き込まれたみたいな気がして楽しい♪
色々試してみた結果「flipInX、rollIn」の個性的なアニメーションが好きです。 pic.twitter.com/50IJ3By0kn

— mito@ひよっこwebデザイナー (@mito_works) October 1, 2019

動きが面白いなと思い、ブログにも使い方を書きました。

https://mito-lab.com/jquery-animation/

DAY22. 『スマホ時のドロワーメニューを作る』

#30DAYSトライアル
2nd DAY22 ドロワーメニュー作成

最近ちょっとコーディングで遊べるようになってきた♪#1日1サイトレビュー でもよく見かける（気がする）PCでも丸いドロワーメニュー＆中身の背景グラデーション＆メニュー項目の左にアイコンも作ってみました！ pic.twitter.com/bbb2acD86F

— mito@ひよっこwebデザイナー (@mito_works) October 2, 2019

メニューは特に“今の流行り”が一番反映されやすい部分だと思います。
色々なサイトを見てコーディングのストックを増やしておきたいです。

mito

この辺りから徐々に課題をこなすだけではなく、真似したいサイトを見つけて自分で再現してみるというような遊び方ができるようになりました。

DAY23. 『スムーススクロールとフローティングアイテムを作る』

#30DAYSトライアル
2nd DAY23 ページ内リンク

Bootstrapや人のソースでページ内の各コンテンツの一番外側のdivまたはsectionにoffsetというクラスがあって、「一律、上幅調整するためかな」って思ってたんですが、「スムーススクロールの時にも効果を発揮するのか！」と分かって、朝から気分良し！

— mito@ひよっこwebデザイナー (@mito_works) October 3, 2019

#30daysトライアルと並行して模写も行なっています。
そこでの学びとここでの学びがリンクした日でした。

https://mito-lab.com/float-biginner/

DAY24. 『ページ内リンクでクリックした要素に対して下線を引く（クリックイベントの処理）』

#30DAYSトライアル
2st DAY24：クリックした要素に下線。
boostnoteにもストック。

画像も一緒に貼れると嬉しいな、できないので文字やハッシュタグで補足書いてすぐ欲しい情報にたどり着ける工夫をしてます。
ipadとかiphoneもアプリがあって見れるといいなと欲張りなことを思ったり・・。 pic.twitter.com/NvOoXnLwq8

— mito@ひよっこwebデザイナー (@mito_works) October 4, 2019

コーディングをするだけでなく、次回同じようなコーディングをするときに使えるようにBoostnoteにコードをメモしています。

mito

時間が経つとすぐ忘れてしまうので、すぐに参照できるメモをストックしていると時間の短縮になります！

DAY25. 『Q and Aをアコーディオンでコーディング』

#30DAYSトライアル
2nd DAY25：QAのアコーディオン
自分で意図的にmarginやpaddingを入れていなくても入っている場合が結構ある。px単位で意識して作っている気になるので、padding:0、margin:0、でリセットする方法よく使うようになりました。 pic.twitter.com/GnUCYYMzE1

— mito@ひよっこwebデザイナー (@mito_works) October 7, 2019

DAY26. 『モーダルを作る』

#30DAYSトライアル
2nd DAY26：モーダル画面
ゼロからとBootstrap使ったコーディング比較。
モーダル画面って、画面サイズ変わると収まらなくなったり、ズレたりするのでレスポンシブ対応がめんどくさいなと思っていて案の定ゼロからだとボタンずれまくりw。
Bootstrapを上手に活用しようと思う。 pic.twitter.com/apRosJwB2P

— mito@ひよっこwebデザイナー (@mito_works) October 9, 2019

Bootstrapの威力を感じました。
今後はコーディングするときにBootstrapを上手に活用して、コーディングを効率化しようと思いました。

10日間の気づき

脇道逸れると学びが増える！

このコードをbootstrapで書き直すとどうなるか？デザインや色味を変えるとどうか？動きをつけるとどうか？と色々試してみると、自分が知っている知識だけでは実現できないことがわかったり、使っているコードの理解が深まります。

Boostnoteがとても便利！

今までは、「あのときに使った書き方を参考にしよう」と思ったときに探すだけで一苦労でした。
Boostnoteに該当箇所だけ切り出してストックしておくと後々、参照がしやすく、便利です。

Bootstrapでレスポンシブのコーディングが楽になる！

やっとPCでの実装ができたと思っても、タブレットやスマホのレスポンシブ対応でつまずき、想像以上に時間を使ってしまうことが多々ありました。
Bootstrapをうまく活用し、PCを実装する段階からタブレットやスマホを意識した実装をしておくと、効率的です。

サイトの細かいパーツの実装方法が気になるようになる！

「この閉じるの×印、レスポンシブで画面幅が変わってもずれないのはどうやって実装しているのだろう？」や「ハンバーガーメニュー内の文字がシュッと出てくるアニメーションはどのように設定しているのだろう？」とコードベースで動きや要素が気になるようになりました。

シャドウ、グラデーションの実現方法が気になるようになる！

デザインの観点で、画像やボタンなどの外側のシャドウの入れ方、背景グラデーションの色味と角度などもコードベースで気になります。

mito

検証ツールをみる回数が増えました。自分でも使いたいと思ったものはBoostnoteにストックしています。

サイトを見たときにどの書き方の組み合わせかわかる機会が増える！

擬似要素を使って配置しているということや、flexを使っているなどどのようにコーディングされているか想像できる機会が増えました。

今後のスキルアップの方法

この10日間で基本的な実装方法は身についたのではないかと思います。

1. 「この書き方とこの書き方の組み合わせだ！」とわかるものについてはもっと早くコーディングできるように繰り返し使うようにする
2. 分からないものは覚えてストックしていく

momo

この二つを繰り返すのがいいね！

mito

しばらくは模写をして手持ちカードを増やしていきます。

今回は、XDでデザインされたサイトを模写して学んだことをまとめます。

使わせていただいたものはこちらです

Photoshop、Illustrator、XDからのコーディングに慣れよう！

作成したものはこちらです。

mito

こちらのコーディングでfloatを使う部分でつまずいたので実験を交えつつ、解説します！

floatを使った横並び方法

この部分の実装方法です。

mito

floatを使って実装しました。

 <div class="itemRow">
                <a href="#" class="item">
                    <div class="item-img">
                        <img src="./img/cat.jpg" alt="">
                    </div>
                    <div class="item-body">
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </a>
                <a href="#" class="item"> 
                    <div class="item-img">
                        <img src="./img/cat.jpg" alt="">
                    </div>
                    <div class="item-body">
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </a>
                <a href="#" class="item">
                    <div class="item-img">
                        <img src="./img/cat.jpg" alt="">
                    </div>
                    <div class="item-body">
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </a>
            
                <a href="#" class="item"> 
                    <div class="item-img">
                        <img src="./img/cat.jpg" alt="">
                    </div>
                    <div class="item-body">
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </a>
                <a href="#" class="item">
                    <div class="item-img">
                        <img src="./img/cat.jpg" alt="">
                    </div>
                    <div class="item-body">
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </a>
                <a href="#" class="item">
                    <div class="item-img">
                        <img src="./img/cat.jpg" alt="">
                    </div>
                    <div class="item-body">
                        <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </a> 
            </div>

.itemRow{       
        &:after{   
            content: '';
            display: block;
            clear: both;
        }
    }
    .item{
        margin: 0 50px 50px 0;
        padding: 20px 20px 10px 20px;
        width:360px;
        border-radius: 8px;
        box-shadow: 0 0 5px 0 rgba(17, 51, 72, 0.2);
        float: left;
        text-decoration: none;
        &:hover{
            opacity: 0.5;
        }
        &:nth-child(3n){
            margin-right: 0;
        }
    }
    .item-body{
        padding-top: 24px;
        color: #3c3c3c;
        line-height: 1.5;
        margin:0;
    }

実験１〜親に擬似要素を入れないとどうなるか？〜

以下の部分をコメントアウトします。

&:after{   
            content: '';
            display: block; //block要素
            clear: both;　//float解除
        }

すると、以下のように高さの設定がうまくいっておらず、下の要素と被って表示されます。

momo

親要素はもともと子要素の最下部に合わせて包み込む形で高さが決まるよ！でもfloatにより子要素が浮くので、包むものがなくなったと見なされて高さが保てなくなるんだよ。

擬似要素を作る＝親要素の最下部に新たにボックスを作ることで高さを保てるようになります。

mito

擬似要素でよく使われる、親要素にposition:relative,子要素にposition:absoluteと書いても高さは保てません。

positionは要素の位置を決める時に使うものなので今回はブロック要素で必然的に最下部に配置されるので不要です。

実験2〜子要素に一律右marginをつけるとどうなるか？〜

以下の部分をコメントアウトします。

&:nth-child(3n){
            margin-right: 0;
        }

横幅が足りず、折り返されてしまいます。

momo

nth-child(番号)を使うことで兄弟要素の中の1つだけ設定を変えることができるよ！

まとめ

横並び表示でfloatを使うポイントは2つです。

今回は、この見出しをどうやって作るかのご紹介です。

そもそも、これはコーディングのスキルアップのために挑戦している#30DAYSトライアルの課題の一つです。

mito

見た目簡単そうなのですが、難しかったので記録として残します。

HTMLの記述

        <div>
            <h1 class="pattern17">見出しパターン17</h1>
        </div>

SCSSの記述

.pattern17{
    position: relative;
    display: inline-block;
    &:after{
        z-index: -1;
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 20px;
        
        background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 10px,#e9f4ff 10px, #e9f4ff 17px);
        background: repeating-linear-gradient(-45deg, #cce7ff,#cce7ff 10px,#e9f4ff 10px, #e9f4ff 17px);
    }
}

以下1つ1つ解説していきます。

Sassについてはこちらの記事を参考にしてください。

https://mito-lab.com/coding-30days-2nd-7-8/

CSSのポイント解説

positionで要素の位置を決める

文字要素は親、ストライプは子という関係性でpositionの設定をします。

なくそう！positionわけわからん！の壁！

html,css初心者泣かせ（自分も泣いた）のpositionについて図解しました。#30DAYSトライアル pic.twitter.com/LG1pzOxU7N

— ちづみ (@098ra0209) January 22, 2019

擬似要素(after)を使い、ストライプの位置調整

文字要素とストライプ要素は親子という関係性ですが、親の後ろに子を並べたいので、
擬似要素:afterを使います。

momo

:afterを使うと要素の直後に要素もどき(擬似要素)が挿入されます。

z-indexの役割

mito

z-indexをつけずに書くと、ストライプが文字の上に重なってしまいます。

momo

z-indexを使うことで重なっている要素の順番を入れ替えることができるよ。

擬似要素(after)の装飾

以下のような設定に指定しています。

  background: repeating-linear-gradient(
            -45deg,　           /* 角度の指定*/
             #cce7ff,         /* 色1の開始*/
             #cce7ff 10px,  　/* 色1の終了*/
             #e9f4ff 10px, 　　/* 色2の開始*/
             #e9f4ff 17px)　　/* 色2の終了*/
             ;
        }

momo

角度の指定を変えることで、色々なストライプが作れるよ！

おまけ

背景をチェック柄にすることもできます。

HTML

        <div>
            <h1 class="check">チェック柄見出し<br>改行あり</h1>
        </div>

CSS

.check{
    display: inline-block;
    margin: 30px auto;
    background-color: #ffc;
    background-image: 
      /* 横ストライプ */
      repeating-linear-gradient(
        0deg,
        transparent,transparent 20px, /*透明*/
        rgba(36, 255, 109,0.5) 20px, rgba(36, 255, 109, 0.5) 40px, /*1色目*/
            transparent 40px, transparent 60px, /*透明*/
            rgba(36, 255, 200,0.5) 60px, rgba(36, 255, 200,0.5) 80px /*2色目*/
      ),
      /* 縦ストライプ */
      repeating-linear-gradient(
        90deg,
        transparent,transparent 20px,
        rgba(240, 255, 36, 0.945) 20px, rgba(240, 255, 36, 0.945) 40px,
            transparent 40px, transparent 60px,
            rgba(36, 255, 109,0.5) 60px, rgba(36, 255, 109,0.5) 80px
      )
    }