質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • CSS

    7776questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

CSSのスタイリング調整に使えるWebデザインツールや方法を教えてください

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 759

tkow

score 1177

フロントエンドのUIをJSやCSSで作っている時に,いつも,styleを直打ちしたり,ChromeのデベロッパーツールのStylesから微修正を行っているのですが,Webデザインについて独学であり,エディタ以外のツールなどを使わず作成しているため,自分がやっている方法よりもっと効率のいいやり方やWebデザインのツールがあるのではないかと思っています。

bootstrapやsweetalertや,smartadminなどjsのライブラリを使ってレイアウトをある程度テンプレートのように扱う方法等ではなく,それらを利用してそこから思い通りの配置にするためにstyleを調整していくための方法論やツールなどがあれば教えていただきたいです。

また,それらの技術について勉強できる書籍などがあれば教えていただきたいです。よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

長年コーダーやってますが、
CSSの調整は結局エディタで直打ちしてますねぇ。
タイピングが面倒、という問題であればエディタの入力補完機能や
Emmetなどのツールを活用することで、最小限のタイピングで済みますし、
同じ記述を何度も書かなくてはならなくて非効率だとか
そういうCSS言語の貧弱さ自体が気になるのであれば
Sassなどのプリプロセッサを活用すれば
使い回しも後からの一括変更も自由度は格段に増しますので、
そういう方向性で全体を効率化する方が良いのではないかという気がします。

例えばDreamweaverには「CSSデザイナー」という名前の、
パネルから数値を調整することで直感的にCSSを編集できる機能がありますが、
CSS自体不自由なく書ける人間にとっては逆に不便だと思うんですよね。。。
ツールに頼らなくては書けないような複雑なコードになりそうなのであれば
PSDから直接CSSコピーしたり、各種ジェネレーターツールを活用した方が
手っ取り早いですしね。

あくまで個人的な意見ですが。。。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/09 14:15 編集

    お答えいただきありがとうございます。
    Sassはいい解決手段ですよね。規模が大きくなりそうなプロダクトには僕も使っています。
    スタンドアローンのフォームアプリケーション開発をやっていた時にドラッグアンドドロップでUI配置が出来るようなものがあったので,ドラッグアンドドロップイベントがjsで取れるのにそういう開発ツールがhtmlに存在しないのかが疑問でした。
    CSSデザイナーというのはchromeデベロッパーツールのものと同じようなものですよね。ある程度予想で直打ちできるのですが,微調整に使ったりしています。

    追記

    調べてみたらドラッグアンドドロップで配置できるツールありました。ただ,よく考えてみたら,ドラックアンドドロップで評価できないスタイル(table,inline,float等)は結局自分でスタイリングしないといけないので,あんまり有益ではないかもしれないですね。CSSは結局べた書きでも対応できることが重要なのかもしれないですね。

    Emmetいいですね。初めて知りました。
    rails開発の時はhaml使ったりすることもあるのですが,これはいいツール知れました。

    PSDでフォトショのデータのことですか。フォトショ使ったことがないのですが,CSS抽出できるんですね。これも機会あったら使ってみようと思います。ありがとうございました。

    キャンセル

checkベストアンサー

+1

Google ChromeのDevツールでやっています。

Devツールの編集をファイルに直接反映する方法
Devツールで編集した内容を該当ファイルに即反映する方法が記載されています。

PerfectPixel
任意の画像をWebページ上に重ねることができるChromeのプラグインです。
デザインカンプなどを重ねて確認できます。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/02/14 17:58

    PerfectPixelいいですね。
    Chromeって高機能なツール結構揃ってるんですね。勉強になりました。
    こういうツールを探していたので,ベストアンサーにさせていただきます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • CSS

    7776questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。