【CSS設計入門】class名の決め方(命名規則)から具体的な書き方まで詳しく解説 | 模写修行メディア
実務でリニューアル案件や改修案件をやると、他人が書いたコードをよく見ることになります。悪い意味で"ヤバイ"と思うコードもたくさん目にします。 HTMLは色々な書き方があってOKというわけではなく、正しく意味付けするものなので、ちゃんと書いていれば人によってあまり差が生まれません。一方で、SSは人によってC書き方はかなり様々です。 どんなサイトを作るのか 誰が作るのか サイト公開後は誰が保守・運用するのか これらによって最適な書き方は変わってきます。正解はありませんが、CSS設計を理解して、自分の中でどんなCSS設計手法を採用するかは決めておくべきです。 この記事では、CSS設計に関して、具体的なサンプルも用いて解説します。 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends
CSS Flexboxは、CSSによるレイアウト作成でよく使われるCSSのレイアウト手法です。 レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法などがありますが、細かい所を自動で調整してくれたり、簡単にレイアウトを作成することができるというFlexboxの特徴から使用される頻度が高いです。 慣れてしまえば扱いやすいFlexboxですが、使い方に慣れるまで少し苦労することも多いですね。 そこで、今回はCSS Flexboxの使い方を分かりやすくご紹介していきたいと思います。 2021年版：Flexboxの対応ブラウザとベンダープレフィックスまとめ CSS FlexboxはCSSでレイアウトを組む時に使われる主要な手法の1つです。 しかし、比較的新しいレイアウト法なので、一部のバージョンが古いブラウザでは正しく表示されないという課題も抱え
2021年版：Flexboxの対応ブラウザとベンダープレフィックスまとめ | Web Design Trends
IE11は注意が必要！ 何かと話題になりやすいInternet Explorerですが、最新のIE 11でもFlexboxに関するバグがいくつか報告されているため、Flexboxを使用する場合はIEでの動作確認を行った方がいいでしょう。 ただし、IEのサポートも2022年6月に終了することが発表されており、これから制作するWebサイトであればIEを最初からサポート外にしてしまう方がいいと思います。 Flexboxのベンダープレフィックス一覧 下記にFlexboxに関連するCSSのプロパティのベンダープレフィックスの記述方法をご紹介しておきます。 すでに、ベンダープレフィックスが必要なバージョンのブラウザはシェアがかなり少なくなってきており、基本的にはベンダープレフィックス無しでもほぼ100％に近いシェアをカバーできるものの、古いブラウザでの動作保証もしっかりケアしたいという場合は、ベンダー
CSSのみで背景を全体的に斜めにして傾斜をつける方法 | UNORTHODOX WORKBOOK | Blog
最近よく見かけるやつなんですけど、ちょうど今作っているサイトで使ってみたくて、色々やってみた結果なかなか良かったのでブログに残しておきます。 斜めのストライプとかじゃなくて、ブロックごと全体的に斜めにして背景を傾かせる方法です。プラグインは使わずに、CSSのみで実装してます。 デモ つまりはこんな感じのやつです↓ DEMO PAGE 大胆に背景全体を傾斜させているので、単調なフラットデザインに、ちょっとしたスパイスを加えることができますね。 実装方法 色々とやり方はあるかと思いますが、ここではCSSのbefore擬似要素とtransform:rotateを使って表現しています。 HTML <section class="contents"> <div class="contents_inner"> <!-- ここはコンテンツ --> </div> </section> ※HTMLは該当部分
1カラムのスクロール型のページで要素の継ぎ目を斜めにするテクニック | 9ineBB
ページ全体を大きくダイナミックに使ったWEBページでの、スクロールによるパララックス効果との相性が良い要素の継ぎ目を斜めにするテクニック 参考元 http://codepen.io/zizzo/pen/HgaDm 要素と要素の継ぎ目を斜めにする方法 HTMLでは通常、要素は四角形で出来ています。 普通1カラムのページなら、ブロック要素を積み重ねるようにして作成していきます 今回斜めにするイメージ 斜めの継ぎ目にする場合も基本的には、長方形のブロック要素を並べるだけなのですが 一つ目のブロック要素のbefore、3つ目のブロックのbefore をそれぞれ 2つ目のブロック要素と同じ色に揃えることで斜め銭のように表現します 色でなくても背景で background-attachment: fixed; を使ってやってもつながった絵になります。 実際に作ったサンプル コードとコードの解説 HTM
【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
今回はCSSのdisplayプロパティをマスターしましょう。少し分かりづらい内容ではありますが、Webサイトを作るためには必ず理解しておく必要があります。
PixelSnap 2 for Mac
Snappable guidesHold distance on the screenMultiple object measurementCleanShot integrationAdobe XD integrationScreenshot tool for taking screenshots of measurementsCustomize all shortcutsAdded onboarding tutorialTouchbar supportSelect object without snapping (with right drag)Move rectangle by pressing spaceFind dimensions by pressing dock iconMojave supportDownscale retina screenshots to 1xHide t
Hover.css - A collection of CSS3 powered hover effects
2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top
MDN Web Docs
Resources for Developers, by DevelopersDocumenting web technologies, including CSS, HTML, and JavaScript, since 2005. //////////// //////////// //////////// //////////// //////////// //////////// //////////// ++++++ ++++++ ++++++ ++++++ ++++++ ++++++ ++++++{{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} {{{{ }}}} ../../ ../../ ../../ ../../ ../../ ../..
スライダーなどで使用される、バレットナビゲーションのスタイル・エフェクトサンプル - NxWorld
スライダーを切り替えたり現在何枚目なのか把握しやすいように配置されているのを見かけることが多いバレットナビゲーションを、CSSを使って見た目を整えたり動きを付けてみたサンプルです。 スライダー以外にも例えば長いシングルページでウィンドウの右側によく配置されているようなナビゲーションなどにも利用できますし、全てCSSなのでサイズやカラーなども容易に変更できます。 いずれもシンプルで凝ったものではありませんが、むしろシンプルなのでほとんどのテイストでそのまま使えたり、これをベースにオリジナルな見栄えにしていくことができると思います。 共通のHTML・CSS 以下で紹介しているサンプルでは共通のHTML・CSSとして下記がそれぞれ指定されており、CSSの場合はこの共通スタイルに各サンプルで紹介しているCSSを追記・変更などをすることで見栄えの確認ができると思います。 一部場合によっては必要ない記
CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン
最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次： 共通HTML＆CSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン（大） シンプルな太い矢印アイコン シンプルな太い矢印アイコン（大） 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン（大） 右下向きの矢印アイコン 右下向きの矢印アイコン
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting to Animate.css
AniCollection - The easiest way to find, use and share CSS3 animations.
【2016年版】私（フリーWebデザイナー）がレスポンシブWebコーディング時に使用しているツールまとめ[[MORE]]私がレスポンシブWebサイトのコーディングに使うツールをまとめました。 1.Bootstrap（CSSフレームワーク） 現在の所はレスポンシブWebデザインの需要が高いので、ほぼCSSフレームワークのBootstrap3を使用してサイト制作しています。 利点はWebコンポーネントご...![【2016年版】私（フリーWebデザイナー）がレスポンシブWebコーディング時に使用しているツールまとめ[[MORE]]私がレスポンシブWebサイトのコーディングに使うツールをまとめました。 1.Bootstrap（CSSフレームワーク） 現在の所はレスポンシブWebデザインの需要が高いので、ほぼCSSフレームワークのBootstrap3を使用してサイト制作しています。 利点はWebコンポーネントご...](https://cdn-ak-scissors.b.st-hatena.com/image/square/38760b34c3a6c934bd0bf82c9281c372f0837f6a/height=288;version=1;width=512/https%3A%2F%2F64.media.tumblr.com%2Ffd1aff3a9ea7009569f8e8815e0a07aa%2Ftumblr_o0u92ncQ9x1uiya9ro1_500.png)
Webデザイン入門：HTMLとCSSの書き方をゼロから学ぼう