CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
WordPressの優良プラグイン50選、最初にインストールしておくと超便利！
WordPress（ワードプレス）を利用してブログを運営する際に役立つプラグインを紹介します。 プラグインはWordPressの機能を拡張する役割があります。 プラグインを上手く活用すると、ブログの機能を増やして、ブログの運営を効率化できます。 ブログ運営に役立つ便利なプラグインが沢山あります。 あなたのブログに導入するプラグインを選ぶ際に参考にして下さい。 WordPressの便利なプラグインをあなたも活用しましょう。 この記事を読むと得られること はじめに プラグインとは？ WordPress（ワードプレス）のプラグインは、 機能を拡張する役割があります。 初期状態は、シンプルな機能しか用意されていませんが、 プラグインを利用することで、様々な機能を拡張できます。 便利なプラグインは沢山あります。 この記事では便利なプラグインを紹介しています。 あなたのブログで利用するプラグインを選ぶ
レスポンシブWEBデザイン用ナビゲーション＆メニューのベストパターン16 | co-jin
レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブWEBデザインに関連するさまざまなパーツが類型化・体系化されてきています。 今回ご紹介するナビゲーション＆メニューについても、ある程度、メジャーなパターンというものが出来上がってきています。 そこで今回は、レスポンシブWEBデザインのナビゲーション＆メニューのベストパターンをご紹介します。 多くのものはjQueryを使って簡単にだれでも実装できるものばかりです。 SlickNav ウインドウ幅が指定サイズ以下になると、メニューアイコンに変化して右上に表示されるタイプです。 多階層にも対応していていたり、アニメーションで動きもつけられます。 ie7以上に対応。 詳しい実装方法がサイトにのっているのでわかりやすいです。 SlickNav FlexNav 指定サイズ以下になると、メニューバーのみが表示
今さら聞けないマテリアルデザインとは？5分でわかる解説 | SONICMOOV LAB
2014年6月にGoogleマテリアルデザインガイドラインが公開されてから、AndroidはもとよりiOSのアプリでも、このガイドラインを取り入れたUI/UXの優れた作品が多数出てきました。 今回はそんな相変わらずトレンディなマテリアルデザインのガイドラインをわかりやすく、ポイントを絞ってお伝えします。 目次 マテリアルデザインとは？ 平面なのに3D 紙とインク マテリアルデザインのカラー グリッドシステム アニメーション 心地の良い動き タッチフィードバック 意味を持ったアニメーション まとめ マテリアルデザインとは？ マテリアルデザインを直訳すると「物質的なデザイン」という意味です。 デジタルのデザインなのにどの辺が「物質的」なのか、それは次の2つの概念で表現されています。 平面なのに3D マテリアルデザインでは、要素の重なりを物理的にとらえ、平面の中に、明確なZ軸の概念を持たせていま
1ページで完結、Web制作者が助かるチートシート・資料・PDFまとめ
作成：2015/08/10 更新：2017/04/16 Web制作 > 開発環境 ページを移動せずにテンプレートや仕様書を確認したい。今回はPCの横に貼ったり印刷したり、ワンクリックで見れるように、1ページで完結している資料をまとめました。Web制作をする上で便利なチートシートや資料・仕様書まとめです。 エンジニア速報は Twitter の@commteで配信しています。 もくじ WordPress版 受託用マニュアル １．ヒアリングシート ２．WP版ホームページ制作の流れ ３．WordPress管理マニュアル ４．WP版品質チェックシート ５．Wordpress タグ タスクランナー ６．gulp ７．Bower JavaScript 代替言語／JST ８．TypeScript ９．CoffeeScript １０．Jade コーディング用 １１．Chrome 開発ツール １２．html5
Web制作者は絶対ブックマークしておきたい、デザインやコーディングに役立つサイトのまとめ
フロントエンドのデザインやコーディング時に調べたり、アイデアやインスピレーションがもらえるお役立ちサイトを紹介します。 最近リリースされた、特に便利なサイトをまとめました。
2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワーク さまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー 使いやすいアイコンフォント・Pure CSSのアイコン リセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd
レストラン等、飲食店Webサイトの制作Tipsと実例まとめ
2016年6月9日 Webデザイン レストラン、居酒屋、カフェ、バーなどなど、国内だけでも数えきれないほどの飲食店が存在します。そのため、飲食店のWebサイト制作を経験したことのある、またはこれから制作予定のデザイナーさんも多いのではないでしょうか？そこで今回は特にレストランにスポットをあてて、必要な要素や制作ポイントを考えてみようと思います。 ↑私が10年以上利用している会計ソフト！ おいしそうな写真が命！ ユーザーがお店に入る前にチェックしておきたいのは、そのお店でどんな体験ができるのか？という事。どんな料理が出てくるんだろう？一皿頼んだらどれくらいの量なんだろう？お店の雰囲気は？などなど…。これらの不安を解消してくれるのがクオリティの高い写真です。最近ではファーストビューで画面いっぱいの写真を背景画像としてドドーンと表示しているサイトもよく見かけますね。 鉄板焼きの可らしでは写真では
2014年、進化しているWebデザインのトレンドを実際に効果的に使用しているサイトともにチェックできる無料のE-Book
Webデザインの現在のトレンドの多くは2013年頃から浸透しはじめ、さまざまな形に進化し続けています。そんなWebデザインのトレンドを実際に効果的に使用しているサイトともに紹介している無料のE-Bookを紹介します。 2014年も残り半年ちょい、早いものですね。 Web Design Book of Trend 2013-2014 このE-Bookとは別に、トレンドの流れをさまざまな切り口からチェックしたい人は下記の記事も参考にしてみてください。 2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ E-Bookは無料で、全187ページオールカラーのPDFです。各トレンドごとに説明と、実例が15サイトくらい掲載されています。 下記に各トレンドと中身をざっくり紹介します。 1. The Era of Content コンテンツの時代 ウェブサイトのレイア
参考にしたい！レスポンシブ × WordPress ブログ7選 | Picture Picture
今回の記事は、私、スタジオARCのデザイナー 山本カツヤが、Webデザインに関する内容でお届けします！ 今や、「WordPress」という言葉は、Webにあまり詳しくない人でも、知っているかもしれません。 当ブログ（Picture Picture）でも使用している「WordPress」は、世界で一番使われているブログシステムです。 この「WordPress」で構築されており、かつPC・スマートフォンのどちらからでも、最適化されたレイアウトで閲覧できる「レスポンシブWebデザイン」を採用しているものの中から、私が「おおお！」と思った、デザイン性の高いブログを7つ紹介していきます。 Web技術に関する話も少しありますが、難しいことは書いてないのでご安心いただけると幸いです。 「レスポンシブWebデザイン」の定義 「レスポンシブWebデザイン」とは、ひとつのHTMLで、PC・タブレット・スマート
世界各国のWebデザインと日本のWebデザインの特徴
2013年10月29日 Webデザイン, 海外情報 私は今まで日本、カナダ、オーストラリア、イギリスと、4カ国での滞在経験があるためか、各国のデザインの違いについて尋ねられる事があります。しかし日本以外のすべての国は英語圏。Webデザインでいえば違いを感じたことはあまりありませんでした。そこで今回は今まで触れる機会のなかった言語圏のWebサイトを比較しました。アメリカ、フランス、サウジアラビア（中東）、中国、そして日本。それぞれのデザイン事情の違いを知って、日本のWebデザインについても考えてみたいと思います。 ↑私が10年以上利用している会計ソフト！ マクドナルド アメリカ 現在は全体的に濃い青をメインに使っていますが、これはキャンペーンによって変更されます。ナビゲーションバーやページしたのバナーエリアは基本的に固定。 例えば別のプロモーションページではこんな感じ。一番見せたいものをひと
知っておくと速い！CSS3に関する「便利」なまとめ
作成：2013/11/25 更新：2014/10/24 Webデザイン > 先週WordPressの自作テーマを作っていたときに、もっとCSSで効率化できないものかと、色々調べてたら結構使ってないものがありました。出来るだけ短縮できるところは短縮したいので、今回はCSSの中でもサイトを作る上で「知っておくと効率的」なものをまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 知っておきたいプロパティ １．カウント数を出力 ２．要素の前後に文字や画像 ３．カーニング ４．画像フィルタ ５．均等幅にレイアウト ６．アニメーション一覧 スマホサイト対策 ７．viewport ８．改行削除 ９．Webクリップアイコン １０．UIリセット／入力フィールド拡張 １１．横並び １２．ボタンサンプル １３．画像を使わない矢印 １４．自動改行 １５．はみ出しを隠す １
【Macアプリ】Webデザイナー向けの便利なおすすめMacアプリ28個
「なんかもっとこう、サクサクとパソコンをいじれないかなあ・・・・」 Macをお使いのあなたはこんな悩みを抱えたことはありませんか？ 確かに、ショートカットキーを使いながら仕事を効率化したり、ツールを利用して今までよりも何倍もの速さでパソコンで仕事ができたら理想的ですよね。 事実、できる人はすでに便利なMacアプリをダウンロードし、利用しています。 仕事を効率化させるアプリを使うのとそうでないのではスピードに大きな差が生まれてしまいます。 そこで今回は、日々Macを使って止まないあなたに、仕事が今より3倍はかどるオススメのMacアプリを28コ紹介します。 この記事を読むことで仕事を効率化できるアプリを知ることができ、今よりもサクサクにパソコンをいじることができます。 ぜひ参考にしてみてください。 デザイナーさんが仕事が圧倒的にはかどるMacのオススメアプリ10選 Alfred まず紹介したい
Webデザインを勉強する時に参考にしたいまとめサイト・記事25選
Webデザインを勉強する時に参考にしたいまとめサイト・記事25選 Webデザインやホームページ作成を勉強したい人向けに、参考になるまとめサイト・記事・小技テクニックを集めてみました。「Webデザインの見本サイト」や「今すぐ使えるテクニック」など、初心者がすぐに参考になるサイトばかりです。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 Webデザインをこれから勉強しようと思っても、どこから始めていいかわからないということはないでしょうか？
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
商用利用無料！Bootstrap 3, Bootstrap 4をベースに最近のUIデザインのトレンドを取り入れた新作テーマのまとめ
Webデザインのセンスを磨く！2014年上半期洗練されたディテールのUIデザインのまとめ
robots.txtとは？設置する理由・SEO効果・書き方を解説
