css3 モダンリセットCSSのress.css
css3/* ress.css • v1.2.2 * MIT License * github.com/filipelinhares/ress */html{box-sizing:border-box;-webkit-text-size-a...
css3
css3 css3 SVGとCSSを使ったアニメーション
css3carlphilippebrenner.comtympanus.netgardenstudio.com.brjakearchibald.comSVGとは？SVG【 ScalableVectorGraphics 】とは、XMLベースの...
css3 CSSで変数が使えるカスタムプロパティ
css3cssで変数というとSASSやLESSといったcssを拡張したメタ言語が一般的ですが、最近ではcssのみでも変数を使う事が出来ます。SASSやLESSと比べると、出来る事は少ないですが、cssファイルに直接記述する事が出来、非常に簡...
css3 cssプラグインを使ってハンバーガーメニューを作る
css3jQuery前回の授業では擬似要素（before・after）を使ってハンバーガーメニューの3本線を作りましたが、スニペットを使う事で簡単に作る事が出来ます。jonsuh.comアイコンの切り替えはjQueryでclass「is-a...
css3 縦書きとrubyタグの使い方
css3「webは横書きが当たり前」そんな常識は変化しつつあります。実はwebにおける縦書きの取り組みは、Internet Explorer5.5(2000年)が独自に実装していましたが、他のブラウザーでは実装されていませんでした。CSS3...
css3 @font-faceを使ったWebフォントの使い方
css3webフォントには大きく分けて２種類の使い方があります。1つはGoogleFontのようにネット上にあるCDNを使うパターンです。今回は、もう1つの、「自身でフォントデータをサーバーにアップする」方法をやってみましょう。こちらの方法...
css3 CSS3によるアニメーション・animation
css3CSS3によるアニメーションは大きく分けて、トランジション（transition）とアニメーション（animation）の２つに別ける事が出来ます。CSS3におけるトランジション（transition）とアニメーション（animat...
css3 カンプ作成の練習
css3webサイト制作１、cssファイルは外部リンクでリンクさせ、適切なリセットをかける事２、ロゴ画像をSVG形式で作成し、h1の背景画像で表示。この際、h1のテキストはcssで隠すように。３、webアイコン（FontAwesome）を使...
css3 Flexboxの使い方
css3レスポンシブデザインFlexbox（Flexible Box Layout Module）はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった...
css3 高解像度ディスプレイへの対応
レスポンシブデザインcss3RetinaディスプレイRetinaディスプレイの特徴は画面解像度の高さにある。iPhone 4の画面サイズは前モデルのiPhone 3GSと同じ3.5インチのままであるが、Retinaディスプレイの搭載によって...