ごめんなさいね。 - Lopan.jpWebデザインとかサイト制作について、知ってる事知らない事を展開するサイト。
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
Web制作を劇的に効率UPさせる、最近人気の軽量「CSSフレームワーク」を厳選してみた！ - paiza times
どうも、まさとらん（@0310lan）です。 みなさんは、「CSSフレームワーク」を活用しているでしょうか？ いきなりフレームワークと聞くと、「なんだか難しそう…」と思ってしまうかもしれませんが、最近は誰でも利用できるようにシンプルな設計で公開されているモノが増えています。 そこで今回は、多機能でありながらも学習コストが低い「CSSフレームワーク」を厳選し、レスポンシブ対応でモバイルに優しいものをいくつかご紹介しようと思います！ ■CSSだけで多彩なサイトを構築できるフレームワーク！ 【 Picnic CSS 】 Web制作に必要なコンテンツを、とにかく簡単な手順で手っ取り早く構築できるように設計されているのが「Picnic CSS」です！ 特に、Flexboxを活用した非常に柔軟なグリッドレイアウトや、JavaScript不要でインタラクティブな要素を構築できる機能などはとても便利だと思
全部知ってる？今後のサイト制作で押さえたいCSSの最新プロパティ9選
CSSの登場から20年。この間、CSSはものすごく進化していました。「それって昔のやり方ですね」なんて言われないように、今後のサイト制作でチェックしておきたい最新のプロパティ（と関数）が学べる記事を9つ、厳選して紹介します。まだまだドラフト段階の仕様もありますので、各自記事の解説をチェックしてください。 1.グリッドレイアウトが捗るGrid Layout Module 『CSSレイアウトの常識が変わる！Grid Layout Moduleが胸アツ』（WPJ） CSSのレイアウトといえば、伝統的にはfloatプロパティ、最近ではFlexboxをよく使いますよね。仕様策定中の「Grid Layout Module」なら、もっと効率が上がりそうです。 2.テキストの回り込みが簡単に！ CSS Shapesプロパティ 『CSS Shapesでテキストを回り込ませるレイアウトを表現』（Webクリエイ
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス
CSS Flexboxとは水平または垂直に要素を配置し、柔軟なレイアウトを実現できるCSSのレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。 CSS Flexboxの基礎知識、Flexboxの各プロパティがどのように機能するのか、Flexboxでどのようにレイアウトを実装するかを視覚的に解説します。 【アップデート: 2022年6月16日】 IEがサポート終了したことにあわせて、修正しました。 【アップデート: 2021年8月1日】 Flexboxの解説を2021年の現状にあわせて、修正しました。 【アップデート: 2020年8月23日】 Flexboxの解説を2020年の現状にあわせて、修正しました。 【アップデート: 2019年3月27日】 Flexboxの解説を2019年の現状にあわせて、修正しました。 【アップ
2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワーク さまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー 使いやすいアイコンフォント・Pure CSSのアイコン リセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
CSSフレームワークまとめ - Qiita
自分でもCSSフレームワークを作りたく、 巷にはどんなフレームワークがあるのか、ベンチマークをとる意味も含め、調べてみました。 Twitter Bootstrap 一番有名で一番使われてますね。 CSSフレームワークの王道。 v3.0からフラットになりました。 現在、v4がα版として出ています。 http://v4-alpha.getbootstrap.com/ Foundation こちらも有名。 BootstrapとこちらのFoundationは、幅広く用意されている感じがします。 Primer Github製。もちろん見た目もGithub 。 Pure YUIからでているライブラリ。 クラスのつけかたがシンプルな印象です。 Gumby こちらもなかなかのボリュームです。 Sass製。 Cardinal LESS製。 ミニマムでシンプルです。 INK Sass製。 なかなかクオリティが
知っておいてよかった！Web制作時に効率上げる「便利」なCSSテクニック - コムテブログ
TL;DR 少し前にサイト制作でさりげなく使われている CSS テクニックをまとめましたが、今回はそれを補足する形で、これから増えそうなもの、使っていきたいものを今後忘れないようにメモしておきます。 Photoshop ののように、乗算・オーバーレイなど背景色と背景画像を混ぜあわせたり、写真に色々な効果を付与することができるbackground-blend-modeプロパティ。シンプルな例では、以下のように背景写真と背景色を合成することが可能です。 .blended { background-image: url(face.jpg); background-color: red; background-blend-mode: multiply; } 効果一覧：multiply／screen／overlay／darken／lighten／color-dodge／color-burn／hard
CSS3のセレクタ全42種 まとめておさらい使い方リファレンス | WP-E (仮)
こんにちわ。WP-Eイクラこと@ampersand_xyzです。 CSS3のセレクタ、ちゃんと覚えてる？ 普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときに あれ？コレなんだったっけ？ というセリフを何度心のなかでつぶやいたか分かりません。 また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。 おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。 なお、仕様書の日本語訳は以下のページをご参照ください http:/
28 Free CSS-Only Code Snippets for Web Developers - DesignM.ag
HTML5 and CSS3 web development has pushed the boundaries of what is possible online. Modern browsers have also jumped aboard the bandwagon to support a multitude of these newer effects. As a designer I have been amazed to find crazy CSS-based projects online. Open source is driving the future of websites and how we design layouts. In this gallery you’ll find 28 brilliant samples of CSS-only codes.
昔は画像を使っていたけど、今は使わなくても再現できるもの色々。 | 福岡 ホームページ制作のブレンドデザイン
2014年03月07日 日々思うこと 昔は画像を使っていたけど、今は使わなくても再現できるもの色々。 Tweet ホームページ制作に関する技術も年々進んでいて、昔は画像を使わないと実現できなかったものも、今は使わずにできるようになったものが色々とあります。CSSという文字や背景の色、レイアウトなどを指示するファイルをホームページ制作に使用しますが、追加機能が加えられたCSS3を使うことで画像の代わりに再現できるようになりました。 画像を使わなくて済むと、画像よりもファイルサイズが小さくて済むので、ホームページの読み込みが速くなったり、編集がしやすくなったり、画像を作る手間が省けたりと利点が色々あります。具体的に何が変わったのかをご紹介しておきます。 1.グラデーション 昔は背景にグラデーションを使いたい、といった時はグラデーションの画像を用意していました。今はCSS3でグラデーション
Web制作で使えそうなアイコンフォント | Gatespace's Blog
最近よくアイコンフォントを使っています。 アイコンフォントのメリットですが、 フォントなのでテキストとのベースラインが合わせやすい フォントなので拡大縮小はcssのfont-sizeで指定出来る フォントなのでcssで簡単に色を変えられる ベクターデータなので背景色があるときなどのエッジの処理を気にしなくていい。 があります。 デメリットとして単一の画像よりは一度に複数のアイコンデータを読み込むので、データ量が多くなる（重くなる）というのがあります。 とはいえ、レスポンシブとかサイズとかカラーバリエーションを考えてpngを作るのも手間です。 今回は、自分がよく使うアイコンフォントを備忘録代わりに書いておきます。 なお、この手のアイコンフォントはアップデート（主にアイコンの追加）が多いので、最新版やIE7以下での対応などは各公式サイトでご確認ください。 アイコンフォントの基本的な使い方 ダウ
【サンプル有】レスポンシブなグローバルナビの作り方３選 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
photo credit: ak_tokyo via photopin cc レスポンシブサイトを構築する際、意外と引っかかるのが「グローバルナビ」 ページの横幅（キャンバス）いっぱいに表示させることが多い関係上、キャンバス幅が一定でなくなるレスポンシブWebデザインでは一筋縄ではいきません。 慣れない内は考えるのが面倒で「スマホ専用のナビゲーションを別途用意」したり、「グローバルナビをまるごと非表示にしてしまう」ということをされた方の少なくないのではないかと思います。 今回は「レスポンシブWebデザインで使えるグローバルナビ」をまとめました。 １：【CSS】Table-cellで１行表示 「グローバルナビは絶対に１列固定。それ以外は認めない」という方向けの方法。 これを使うと間違いなく１列のグローバルナビが作れます。 原理は簡単で、１列だけのtableを作るというだけのことです。 CSS
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「出会えたことに感謝したいCSSベスト3」まとめ
CSSの素晴らしいアイデアが満載！2015年スタイルシートのテクニックのまとめ
CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ
Design Patterns on CodePen
【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ