Web制作の現場で使えるWebサービス13選！無料で使えるサービスを集めてみた | MonoStack

2023/06/27 162 users ワンクリック MonoStack ドラッグ＆ドロップ ツール

CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを13個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Fancy Border Rad... 続きを読む

Sassなしで入れ子が可能に。CSSネストがブラウザにやってきた

2022/11/18 168 users Sass ネスト CSSネスト CSS ブラウザ

先日リリースされたGoogle Chrome Canaryで、CSSでネスト（入れ子）ができるようになりました💐 次のようなコードが、「SassではなくCSSで」できるようになります。Sassを使わないCSSコーディングを大きく変えることでしょう。 続きを読む

デザインカンプからのHTML/CSSコーディングの練習になる学習サイト | Webクリエイターボックス

2021/06/16 41 users デザインカンプ 模写 コーディング CSS 実務

2021年6月16日 HTML/CSSのコーディングの練習をするときに、既存のWebサイトの模写をする方もいらっしゃるかと思います。模写は模写で勉強になる点もありますが、実務ではデザインカンプと呼ばれるデータファイルを渡され、それを仕様にそってHTML/CSSでコーディングしていきます。実務に近いかたちに慣れるためにも、デ... 続きを読む

Web制作の現場で使えるWebサービス15選！無料で使えるサービスを集めてみた | Pulp Note

2021/05/13 425 users Pulp Note ワンクリック ドラッグ＆ドロップ ツール

CSSコーディングに役立つサービスやWebサイト運用で役立つSEO関連のツールなど、Web制作の現場で使えるWebサービスを15個紹介します。ワンクリックで取得できるコードや、ドラッグ&ドロップだけで完結するものなど、直感的に作業できるサービスばかりです。あなたの現場でもぜひ利用してみてください。 Ubersuggest SEO... 続きを読む

キーボード操作を意識したHTML/CSSコーディング

2020/12/05 535 users Webアクセシビリティ Advent Calendar

この記事は 「Webアクセシビリティ Advent Calendar 2020」 5日目の記事です。 アクセシビリティ Advent Calenderの記事を寄稿するにあたり、少しの工夫であらゆるユーザーに対して優しいWebサイトを作れるようなHTML/CSSコーディングの方法についてまとめました。より多くの人にとって優しい・使いやすいWebサイトを作... 続きを読む

会社のwebデザイナーが無能すぎてヤバいｗｗｗｗ

2020/11/08 305 users Webデザイナー やばいｗｗｗｗ psd 会社 プログラマー

去年の冬に転職したweb系のプログラマー。 今の会社のwebデザイナーが無能すぎてしんどい。 以下愚痴 1. photoshopでwebデザインすんな！photoshopで作ったpsdのwebデザインを渡されて、フロントエンド担当がHTML/CSSコーディングしてるんだけどどうなのこれ？ なんでphotoshop使うの？webページ作るんでしょ？最初からH... 続きを読む

ノンデザイナーでもイケてるLPを作成する方法 - Qiita

2018/01/03 181 users ノンデザイナー Photos Qiita 一朝一夕 イケ

あけまして おめでとうございます はじめに イケてるは誇張かもしれませんが社内にデザイナーがいなく、 エンジニアにランディングページを作ってと振られたときのケースを想定して ノンデザイナーでも体系的にCSSコーディングすることでそれっぽいランディングページを作成できることを目的としてます。 デザインは一朝一夕でできるものではなく、ブランディングに関わる部分の画像に関しては、商材の撮影やPhotoS... 続きを読む

PSDデザインカンプのスライス不要！DreamweaverでのHTML/CSSコーディングを爆速化する方法 | 株式会社LIG

2015/05/20 140 users Dreamweaver スライス 爆速化 HTML 方法

こんにちは。デザイナーのたかあきです。 僕の主な業務は、Webや紙などのさまざまなものをデザインしていくことなのですが、最近は今まで以上にマルチな動きを求められるようになりました。 何事もそうですが、自分自身が次のステップにいくためには、今までと同じ時間の使い方をしていたらいけません。 つまりは「効率化」することが必須になるわけです。 そこで今回は、アドビさんにお聞きした「WebデザイナーがDre... 続きを読む

自分の書いたコードが即座に解析できる「StyleStats」でCSSを測ろう！ | HTML5Experts.jp

2014/03/20 232 users StyleStats CSS 即座 イケ HTML

こんにちわ、@t32kだよ！ 私は仕事では主にHTML/CSSコーディングを担当しているのですが、自分の書いたCSSがイケてるのか、そうでないのか、気になります。私、気になります！そうでなくても、他プロジェクトのCSSのレビューをお願いされたりすることもあるので、そのCSSがどのような状態であるのか、すばやく簡単に理解する必要性がありました。 そこで私は、StyleStatsというNode.js製... 続きを読む

書評: Web 制作者のための Sass の教科書 // understandard

2013/09/15 26 users Sass understandard 書評 目印 平澤さん

ベタ塗りピンクが目印の Sass 本、「Web制作者のためのSassの教科書」を著者の平澤さん、森田さんより頂戴しました。 電子書籍としては過去に Gihyo Digital Publishing より 「Sass入門 ～より効率的なCSSコーディング」が出版されていますが、紙の書籍（なんか変な表現だな）としては日本初とのことです。 10月には電子書籍版も出版予定とのことなので、電子書籍派の方はこ... 続きを読む

もうCSS設計で悩まない！「CSSコーディング ガイドライン」策定のための参考記事・スライド 7選 / SQUEEZE - Web Design Studio -

2013/09/12 930 users プロパティ コーディング規約 規模 構造 ルール

構造やクラス名、プロパティの記述方法などをルール付ける「CSSコーディング ガイドライン」策定のための参考記事を紹介します。 チームでの共有、コーディング効率やメンテナンス性などの改善のためにも、これを機会にガイドラインを導入してみてはいかがでしょうか。 コーディング規約を作ろう "制作チームの規模が大きくなればなるほど、コードの統一性は大切" ▶ コーディング規約を作ろう Webクリエイターボッ... 続きを読む

Emmet LiveStyleで爆速HTML/CSSコーディングの境地へ | REFLECTDESIGN

2013/08/06 269 users REFLECTDESIGN generation 境地 爆速

簡単な記述でHTML/CSSが爆速でコーディングできるという神プラグイン「Emmet」。フロントエンドな人ならほとんど方が使っているんじゃないかと思います。この度そのEmmetから「Emmet LiveStyle」なるものが出ました。 Emmet LiveStyle — live bi-directional CSS edit of new generation 簡単に言うと、エディタとブラウザ双... 続きを読む

より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集 | Webクリエイターボックス

2013/07/01 486 users Sass SCSS Mixin Compass すそ

以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそ... 続きを読む

SassというCSSコーディングを身につけよう!in Coda2!!超簡単な僕のSass覚書。

2013/06/17 172 users Twitter Sass less 半年 興味

半年ほど前から良く話題になるSassとかLessとかってなんだろうなーって思いつつめんどくさそうだからこの手の記事は回避していました。 ですが、いつものようにTwitterでつぶやいていたらSassかなり良いよって言われて 「へーそうなんだ〜」と興味を持ち始めて 少しずつですが記事を読みあさりながらSassってこうゆう感じなんだーっていうのが掴みかけてきたので記事にしたいと思います。 目次 Sas... 続きを読む

[SublimeText]Emmetを使いこなすためのショートカットキー | DevAchieve

2013/04/11 105 users Emmet SublimeText DevAchieve

2013/03/09 [SublimeText]Emmetを使いこなすためのショートカットキー Emmet には便利なショートカットキーがあるのでまとめておく。 Actions | Emmet Documentation Expand Abbreviation[SublimeText]Emmetで高速HTML/CSSコーディング HTML編 | DevAchieveで 説明した事ができる。詳しく書... 続きを読む

レスポンシブ対応に使えそうなLESS/Sassの書き方 | Good thinking

2011/12/15 32 users Sass less 定義 レスポンシブ対応 勘違い

Responsive Web Designを考えたCSSコーディングに役立つLESS/Sassのコードを紹介します。 本記事はLess & Sass Advent Calendar 2011の13日目の記事です。 ※投稿日付が15日になっていますが、私の勘違いで投稿が遅れてしまいました。。（関係者の方ごめんなさい） LESS/Sassの前にResponsive Web Designの定義の話 まず... 続きを読む

HTMLからCSSのベースを作ってくれるサービス | CREAMU

2010/01/01 240 users CREAMU Primer CSS HTML ベース

テーブルなどをHTMLで組んだ後に、CSSコーディングを簡略化したい。 そんなときにおすすめなのが、『Primer』。HTMLからCSSのベースを作ってくれるサービスです。 HTMLをペーストして、「PRIME IT」ボタンを押すと、idやclass名からCSSのベースを作ってくれます。 プログラマが作った素のHTMLにスタイルを当てていくときなどに使えるかもですね。 インターフェースがシンプルで... 続きを読む

CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記

2007/02/02 1038 users DesignWalker ウェブデザイナー padding

本日は、実用的なCSS（スタイルシート）のお話。CSSコーディングを始める一番最初にbodyタグに設定しておくと、結構便利かな？と思われるポイントをまとめてみました。。 margin:0; padding:0; margin:0; padding:0;って設定しておくと、とりあえずブラウザの標準で設定されている余白を無くす事ができますね。ブラウザごとにこの余白の設定はまちまちなもので、わたくしは最... 続きを読む

hail2u.net - Weblog - CSSコーディング・スタイル

2006/08/20 158 users Weblog hail2u.net つづり コンセンサス 意見

Posted at 2006-08-20T18:33:00+09:00 in Web Design 「こういうスタイルがCSSを記述する時に便利だよ！コンセンサス(つづりは知らない)も取れるし！」とかいう建設的な意見はまるでないんですが、CSSを書く時の自分ルールは結構あるのでまとめがてらエントリにする。もちろんhxxk.jpのCSS の記述ルール記事のまとめというエントリを見たから書く気になった... 続きを読む