新米ブロガー：ブログをもっとかっこよくしたい。やっぱりプログラミングを勉強した方がいいのかな？
こんな悩みにお答えします。
先日、このようなツイートをしました。
プログラミング学習15日目。今日は自分のブログデザインに注力しましたが、かなり非効率的だということに気づきました。理由は人の作ったサイトは、構造を理解するのに時間がかかるから。目的なしに多読しているのと同じ。サイト模写をやってアウトプットの練習をしないと、プログラミングは伸びない。— 佐藤マモル＠ハッピーお父さん (@happypapasan) March 20, 2019
プログラミング学習15日目。今日は自分のブログデザインに注力しましたが、かなり非効率的だということに気づきました。理由は人の作ったサイトは、構造を理解するのに時間がかかるから。目的なしに多読しているのと同じ。サイト模写をやってアウトプットの練習をしないと、プログラミングは伸びない。
私は現在ブログ歴3ヶ月ですが、bloggerという無料ブログで記事を書いています。bloggerは日本で利用している人が少なく、日本語に適したテンプレートが少ないため、必然的に自分でサイトデザインを改良していく必要があります。
そのため、私もHTMLとCSSなどWeb系のプログラミング言語を勉強して、サイト模写で修行中です。最初はブログ記事のデザインにこだわっていたんですが、これをやっててもプログラミング能力はあまり伸びない、というか、かなり非効率ということが実感できたので、新米ブロガーとプログラミング初心者向けに記事を書きました。
結論から言うと、プログラミング学習をしたいなら、サイト模写で修行せよ！
ブログデザインをかっこ良くしたいなら、コピペでOK！
です。
この記事を読んでわかること
- ブログデザインは基本コピペで完結できる
- ブログデザインに必要な知識はこれだけ
- プログラミング学習の真髄はサイト模写
ブログデザインは基本コピペで完結できる
結論から言うと、記事にマーカーを引いたり、色を変えたりする方法はコードのコピペで完結できます。そんなの嫌だ、ちゃんと理解したい。と言う方はドットインストールやテックアカデミーの動画でHTMLとCSSをさらっと学習する方がいいかもしれません。基本を学ぶだけでしたら、1〜2時間あれば十分で、これだけでブログデザインはCSSコードのコピペで完結できる理由がなんとなく理解できるかと思います。
パソコンにAtomなどのテキストエディタがあると理解しやすいですが、なくても平気です。プログラミングは実際に動画を1〜2回みると理解が深まります。
静止画でマイペースに勉強したい方は、サルワカさんのサイトでコピペOKのCSSコードが公開されているのでこちらが参考になると思います。
テキストエディタで実際にプログラミングに触れてみたいという方は、こちらの記事もご覧ください。>>おすすめテキストエディタ
ブログデザインに必要な知識はこれだけ
マーカーや文字の色を変えたり、まとめを作ったりするコードは"CSS"と呼ばれるファイルに書きます。これは一度書いたらOKで、CSSのデザインを呼び出すのがHTMLです。
例えば、マーカーを引きたい場合、CSSファイルに以下のコードをコピーします。
.under {
background: linear-gradient(transparent 50%, #ff99ab 50%);
}
注意点としては、きちんと.(ドット）から}までコピーするようにしてください。
次にブログ記事でマーカーを引きたい箇所を次のようにHTMLコードで挟みます。
<span class="under">マーカーを引きたい箇所</span>
するとマーカーを引きたい箇所にアンダーラインを引くことができます。
CSSに記載した50%という箇所を70％に変えることでラインの太さを変えることもできます。
他にも、文字と文字の幅や、行間を広くしたい場合などもCSSコードをいじることになります。詳しくは、サルワカさんのサイトがよくまとまっていて、参考になると思います。
プログラミング学習の真髄はサイト模写
ただ、ブログ記事のデザインを勉強したいだけなら上記までの動画や、サイトを見て自分のブログのCSSをいじれば十分です。さらに進んで、自分でサイトを立ち上げたいなどの目標がある場合は、最終的にサイト模写をすることをお勧めしています。
理由としては、サイトのデザインはかなり多様でして、同じデザインでも人によって作り方が違ってきます。なので、自分のブログのコードを見ても何のことやらさっぱりで、一から作り直した方が早いと感じるほど、かなり非効率な勉強法になってしまいます。
じゃあどうすれば？となりますが、今だとサイト模写に行き着くまでの勉強法をmanablogさんが公開していますので、こちらを参考にしてください。
簡単に説明すると、
- ①HTML &CSSの動画を見る
- ②有用なサイトを見る
- ③フレームワークを理解する（動画）
- ④サイト模写をする
上記のような流れになっていて、④に行き着くまでは人にもよりますが、私の場合は12時間ほどでした。注意点としては、必ず手を動かして見る、動画2回を限度にして見る。完璧に理解できなくても進んで良い。といった感じで進んでいくといいかと思います。
完璧に理解しなくていい理由としては、プログラミング言語は使わないとすぐ忘れてしまうからです。簡単に理解して、いつでもググれば探せるレベルを目指して進めれば、実際困らないですし、挫折しないコツかと思います。
今回は以上のような感じで今回は終わりです。
プログラミング学習は手を動かさないと、本当にすぐに忘れてしまいます。
ブログデザインは割り切ってHTMLとCSSを理解すればOKで、サイトを作りたいという目標がある人は、サイト模写を目指して学習するのが良いかと思います。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。