Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など | コリス

2016/11/15 556 users コリス Flexbox セレクタ コーディング CSS

CSS3のFlexboxをはじめ、CSSアニメーション、CSSのセレクタ、jQuery3, ES6, Bootstrap4など、フロントエンドのマークアップやコーディングに役立つチートシートを紹介します。 ブックマークし ...記事の続きを読む 続きを読む

CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 - ICS MEDIA

2016/08/22 945 users float Flexbox ICS MEDIA CSS 主流

ICS MEDIA Web制作 2016/08/22 CSSレイアウトにfloatはもう古い！ Webデザイナー初心者でも始められるFlexbox入門 « Prev ボックス要素の横並びをCSSで行う場合、これまでは float プロパティを使うのが主流でした。しかし、 CSS3の新機能「Flexbox」を使うと float よりも簡潔なコードで、ボックスの豊富なレイアウトが可能です 。本記事では... 続きを読む

HTML/CSSで実装できる！今どきデザインのホバーエフェクト30個まとめ - PhotoshopVIP

2016/03/15 541 users ホバーエフェクト PhotoshopVIP コピペ CSS

ウェブサイトを魅力的に仕上げるだけでなく、ユーザーの注目を集めることができる、アニメーション・エフェクト。今回は、サイトコンテンツ表示に活用できる、 HTML/CSSのみで実装できるホバーエフェクト をまとめています。 CSS3 を駆使したスタイリングは、コピペで利用することもでき、他と差のつくデザインエフェクトを、手軽に実現することができます。そのままコードを編集し、動作を確認することもできるの... 続きを読む

CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | phiary

2015/11/04 639 users padding border phiary height 原因

今回は CSS3 から box-sizing について紹介します. width や height と同時に border や padding を指定しているときに, 少し値を変えただけで意図しない表示になったりレイアウトが崩れたという経験はありませんか？ これはボックスサイズの算出方法が複雑なのが原因です. そんな面倒な問題を解決してくれるのが box-sizing プロパティです!! box-s... 続きを読む

無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ | コリス

2015/05/15 547 users ポートフォリオ かっこいいエフェクト 縦長ページ コリス 無料

レスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 単に使うだけでなく、デザインやHT...記事の続きを読む 続きを読む

最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス

2015/04/23 612 users コリス Flexbox ヴィジュアル ドラフト 各プロパティ

Flexboxとは、要素のサイズが不明なものでもダイナミックに変化するものでも柔軟なレイアウトを実現できるCSS3の新しいレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説した「CSS3 Flexbox ヴィジュアルガ... 続きを読む

初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 - paiza開発日誌

2015/03/26 848 users paiza開発日誌 谷口 CSS HTML HTML5

2015-03-26 初心者でもほぼ無料でHTML5/CSS3を勉強できるコンテンツ9選 Photo by Jeff Golenski こんにちは。谷口がお送りします。HTML、CSSを習得して「Webサイトを作ってみたいけどどうしたらいいんだろう……」「自分のブログを豪華にしてみたいんだけど、HTMLっていまいちよく分からない……」等と思っている方は多いのではないかと思います。HTMLとは、We... 続きを読む

保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた

2015/02/04 523 users アニメーション table-cell 保存版 display

この擬似クラスを使うことにより3番目のli要素にわざわざ別のクラスを付けなくても独自のスタイルを適応することができるので、運用性の向上が図れます。 ▼記事リンク Useful :nth-child Recipes | CSS-Tricks 要素を均等に横並び CSS3の「display:table-cell」は要素を均等に横並びにすることができます。「float」でも要素を横並びに出来ますが、横幅... 続きを読む

無料でしかも高品質！1ページで構成されたサイトを作るためのHTML5/CSS3のテンプレートのまとめ | コリス

2014/12/01 613 users エフェクト レスポンシブ対応 コリス 勉強 デザイン

ページのデザインだけでなく、使用されているエフェクトも面白いものが揃っているレスポンシブ対応のHTML5/CSS3のテンプレートを紹介します。 単に使うだけでなく、HTML5/CSS3の勉強、デザインの勉強にもいいですね...記事の続きを読む 続きを読む

Web制作者は要ブックマーク！制作時にいろいろと役立つ便利サイトのまとめ | コリス

2014/09/12 511 users Bootstrap コリス Foundation ライセンス

Web制作時に、あれ？なんだっけな？って時に役立つ便利サイトを紹介します。 HTML5やCSS3の各ブラウザのバージョンごとのサポート状況、スクリーンサイズやデバイスごとのMedia Queriesの書き方、Bootstrap, Foundationなど各フレームワークの対応ブラウザやライセンス、ブラウザの各バージョンごとのCSS Hackなど、いざという時に役立つサイトばかりです。 Can I ... 続きを読む

HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) - ＠IT

2014/03/19 1069 users Bootstrap サンプルアプリケーション API 概要

HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介... 続きを読む

HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと

2014/01/26 1012 users Rails 備忘 コーディング Ruby フロントエンド

HTML5&CSS3&フロントエンド 何度も読み直したい資料・ツールまとめ Jan 26th, 2014 Tweet HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、幾つか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘... 続きを読む

2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ | コリス

2014/01/20 618 users レスポンシブ コリス ウェブデザイン 切り口 共感

数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大き... 続きを読む

弊社デザイナーがJavaScriptを習得するために行ったただ1つのこと | FICC KYOTO BLOG

2014/01/14 554 users コーディング Blog サーバサイド開発 弊社デザイナー 実装

最近、JavaScript(以下、JS)やCSS3を使ったリッチなサイトの実装を求められることが増えてきました。また、JSはサーバサイド開発、スマートフォンアプリ開発などにも利用範囲を広げていることもあり、Web制作に関わる全ての人の習得しておきたい言語のひとつになってきています。 弊社の多くのデザイナーはJSを習得しており、デザインからコーディング、JS実装まで全て行うデザイナーも少なくありませ... 続きを読む

知っておくと速い！CSS3に関する「便利」なまとめ | コムテブログ

2013/11/25 642 users コムテブログ まとめ

先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。 もくじ 知っておきたいプロパティ １．カウント数を出力 ２．要素の前後に文字や画像 ３．カーニング ４．画像フィルタ ５．均等幅にレイア... 続きを読む

●●っぽい表現ができる「CSS3」サンプル集 | Find Job ! Startup

2013/10/29 602 users イシジマミキ Startup 見出し Webフォント 流行

こんにちわ！ザ・マーズナレッジという会社をやっている、デザイナーのイシジマミキです。 Webフォントの充実、スマートフォンの流行、そしてCSS3の表現力アップにより、画像を使わなくても凝った表現の見出しが作れるようになりました。 どんなデザインがあるのか。海外のサイトを調べるとたくさん出てきますが日本語だとあまりカッコ良く見えなかったりもします。そこで今回は、日本語書体で使えるCSS3のコードサン... 続きを読む

アイデアの宝庫！CSS3を使ったUI表現・テクニック集 - W3Q

2013/10/03 501 users 宝庫 UI表現 MENU テクニック集 W3Q

アイデアの宝庫！CSS3を使ったUI表現・テクニック集 CSS3を使ったUIアイデア集 / circular links menu / CSS SWITCH他...全12件 続きを読む

hr要素のデザインサンプル 12 | NxWorld

2013/09/12 698 users 罫線 備忘録 NxWorld 見栄え CSS

hr要素は罫線を表示させるもので、話題を変える時の目印となる区切り線などとして用いられます。どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 以下で紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません... 続きを読む

IE対応のバッド・プラクティス「Polyfill」の危険性 | Webamb | ウェブアンブ

2013/07/16 591 users Webamb Polyfill クライアントワーク IE対応

IE対応のバッド・プラクティス「Polyfill」の危険性 今日は、今話題？のPolyfillがどれだけ微妙なのかという点と、実装格差のあるブラウザ間の、実装における現状のトレンドを書きたいと思います。 Polyfillとは 現在、HTML5やCSS3など新しい技術が一般化し、実際のクライアントワークでも利用されることが増えてきました。しかし、IEの古いバージョンでは、利用されることの多いHTML... 続きを読む

制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現 - W3Q - Web制作者のお悩み解決サイト

2013/07/12 614 users アニメーション表現 制作案件 W3Q WEB制作者 解決サイト

制作案件に使えば注目度アップ！CSS3を使った驚きのアニメーション表現 一般的なサイト制作案件では、過度なアニメーション... / CSS3を使ったアニメーション表現 / Simple Icon Hover Effect...他...全10件 続きを読む

今こそ未来！CSS3のFlexboxを基本から理解して、使い倒そう！ | 株式会社LIG

2013/04/30 877 users Flexbox 初耳 レスポンシブデザイン 昨今 デモ

こんにちは、王です、デザイナーやってます。 「これからの時代はFlexboxだ！」 ということで短い動画を用意しておきましたので、初耳の方、ざっと「Flexboxで何が出来るか？」が分かるかと思います。 動画の中で使ってたデモをこちらにアップしたので、実際に確認してみたい方ご自由に。 PC、タブレット、スマホ…デジタルデバイスサイズの多様化で、昨今ではレスポンシブデザインとやらが流行っています。同... 続きを読む

CSS脱初心者への道！疑似クラスと疑似要素を理解すると表現が広がるよ！*frasm

2013/03/28 1566 users ブロネク コト frasm 次回 かなり

疑似クラスって便利なの。 ほんと、便利なんですよ。 ぶっちゃけCSS3って最高やな！と思うんですが、ある意味それ以上に疑似クラスって奴を理解して使えるようになると、今までイライラしてたこととか、やりたかったコトとかが可能になるんですよね。 次回のブロネクがブログの見た目デザインについてなので、それに引っかけて、疑似クラス・疑似要素を理解しちゃうと、かなり捗るし、いろいろ表現が増えますので、ちこっと... 続きを読む

jQuery×HTML5×CSS3を真面目に勉強（1）：パララックスエフェクトの基本 (1/4) - ＠IT

2013/03/22 524 users パララックスエフェクト jQuery クラスメソッド 山田

jQueryをメインにHTML5やCSS3を使ったリッチな表現のためのテクニックを紹介。まずはパララックスエフェクトの基本から。 Webサイトの55％で利用されているjQuery はじめまして。クラスメソッドのフロントエンドエンジニア、山田です。「jQuery×HTML5×CSS3を真面目に勉強」という連載をスタートします。 2005年2月にGoogle mapsが登場して以来、Web開発者の間で... 続きを読む

コピペでできる！CSS3の素敵効果でテキストリンクを装飾する小技あれこれ | Webクリエイターボックス

2013/01/29 539 users コピペ エフェクト 目次 Webクリエイターボックス マウス

どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景... 続きを読む

知らない人は遅れてる？新Zen-Coding Emmet

2012/10/11 529 users Emmet Zen-Coding HTMLコーダー HTML

頭の中のページ構成図をリズムで書いてHTMLに展開してくれるZen-Coding。 もはやHTMLコーダーで使っていない人はいないであろうZen-CodingがHTML5/CSS3の広まりと共にEmmetという名前に変更し、進化をとげているようです。 まだ開発中で公式アナウンスはまだのようですが先行して試すことが可能です。 Zen-Codingおさらい Zen-Codingは経験済みとして話します... 続きを読む