CSS3

本日の教材動画はこちら いままで当たり前のように使ってましたが、今回は背景の指定について深く掘り下げて勉強していきます。 背景の指定方法のあれこれ 背景プロパティには色々な指定をかけることができます。下記に代表的なものをいくつか記載しました。残りは参照サイトをみてみてくださいませ。 background … 背景の指定をまとめて行う場合に使う。ショートハンド。 background-color … 背景の色を指定する（※1） background-image … 背景の画像を指定する（※2） background-size … 背景の大きさを指定する ※1 色は「色名」「10進数」「16進数」…

以前横並びにはFlexだけど、まだまだFloatも使うというような記事を書きました。 とはいえ便利なFlex、活用していきましょう。 Flexで横並び・縦並び配置を完全制覇すればレイアウトに関するコーディングレベルはぐっと上がると思います。 今回は「display; flex;」の使い方の基本のご説明から各プロパティ使用まとめも記載しています。 是非ご参考ください！

CSSのフレックスコンテナについて フレックスコンテナとは? フレキシブルレイアウトモジュール flex-direction flex-wrap flex-flow order flex-basis flex-shrink flex-grow flex コードサンプル 最後に CSSのフレックスコンテナについて CSSで横並び要素を設定する方法を探していた最中、「フレックスコンテナ」というものを見つけました。 どうやらCSS3で新たに実装されたものらしく、こちらを使えばさながらBootstrapのグリットレイアウトの様な機能を実装可能…になるっぽいです！ これは調べてみないと…というわけでちょ…

本日の教材動画はこちら before と after について before は直前、after は直後を示す擬似要素です。使い方は〇〇：：before（又はafter）｛content：”表示させたい内容”；｝となります。前回同様今回もダブルコロンなので注意。一応コロン１こでもいけるようです。（どうも：はCSS2、：：はCSS3対応みたいです） もちろん文字以外にもスタイルの適応も可能。その場合はcontent：”内容”；の後ろにいつも通りCSSを追加していけばOKです。内容は文字だけでなく画像も指定可能。 その場合はcontent：url(アドレス)； となります。文字挿入せず何かしらのス…

etter-spacing 文字間の隙間を指定するプロパティです。負の値も指定することができます。 初期値はブラウザやフォントに応じた通常の文字間隔が使用されます。 用例 .sample {letter-spacing: 2px;} ※長さ(letter-spacingの後ろの数値)は数値+単位で指定します。単位はpx(ピクセル)、%(パーセント)、pt(ポイント)、em(エム)、（これ以降検証必要）in(インチ)、mm(ミリメートル)、pc(パイカ)等になります。 CSS3以降は新しい単位が追加されるそうです。(今回は使用しておりませんので、解説しておりません。) 簡単に単位の解説を書きます…

前回パート1から引き続きのコーディングの思考の流れを具体的に言語化して実践していく記事です。 ▼#1からご覧になられる方はこちらからどうぞ。 webabc.hatenablog.jp 模写コーディングにつまづく方向けに、より簡単なサンプルサイトデザインを作成しました。 そのサイトデザインの画像データを元に、実際にどういった思考の流れでコーディングしていくかを解説していきまず。 入門者の方で、特に「自分で何をどうコーディングしたらいいかさっぱり分からない」という方向けの非常に易しい記事になってますので、高度な事を期待される方はご容赦ください。 では、やっていきましょう。

以前、模写コーディング以上に簡単な練習用のデザインを作成し、記事にて公開しました。 webabc.hatenablog.jp webabc.hatenablog.jp 今回はこちらのデザイン画像から、実際にどういった思考の流れでコーディングしていくかを解説していきたいと思います。 入門者の方で、特に「自分で何をどうコーディングしたらいいかさっぱり分からない」という方向けの非常に易しい記事になっているかと思います。 高度な事を期待される方はご容赦ください。 模写含め、コーディングのやり方など最初の一歩につまづく方のお役に立てば幸いです。 では、やっていきましょう。

jQueryの「animate()」メソッドは、特定のHTML要素のCSSプロパティを連続して変化させることでアニメーションにする事が出来ます。 基本構文の書き方 対象要素.animate( CSSプロパティ, duration, easing, 関数 ) cssプロパティのみの場合 $('h1').animate({fontSize: 100}); duration, easingも指定した場合 $('h1').animate({fontSize: 80}, 2000, 'swing'); easingについて jQueryの「animate()」メソッドには ・swing（初期値：始めはゆ…

こんにちは、東京で生活している20歳の大学生です。 ―――――――著者：鬼澤龍平さまブログ：おにちゃん塾―――――――本日は、お金を稼ぎたいと思う大学生に向けて『おすすめの副業』を紹介していきます。 本記事は、現役大学生の実体験をベースにしているのでかなり有益な情報になっています。 それでは、早速本文に入っていきましょう。 なぜ大学生は副業を始めるべきなのか 大学生におすすめの副業①プログラミング 大学生におすすめの副業②WEBライター 大学生におすすめの副業③ブログ まとめ：怪しいものには手を出さず、真っ当な副業をせよ なぜ大学生は副業を始めるべきなのか 大学生におすすめの副業を解説する前に…

▼前回コーディング練習用のシンプルなPCサイトデザインテンプレートの公開記事を書きました。 webabc.hatenablog.jp 今回はそれに引き続き、そのデザインをレスポンシブでスマホ対応させたテンプレートを作りましたのでご紹介したいと思います。 よくある模写コーディングにおすすめのサイト以上に構造がシンプルになっていますので、是非Webデザイン入門、コーディング初心者の方のスキルアップにご活用頂ければと思います。

このところWebデザイン入門用の記事を多く書いてきました。 模写コーディングの超初級サイト3選記事など、厳選してみて思ったのが、もっと入門用に最適なサイトはないかという事。 シンプルでミニマルかつ、自然と頻出タグなどが身につくようなサイト。。。 ▼なるべく入門者に適したサイトをピックアップした記事です。 webabc.hatenablog.jp 探してみましたがご紹介したサイト以上のものはなかなかありませんでした。 そこで、無ければ作ってしまおうと。 今回はWebデザイン入門に最適なコーディング練習用のサイトデザインテンプレートを作成してみましたので、ご紹介します。 是非練習用にお役に立てれば…

carlphilippebrenner.comtympanus.netgardenstudio.com.brjakearchibald.com SVGとは？ SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。 ベクター画像は画像をビットマップ形式ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。 SVGではアニメーション機能などもサポートしており、Flashで行えるような簡単なインタラクティブコンテンツの作成が可能となっている。 SVGファイルはAdob…

前回、模写コーディングおすすめサイトを初心者向けのレベルを目安に3サイト＋αご紹介しました。 ▼なるべくボリューム少なく、コーディングの難易度がシンプルなものをチョイスしておりますので初めて模写挑戦するという方にはご参考頂きたいと思います。 webabc.hatenablog.jp ただそれでも初挑戦するような方はやり方が分からないという人も多いと思います。 今回は模写コーディングをする上で役に立つ、必須ともいえるGoogleChromeの拡張機能を紹介させて頂きます。 これから模写コーディングに初挑戦するという方、行き詰ってる方のお役に立てれば幸いです。 ではやっていきましょう。

WEB副業だけで月収30万円近く稼いでる大学生やけど質問ある？ 先月だと稼働97時間、月収31万円だったから時給換算だと3200円ぐらいか……… なにしとるん？ >>2WordPress案件WordPressの前はランディングページ作成や。レスポンシブ対応のな >>4言語なにができるん？ >>10html5/css3bootstrapjavascriptjqueryPHPmysqlWordPress言語というかスキルセットはこんな感じ >>24今のレベルまでなるのにどれくらい掛かった？ >>28毎日4時間勉強やって1ヶ月程度で全部のスキルセット身につけたから大体120時間ぐらい？ >>54たっ…