なんかHTML、CSSとかそこら辺に便利なサイト

なんか無料でもある程度のレベルは勉強できちゃう便利なサイトがあるようなんで使ってみているものを紹介して置こうかなと思う投稿
なお、サイトの画像とか貼ると見栄えが良くなるのはわかってるんだけど、勝手にスクショとったら危なそうだし?画像とか入れてドライブの容量食うじゃん?みたいな理由で文章だけの投稿となっております
これは手抜き。はっきりわかんだね

勉強に便利そうなサイト2つ

ドットインストール 
Progate 

HTML、CSSで便利やつ

CodePen
CSS三角形作成ツール
Ultimate CSS Gradient Generator
box-shadowとborder-radiusジェネレーター
Can I use …?

ドットインストール

動画で細かく区切られたレッスンを見て勉強できるサイト
1レッスンが2,3分と短く、「サクサク進める」、「区切りをつけやすい」印象
無料会員でもかなりの種類のレッスンが見られる

ブラウザを開いて動画を見ながら作業・確認をするとよさげ
ディスプレイが2個あると嬉しい(※個人の感想です)

Progate

勉強できるサイトだが、こちらは指示通りにソースコードを実際に書いて練習できるサイト
こいつはたまげたなあ
無料会員で受けられるレッスンもあるので、そのレベルで良かったら有償コンテンツにも手を出したらいいんじゃないですかね

有償は月額会員とかなんか見えたので時間のある学生のときに出会いたかった気持ち

 

上記2つ以外にもブラウザで見られちゃう便利な勉強サイトあったら試したい
時間が有ればね
どちらも学生のときに出会っていたかった…
基本情報でPHPが使えていれば受かっていたかもしれないのに!!

次、HTML、CSSに関して、前の仕事でも使っていた便利なサイトを挙げよう

Codepen

以前にも書いた気がするけどグローバル感が強いHTML+CSS+JavaScriptで何か作って紹介できるサイト
何がすごいって公開されてるものがすごい
プロかよ

流用したい気持ちがわくけど利用規約とか何処か有るのかな~英語だから読む気がね、ちょっと

CSS三角形作成ツール

サイト名のまんまだが、CSSで三角形を簡単に作れてソースを表示できるサイト
めちゃくちゃ便利なので頻繁に使う

シンプルな単色の三角形なら、わざわざ画像を作らなくてもこれで済む

Ultimate CSS Gradient Generator

お世話になってるCSSジェネレートサイトその2

backgroundのグラデーションを感覚的に作成できる超便利サイト
記述の暗記が面倒くさいので、ここで作成してコピーしてポン

優秀すぎるやろ(感嘆)
サイトメニューのボタンとかの背景とかにもよく使う

box-shadowとborder-radiusジェネレーター

これもcssのジェネレーター
ブロック要素の縁関係を視覚的に調整し、cssのコードを生成できる便利なやつ
・border(枠の色や太さ)
・border-radius(角を丸くする)
・box-shadow(箱の影)
を操作できる

Can I use …?

こちらはジェネレーターではない
CSSはブラウザによって使えたり使えなかったりするので、ここで見るとサポートの可否が一覧で表示される便利サイト

ブラウザでCSSが効かなかったりするのがあるので、ここでチェックする
特にInternet Explorer8とかいうwebコーダーの殺意を集めるブラウザ対策で重宝する

しかしながら、マイクロソフトさんがwindows10を推して過去のInternet Explorerを抹殺したことにより、サイト作成者は一気に楽になったのはありがたい話である

あーこういうページよくあるよね
貼っつけられそうなのあったら増やしますきっと多分

‘ω’)ノシ

さびしいから結構前のメタギアの動画貼っておくね

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください