[B! Webデザイン] simikazのブックマーク

Web制作者必見！ VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利

Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料

simikaz 2021/03/05

リンク

2020年のCSSのまとめ、FlexboxやCSS Gridの使用状況、よく使用するプロパティや単位、人気のフレームワークやツールなど

CSSを10年以上書いてきた人にとって、この2020年は今までとは全く違ったCSSになったと感じた人も多いと思います。レスポンシブはブレークポイントの代わりにCSS Gridでより簡単に実装できるようになり、グローバルなスタイルシートに頼るのではなく、CSS-in-JSでスタイルをコンポーネントに配置してテーマ性のあるデザインシステムを構築できます。フレームワークではTailwind CSSが浸透し、ユーティリティ・ファーストのCSSが使用されるようになりました。2020年現在、CSSの使用状況を調査した「The State of CSS 2020」を紹介します。 The State of CSS 2020 The State of CSS 2020は、The State of CSS Surveyでアンケートを行った調査結果をまとめたものです。私も1票分参加しました。ちなみに、代表

simikaz 2020/12/07

リンク

【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新｜ryota_funakoshi

【保存版】「もうデザイナー用の最強チートシート作っちゃおうよ」と現役デザイナー4人で超便利サイト情報を集約してみた20211017更新こんにちはデザイナー社長の船越です！久々のnote投稿ですが、ツイッターを見ていてデザイナー初学者の人から「どこから画像を引っ張ってくればいいかわからない😭」「日々の情報収集どうすればいいの？🤔」という悩みをよく見かけます。そこでデザインオタクの僕が、普段見ているサイトや参考になる選りすぐりの情報を全部まとめました！デザイナーのクオリティと速度は引き出しで決まると僕は考えています。このまとめを見て皆さんの学習と仕事が少しでも捗るようになれば嬉しいです！たくさんのデザイナーさんの役に立つ記事にしたいため、「このツールも便利だよ！」というのがあればぜひコメントで教えてください！日々こちらは更新して行く予定なので困った時は是非参考にしてもらえると嬉し

simikaz 2020/08/21

webデザイン

リンク

新人コーダーに伝えたい、きれいなCSSを書くための4つの習慣

この春、CSSコーディングの仕事を始めた新人さんへ、「きれいなCSS」を書くためのガイドラインをお届け。きれいなCSSを書くためにはいくつかルールがあります。ルールに従うとレイアウトの崩れを最大限防げるだけでなく、軽量で再利用可能なCSSを書けるメリットもあります。ここで紹介するルールは次のとおりです。グローバルセレクターや要素セレクターを避ける詳細度が高すぎるセレクターは使わないセマンティックなクラス名を使うマークアップ構造とCSSを密結合しすぎないルールを1つずつ説明していきます。グローバルセレクターを避けるグローバルセレクターには全称セレクター（*）、p、button、h1といった要素セレクター、[type=checkbox]といった属性セレクターが含まれます。これらのセレクターに適用されるスタイル宣言は、サイト全体にわたって該当する要素すべてに適用されます。以下に例

simikaz 2020/05/09

リンク

日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

2021年12月18日 CSS, ダウンロード FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーでFlexboxをサポートしており、Flexboxを使ったレイアウト組みが今後のWebデザインのスタンダードとなるでしょう。Webクリエイターボックスでは以前からFlexboxの使い方について紹介してきたのですが、最近Flexboxが浸透してきたこともあってか各プロパティの使い方について質問される機会が増えてきたので、チートシートとしてまとめてみました。この記事ではなるべく画像メインでプロパティーの使い方を紹介したいと思います！ ↑私が10年以上利用している会計ソフト！動画で学ぶCSS Flexbox この記事はYouTube動画でも解説しています。動画派の

simikaz 2020/05/08

リンク

Website Builder — Create a Website in Minutes — Squarespace

A collection of inspirational websites made by real Squarespace users. Stories and solutions for the modern entrepreneur. In-depth guides and videos about the platform, our services, and how to get started. An online community for Squarespace users and professionals to discuss best practices and seek advice. Free, online sessions where you’ll learn the basics and refine your Squarespace skills. Ea

simikaz 2014/04/09

リンク

Responsive web design tool, CMS, and hosting platform | Webflow

Webflow Conf online, SF, and LDN agendas are live now.

simikaz 2014/04/09

リンク

dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

simikaz 2014/04/03

リンク

新しいものを制作できる予感！垂直・水平のリズムを大切にしたレイアウトを組み立てるフレームワーク -xy.css

Documentation -xy.css Step 1: ダウンロード xy.cssを下記ページからダウンロードします。ダウンロード -xy.css Step 2: 水平のグリッド設計 HTMLは非常にシンプルで、classなど余計なものは一切ありません。 <header></header> <article></article> <aside></aside> <footer></footer> 天地にヘッダとフッタ、コンテンツとサイドバーを2カラム水平に配置します。 header, footer { width: 100%; } article { width: 66.6667%; float: left; } aside { width: 30.769231%; float: right; } Step 3: 垂直のグリッド設計 articleとaside内に、見出しとパラグラフ

simikaz 2013/01/19

リンク

何度も読み直したい！はてブ数300以上のWeb制作系スライド2012年版

ノンデザイナーのための配色理論 / Webデザインのセオリーを学ぼう / ご存知、ないのですか？CSSの優先順位他...全13件

simikaz 2012/12/06

とりあずブクマ

リンク

HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO

そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。はじめに - パララックスエフェクトについてパララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu

simikaz 2012/10/17

Webデザイン

リンク

デザインのインスピレーションが得られる最強Webサービス7選

毎日のようにデザインをしていると、良いデザインが思いつかなかったり、前回と同じようなデザインが完成してしまったりと、どうしてもデザインに行き詰ってしまうことがありますよね。私自身まだまだ未熟なこともあり、デザインに行き詰ることはよくあります。そんなとき、私は極力仕事中でもカメラ片手にボーっと散歩に出たりして、どうにかインスピレーションを刺激させようとするんですが、散歩に出られないときや、散歩に出ても何も思い浮かばなかったときなどは、いくつかのWEBサイトを見てインスピレーションを刺激させます。｢インスピレーションの刺激になるぞ｣と思ってブックマークしたサイトはいくつもあるんですが、今回はその中から、とくに皆さんに紹介したい利用頻度の高い7つwebのサービスを紹介したいと思います。ではどうぞ！ 1.Dribbble Dribbble これはかなり有名なサイトですね。いまさら紹介するまでも

simikaz 2012/07/22

webデザイン

リンク

サービス終了のお知らせ - NAVER まとめ

サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。

simikaz 2012/07/12

webデザイン

リンク

CSS3の制作をぐっと楽にする厳選20のオンラインツール

CSS3アニメーションをはじめ、グラデーションやシャドウやボーダー、テキストやボックスをかっこよくしたり、レスポンシブデザイン用のグリッド、セレクタの使い方など、スタイルシートの制作時に役立つオンラインツールを紹介します。 Animate.css classを付与するだけで、さまざまなCSS3アニメーションが実装できます。初っ端からオンラインツールじゃないですが、簡単にCSS3アニメーションが利用できるということで。