Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
最近見かけるレイアウト・ナビゲーション・スライダー・フォームなどがどうやって実装されているのかのまとめ
Webページやスマホアプリで見かけるレイアウト、ナビゲーション、ボタン、スライダー、フォーム、タイムライン、ボタンなど、CSSを使って実装されたテクニックがまとめられたコンテンツを紹介します。 デザインのアイデアとして、またそれが実装可能かどうか、実装はどうやっているのか、何かあった時にチェックすると便利です。
初心者がプログラミング言語を最安最速で習得するなら『Udemy』がいいかも！って話 - wepli.2
僕は3、4年前までブラインドタッチすらできず、一本指打法でPCを操作していました。それが今では、『ふ～ん。javaScriptってこんな感じだよね～』（←知ったかですｗ）というところまで、頭がITの世の中に追いついてきました。僕は単なるブロガーなので、プログラミング言語の知識はさほど必要ありませんが、HTMLやCSSを理解するうえで、何冊か本を購入して色々と勉強してきました。 ただそれは、あまり効率が良い方法ではなく、無駄にお金だけがかかってしまう方法だということに気づいたのです。今では、何か新しいことを学ぶ時には『Udemy』というサービスを使うようにしています。本日は、様々な最先端知識を動画で分かりやすく学習できる『Udemy』というサービスをご紹介したいと思います。 『Udemy（ユーデミー）』とは？ 僕が『Udemy』で学んだこと！ なぜ僕は『Udemy』を使いはじめたのか？ 『U
【厳選】Webデザインのスキルをアップさせるために読んでおくべき参考書7冊 | フリーランスエンジニアの求人情報【AKKODiSフリーランス】
【厳選】Webデザインのスキルをアップさせるために読んでおくべき参考書7冊 世の中にはWebデザインに関する参考書が数多く刊行されており、Webデザインを学ぶ環境は十分すぎるほど整っています。Webデザインのスキルを向上させるために読んでもらいたい、オススメの参考書を7冊厳選してご紹介ます。 タイポグラフィの基本ルール－プロに学ぶ、一生枯れない永久不滅テクニック タイポグラフィを学ぶならこの一冊。 文字組みを美しく見せるための基礎知識からテクニックまで、分かりやすく教えてくれます。 本書を読んでタイポグラフィを理解すると、微調整によってフォントの見栄えが全然違うことに気づきます。 タイポグラフィはWebデザインを美しく見せるための必須のスキルです。 http://www.amazon.co.jp/gp/product/4797359226/ デザインのルール、レイアウトのセオリー シンメト
CSS 設計の長い夢 - ペパボのフロントエンドスタンダード
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい 代表的な CSS 設計手法 既存プロジェクトの CSS に立ち向かう！ (0) 流れ (1) 既存の CSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズ CSS や共通の箇所のスタイルを分離する (3) CSSLint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ
[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説
CSSでのフォントサイズの指定方法をその単位とそれぞれの相違から、レスポンシブに適したフォントサイズの指定方法までをやさしく解説します。 CSS Font Sizing 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 CSSでのフォントサイズの指定方法 各指定方法の特徴 レスポンシブに適したフォントサイズの指定方法 CSSでのフォントサイズの指定方法 CSSであなたがフォントのサイズを指定するには、いくつかの方法があります。大きく分けると、絶対値（absolute）と相対値（relative）の二つです。 絶対値（absolute） 絶対値はそのサイズが固定されており、その指定を受けたフォントはそのサイズで表示されます。これは他の要素に影響を受けません。 相対値（relative） 相対値はサイズ自体の値を持っていません。サイズは親要
![[CSS]フォントサイズの指定方法の基礎知識からレスポンシブに適した指定方法までやさしく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1756c6abf56af6fcc3bd951dc8836bd403779c8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060501.png)
CSSのみでフルスクリーンの動画背景を実装する方法 - NxWorld
ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのをJavaScript等は使用せずにCSSのみで実装する方法です。 古いIEなども対象ブラウザとなる場合は使用できませんが、モダンブラウザであればCSSのみで簡単に実装できます。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 <body> <video autoplay loop poster="img.jpg"> <source src="movie.mp4" type="video/mp4"> </video> </body> body { margin: 0; padding: 0; background: url(img.jpg) center center fixed no-repeat; } video { position: fixed; top: 0; left: 0; min-width:
Webデザイナーやフロントエンドが「独り立ち」できるビジネス向け技術書11選
作成：2015/05/25 更新：2018/11/18 Web制作 > 今後のWeb制作では受託だけじゃなくて販売できるレベルの商品を作りたい。上から指示された分業だけでなく、一人でも一貫して制作できる技術を知っておきたい。 実際にどういった本がおすすめ？と聞かれることも多いので、会社と自宅に常備してあり、実際に筆者がサイト構築する際に参考にした本を中心に書いておきます。今回は多くの書籍の中から特にビジネスで使えそうなものを絞りに絞ってピックアップしました。少人数での起業や一人でサービスを開発したい人に。 エンジニア速報は Twitter の@commteで配信しています。 もくじ フルスタックエンジニア（入門編） webエンジニアの教科書 フロントエンドエンジニアの教科書 HTML5 インタラクティブ表現ガイド CSS3 逆引きデザインレシピ WordPress （ビジネス向け） Wor
美しいグラデーションをCSSで実装！配色に使える便利ツールや実例も！
2020年5月18日 CSS, Webデザイン, 便利ツール 背景に動画を使ったWebサイトや、大きな背景画像を使ったWebサイトに続き、最近は画面全体にきれいなグラデーションカラーを用いたサイトを見かける機会が増えてきました。そこで今回はグラデーションカラーをCSSで実装する基本的な方法から、画像に重ねる応用、配色選びに使えるサイト、実例集などを紹介します！ ↑私が10年以上利用している会計ソフト！ CSSでグラデーションを実装 グラデーションは background プロパティーに linear-gradient の値を使って色を指定します。意外と簡単。 body { background: linear-gradient(#05FBFF, #1E00FF); } See the Pen CSS linear-gradient by Mana (@manabox) on CodePen
Web制作者はチェックしておきたい、面白いアイデアを使った最近のWebサイトのまとめ -2015年2月
トレンドをうまく取り入れ、デザインの細部まで徹底的にこだわり、気持ちのいいインタラクションとアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。 時間のある時に、じっくり楽しんでください！
知らないと人生損してる！デザイナーのための必見ブログまとめ
はてブたくさんついちゃいました(・∀・) お久しぶりの意匠子です。 先日のHTML５に関する記事がとんでもないブクマ数ついちゃいました。 今の世の中はHTML5旋風吹き荒れてますね！ このような最新情報を集めるのもデザイナーの大事なお仕事！ そこで今回は知らないと人生を損しているであろうデザイナー必見のサイトをまとめました！ 続きをどうぞ！ まずは鉄板サイトから！！ Webクリエイターボックス チュートリアル系の記事が豊富。 まぁWebデザイナーはほぼ100%見てるいると思って間違いなし。 コリス Webデザイナーやマークアップエンジニアで、 このサイトを知らないのはモグリと思われてしまうくらい有名なサイト。 CSS3やJavaScriptの話題が豊富。ちなみに某りすこさんとは関係ありません。 ホームページを作る人のネタ帳 Webデザインを学ぶ人はみんな一度は見たことがあるぐらい有名なネタ
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web制作者が備えておきたい最新版チートシートのまとめ、CSS3 Flexbox, CSSアニメーション, jQuery3, ES6, Bootstrap4など
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
まだ中央寄せで消耗してるの？ - @yoshiko_pg
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ
CSS Reference | Codrops
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP