
WEB
HTML/CSSお役立ちリンク集
WEBサイトを制作しているときにタグやCSSプロパティの書き方に迷うことが良くあります。
膨大な種類のタグを全部覚えるなんてまず不可能ですから、まとめてくださっているサイトは非常に助かります。
まずは基本
コーダーならだれでもお世話になる。知らない人はおそらくいないリファレンス集 HTMLクイックリファレンス
要素の親子関係に困ったら「入れ子チートシート」
タグの親子関係なんていちいち覚えていられない。
これってブロックだっけ?インラインだっけ?このタグの中って何入れれるんだっけ?
迷うことありますよね。
吉川ウェブさんの入れ子チートシートならクリック一発で一覧できるから非常に便利。
日ごろからお世話になっております。m(__)m
吉川ウェブ|HTML5入れ子シート
classやidを増やしたくない「cssセレクター一覧」
タグのセレクターにも色々あって、いざ使おうと思ったときにどう書くんだっけ?というのはよくある現象。
隣接する要素、次に出てくる要素、〇番目の要素などなど種類が豊富にあるセレクターの書き方を全部覚えるのは大変です。
セレクターの書き方を一覧化してくれているのでとても便利です。
webpark|意外と知らない!?CSSセレクタ20個のおさらい
画像作るの面倒いなぁ。。「cssフィルター一覧」
css3になって効果の種類も増えました。わざわざ画像を用意しなくてもcssのfilterでできてしまうこともあります。
でもやっぱり書き方を覚えてないですよね。
各種フィルター効果の使い方を詳しく解説してくれています。
WPJ|Photoshopはもういらない?明度も彩度も超手軽に変えられるCSSフィルターがスゴい
グラデーションを使うなら「生成ツール」が便利
CSSでグラデーションを表現したいとき、いちいちカラーコードを調べて、%を考えて調整して・・・
なんて面倒過ぎて死にます。
生成ツールを使えばチョー簡単。時短にもなりますよ。
CSSGradient
横に並べたいなら「Flexboxチートシート」
要素を横並びにするときよく使うのがfloatですが、floatさせると高さを取ってくれなかったり、レスポンシブ対応のデザインだとなかなか思い通りになってくれなかったりと、意外と使用が難しいプロパティですよね。
僕は最近、よくflexを使います。
親要素に設定するだけで内包する要素をいい感じに並べてくれるので便利で簡単。
書き方もいろいろあるのでチートシートがあると非常に助かります。
クリエイターズボックス|CSS Flexboxのチートシートを作ったので配布します
要素をグリッドで並べたい「gridチートシート」
要素をグリッド状に並べたい。でも、表じゃないからtableは使いたくない。
そんな時どうしてますか?僕はよくgridを使います。
一部のブラウザでサポートされていなかったり、記述の仕方が違うようですが、gridなら結構自由度の高いカスタマイズが可能です。
Qiita|CSS Grid Layout を極める!(基礎編)
「上下中央揃え」ってどうやるんだっけ?
横幅のコントロールは結構単純ですが、高さを取るのが意外と難しいHTML。
要素を上下中央に配置するのはちょっと特殊なつくり方をしないといけないのが面倒な部分ですね。 GRANFAIRS|CSSで要素を上下や左右から中央寄せする7つの方法
書いた構文が正しいのかチェック「Vallidation Service」
構文の書き方でSEOにも影響が出るので、できるだけルールに準拠したHTML/cssを書きたいものです。
公開する前にバリデーションでチェックしましょうね。 W3C|Markup Vallidation Service W3C|css Vallidation Service
関連記事
もっと見る技術備忘録 でよく読まれている記事
-
デザイン
アプリの画面デザインで最低限知っておかないと恥ずかしい基礎知識
ソーシャルゲーム開発ではスマホの画面デザインしかしないので ただひたすらスマホアプリの開発ばかりしていると、基本的なデザインの知識から取り残されていくと感じることが結構あります。 今一度、確認のために「アプリの画面デザインの基礎知識」をまとめておこうと思います。 基本的にはWEBに関係……
-
Unity
Unityで画像を綺麗に表示させたい
Unityによるゲーム開発においてデザイナーの悩みの種の一つが画像の容量をいかに抑えながらリッチなUIを目指せるかです。 画像の圧縮技術やアトラスの持ち方などは開発会社によって異り、各々独自に考案した技術を用いているのが現状のようですが、 Unityがもともと持っている画像圧縮技術があま……
-
日本のソシャゲが終わる日
-
Unity組み込みはデザイナーの仕事なのか?
-
デザインに必要なことは全て漫画から学んだ