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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

2回答

2562閲覧

下請けとしてコーディングをする時、先方がpostcssを使えない場合、どうしますか?

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

1クリップ

投稿2016/07/26 14:23

下請けとしてコーディングをする時、先方がpostcssを使えない場合、どうしますか?

トランスパイル、ミニファイしたものと、
トランスパイルだけしてあえてミニファイしないものと二つ渡せば問題ないでしょうか?

ただコメントアウトだけは勝手に消えてしまうので、
そこだけ自分で手動で貼り付けますか?
数が多いととんでもない量になりますが。

何か良い方法はないでしょうか?

またgulpはミニファイするしないを選ぶことはおそらくできないと思いますが、
しなくない場合だけ、そのプラグインの記述を削除して、gulpwatchを実行すればよいのでしょうか?

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

納品方法については第三者に聞くより、先方と相談して決めることだと思います。

投稿2016/07/26 14:30

yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

yamato_hikawaさんのおっしゃる通り、納品方法は先方と相談し決定します。
また、先方の要望によってはそもそもpostcssを使わずノーマルなHTML・CSSで開発するという選択肢も
必要になる可能性がありますので、納品方法については制作に着手する前に確認しておいた方が良いでしょう。

ただコメントアウトだけは勝手に消えてしまうので、

そこだけ自分で手動で貼り付けますか?

私はpostcssは使わないのでよくわからないのですが、
postcssでは開発中のCSSコメントを残す設定はできないのですか?
もしそれが本当で、先方がトランスパイル後のCSSでの納品を希望されるのであれば、
私ならそもそもpostcssを使った開発はしませんね。

CSSでの納品を希望するということは、先方はそのCSSファイルを直接編集して運用する可能性が高いです。
もしそうなら、コメントのないCSSファイルを渡されたら困るはずです。
かといってこちらが手作業でコメントをコピペするなどという無駄な作業は愚の骨頂です。

なので、選択肢としては私だったら

・最初から普通にCSSで書く
・sass+gulpで開発し、出力設定をexpandにしておく

のどちらかでしょうね。
sassなら.scss中のCSSコメントはそのまま残りますので。

ちなみに先方では一切CSSの運用はせず、
公開後の運用も全面的にwebpageさんが担当されるのであれば、
渡すCSSにコメントは無くても問題無いでしょうから、postcssでの開発で問題ないと思います。
(受託でそんな手離れの悪い仕事はしたくありませんが。)

こんな感じで、要は納品された後、誰がどんな環境で運用をするのかによって
必要な納品形態は様々ですから、クライアントの要望に合わせてこちらが柔軟に対応する必要があります。

またgulpはミニファイするしないを選ぶことはおそらくできないと思いますが、

しなくない場合だけ、そのプラグインの記述を削除して、gulpwatchを実行すればよいのでしょうか?

minifyファイルが不要なら、gulpwatchのタスクの中にminifyタスクを含めなければ良いだけの話です。

投稿2016/07/26 17:02

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/07/27 00:29

postcss コメントアウトと検索しても出てきません。 あるのかもしれないが見つからないというのが本音です。 ネストをしても子孫セレクタにならないようにするプラグインも見つかりません
aKusano

2016/07/27 02:32

普通に/*コメント*/ と記述したものはトランスパイルすると消えてしまうのですか? sassでは//コメントは消えますが、/**/コメントは残ります。 postcssは体感的にはまだ日本国内の技術者にはさほど浸透していないこれからの技術のようですので、何か情報を検索したい時には英語情報に当たった方が良いと思います。 もしくは、国内でpostcssを推している有名な技術者さんのブログで質門を投げてみるとか。 ちなみにそれ自体良い技術でも実務運用するとなると機能不足、 というものは沢山ありますので、その場合は実戦投入は諦めるという判断も必要です。
退会済みユーザー

退会済みユーザー

2016/07/27 02:58

ミニファイされたファイルを見てみました下記のようになっています。 サンタナイズcssのコメントアウトだけ見つかりますが、他は見当たりません。 @import"object/component/_gnavi";@import"object/project/_logo";@import"object/project/_catch";/*! sanitize.css v4.1.0 | CC0 License | github.com/jonathantneal/sanitize.css */article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}template,[hidden]{display:none}*,:before,:after{background-repeat:no-repeat;box-sizing:inherit}:before,:after{text-decoration:inherit;vertical-align:inherit}html{box-sizing:border-box;cursor:default;font-family:sans-serif;line-height:1.5;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{height:0;overflow:visible}nav ol,nav ul{list-style:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}progress{vertical-align:baseline}small{font-size:83.3333%}sub,sup{font-size:83.3333%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}audio,canvas,iframe,img,svg,video{vertical-align:middle}img{border-style:none}svg{fill:currentColor}svg:not(:root){overflow:hidden}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:hover{outline-width:0}table{border-collapse:collapse;border-spacing:0}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit;font-size:1em;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto;resize:vertical}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-cancel-button,::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}a,area,button,input,label,select,textarea,[tabindex]{-ms-touch-action:manipulation;touch-action:manipulation}[hidden][aria-hidden=false]{clip:rect(0,0,0,0);display:inherit;position:absolute}[hidden][aria-hidden=false]:focus{clip:auto}@charset "utf-8";html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}ul{list-style:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none;color:black}img{max-width:100%;height:auto;vertical-align:bottom}html{font-size:62.5%}html,body{height:100%}.container{max-width:1920px;overflow:hidden}@font-face{font-family:Mono Social Icons Font;src:url(../web-font/MonoSocialIconsFont-1.10.eot);src:url(../web-font/MonoSocialIconsFont-1.10.eot?#iefix) format('embedded-opentype'),url(../web-font/MonoSocialIconsFont-1.10.woff) format('woff'),url(../web-font/MonoSocialIconsFont-1.10.ttf) format('truetype'),url(../web-font/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont) format('svg');src:url(../web-font/MonoSocialIconsFont-1.10.ttf) format('truetype')}body{margin:auto;background:#fff;font-family:-apple-system,Helvetica Neue,Hiragino Kaku Gothic ProN
aKusano

2016/07/27 04:09

あぁ、minifyすれば当然コメントは削除されますよ。 それはpostcssに限らずどんなツールを使っても同じです。 コメントを残す=CSSを手編集する=minifyしない の意味なので、 minifyしていないCSSにコメントが残ればそれでOKです。
退会済みユーザー

退会済みユーザー

2016/07/27 04:16

ありがとうございました。 ミニファイしなければ残るのですね。 おそらくミニファイのプラグインの記載を削除してあげればいいのですね。
aKusano

2016/07/27 04:25

恐らくそうだと思います。とりあえず試してみてください。 あと、もしコメント付きの生CSSとminifyCSS両方欲しければ、 gulpでminifyファイルを別名保存するようにしておけば両方一度に出力できると思います。
退会済みユーザー

退会済みユーザー

2016/07/27 04:30

できました。@importで一つのファイルになっているもののコメントは確かに残りました。 ただなぜか下記のように日本語の部分が文字化けしています。 #map { width: 100%; height: 99%;/*height�̓{�[�_�[����������100�ƂȂ��̂ŁA100�ȉ��ɂ����B*/ position: absolute; top: 0%; left: 0; border: medium solid #FFF; border-bottom: medium solid #FFF !important; box-sizing: border-box;/*�p�f�B���O�ƃ{�[�_�[�????ƍ����Ɋ܂߂�*/ pointer-events:none;/*Map���ł̊g���k���Ȃǂ????��ɂ���*/ }
退会済みユーザー

退会済みユーザー

2016/07/27 05:48

>>> CSSでの納品を希望するということは、先方はそのCSSファイルを直接編集して運用する可能性が高いです。 もしそうなら、コメントのないCSSファイルを渡されたら困るはずです。 かといってこちらが手作業でコメントをコピペするなどという無駄な作業は愚の骨頂です。 ファイルをインポートして一つのファイル化することも行いませんか? フロックスを採用しているので、かなり細かくCSSファイルが分離しているのですが、 普通の制作会社ではほぼ知られておらず、嫌がられますかね? baseと各ページのcssファイルを別々になるようにインポートすることを考えないといけないですかね。大変です。
aKusano

2016/07/27 06:07

>日本語の部分が文字化け CSSファイル冒頭に文字コード入れてもダメですか? >ファイルをインポートして一つのファイル化することも行いませんか? >フロックスを採用しているので、かなり細かくCSSファイルが分離している flocssだからファイルが分割される、というのがよく分かりませんね。 Foundation/Layout/Object-Component,Project,Utility という各階層ごとに カテゴリ分けして設計しろ、というだけの話であって最終的に出力されるCSSまで 階層ごとにCSSファイル分割しろとまでは言っていないと思うのですが? sassなどのCSSプリプロセッサを使う前提であればこれらはパーシャルファイルとして 分割しておいた方が楽ですが、最終出力する際には1枚のCSSに結合して出力するのが普通ですよね。 それはともかく、納品するCSSをどのような形でどこまで分割するのかそれとも結合するのかも含めて、全て納品先との相談です。個別に事情は違いますのでその都度決めればよいことです。
退会済みユーザー

退会済みユーザー

2016/07/27 07:23

もちろん私はインポートして一つのファイルにしているのでその形で渡すのが理想なのですが、相手がどう思うかなと思った次第です。 ただ、それは相手によるというのが答えなのですね。 ・文字化けについて @charset "utf-8"; /* 説明  ・ baseで一括指定している物 box-shadowと背景のグラデーション ヘッダー、フッターとメインコンテンツの間にある隙間 中央ぞろえは、.centeringで一括指定 テキストのシャドウ ロングシャドウ */ /* Footer ----------------------------------------------------------------- */ .footer { box-shadow: 0rem 0.6rem 0.6rem -0.6rem rgba(0,0,0,0.9) inset; } をトランスパイルすると @charset "utf-8"; /* ���� �@�E�@base�ňꊇ�w�肵�Ă��镨 box-shadow�Ɣw�i�̃O���f�[�V���� �w�b�_�[�A�t�b�^�[�ƃ��C���R���e���c�̊Ԃɂ��錄�� �������낦�́A.centering�ňꊇ�w�� �e�L�X�g�̃V���h�E �����O�V���h�E */ /* Footer ----------------------------------------------------------------- */ .footer { box-shadow: 0rem 0.6rem 0.6rem -0.6rem rgba(0,0,0,0.9) inset; } となります。 ただ不思議なことに同じような内容でも文字化けしない場所もあります。 /* ----------------------------------------------------------------------------- Project -------------------------------------------------------------------------- */ @charset "utf-8"; /* 説明  ・ baseで一括指定している物 box-shadowと背景のグラデーション ヘッダー、フッターとメインコンテンツの間にある隙間 中央ぞろえは、.centeringで一括指定 テキストのシャドウ ロングシャドウ */ /* News ----------------------------------------------------------------- */ /* ul */
退会済みユーザー

退会済みユーザー

2016/07/27 07:24

サブライム3上では文字化けしていません。 こちらのエディターもまれに文字化けしてしまう謎の現象がありますが。
aKusano

2016/07/27 07:37

なんでしょうね。ちょっと分かりません。
退会済みユーザー

退会済みユーザー

2016/07/27 07:39

ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問