新着記事アイスコーヒー、ストロー無しで飲んだ方がおいしい説2020.02.13【85点】「トゥルーマンショー」作品紹介と感想。動物世界」を鑑賞しました。ん執筆者:散歩ブロガー「ぱっかん(@pakkan316)」福岡散歩ブログも絶賛更新中!コーディングする時に、「デザイン通りに組み上げる」という当然のことが中々面倒です。そこで、「コーディングしながら、簡単にデザイン画像と照らし合わせたり、ガイドラインを表示させるプラグイン」を作りました。※以前「HTMLコーディング時にガイドラインを表示するjs」を作りましたが、そのレベルアップバージョンです。demoをご覧ください。ソース全貌まずはdemoをご覧ください。demoページ画面右側のボタンを押すと表示切替できます。取り外しておく必要があるので、「最後にjsファイルを消すだけ」という手間の無さにこだわりました。以下、使い方、簡単な説明です。●こんなことが出来る〇コーディング時に役立つ・「どうして私のデザイン通りにコーディングしてくれないの?」と言ってくるデザイナーを黙らせたい・「ほらここ。・demoページ、画面右側に「P」「G」「H」のボタンがありますね。Hide(再リロードするまでこの操作ボタンを非表示化)・レスポンシブ対応なので、ウィンドウサイズをスマホサイズくらいまで縮めると、ガイドラインの位置や、画像が切り替わる※demoページでは、PC版は980px幅で固定し、SP版は、”両端からそれぞれ15px”というスタイルで指定。えておきたいこと画像位置は基本的にズレていくテキストの兼ね合いなどで、実際のデザインデータとコーディングデータはどう足掻いてもズレていきます。基本的には「1枚絵のデザインデータ」のキャプチャを使ってそれと見比べながら作業していきますが、要素ごとにどうしてもズレていきます。一応その対処の為に、coding-support.jsの中で画像の高さをいじれる項目を作っています。ここを変更して高さを調節すれば良いのですが、実際の作業で使ってみて「結構頻繁に高さを変えてる」という事実に気付きました。そんな時はブラウザの「要素を検証」を使って、「.picture-cover」というclassが付与されたimgタグ(恐らく閉じbodyタグの直前)のスタイルを一時的に指定してあげてください。このやり方だとページリロードすると設定が飛んでしまいますが、臨機応変に高さを変えていくことが可能。画像の色味はcssで少し暗くしてる表示させるキャプチャ画像には「filter:brightness(0.9);」というスタイルをかけてわざと暗くしています。これは、実際に自分で作業してみて「コーディングデータと画像が全く一緒だったら、今どっちを表示してるか分からなくなる」という事故が頻発したためです。コーディングデータで特に面倒なのは「余白」「間隔」の調整なので、色味に関するところで対策しました。'brightness(0.9)'」を削除すれば外せます。opacity設定はお好みで「デザインデータを透過させて、実際のコーディングデータと照らし合わせる」という使い方が便利な場合もあります。デフォルトでは「0.6」に設定してますが、ここも各々で変更する前提の設定項目です。21行目付近)飽くまで作業補助用のjs納品前にソースをしっかり消しておくことSP版の調整ではあんまり使わないSP版のデザインデータが「750px」で作られていた場合は、ディスプレイサイズが375pxの「iPhone8」で照らし合わせないと、当然ですがズレます。目安としてご利用ください。ローカルサーバーを構築してた方が良いweb屋さんならほとんどの方がローカルサーバーを使って作業してるので問題ないと思いますが、XAMPPやMAMPPを使用して、ローカルデータにもhttpからのフルパスでアクセスできる環境だと、本jsの真価が発揮できます。src="http://localhost/test/coding-support.js"></script>」と加えれば良いだけなので、「納品データの中に作業用jsファイルを追加する」という手間を省けます。「coding-support.js」をダウンロードし、解凍する。〇ダウンロードページhttps://gist.github.com/maehara000/e6a30a65f34430f9d2cd2fe8927fbff02ダウンロードしたcoding-support.jsをhtmlのhead内で読み込む。src="/js/coding-support.js"></script>※「3.3.1/jquery.min.js」は状況に応じて入れる。(良く分からない場合は、まず入れずに試してみて、動かなかったら入れてみる)※「/js/coding-support.js」のディレクトリは、jsファイルを保存してるパスに合わせて変更する。「coding-support.js」の7~40行目くらいまで、書いてある項目通りに設定してください。*/」というコメントアウトで囲まれた箇所ですね。〇スタイルの根本的な部分を変更したい場合cssが分かる方なら、「coding-support.js」の96~189行目付近のスタイルをいじっていけばなんとかなります。状況に応じて変更してください。いうの前提のjsなので。#ddd;という感じで、単語をハイフンで繋ぎますが、jsの場合は「backgroundColor」という風に、キャメルケースで入力する必要があり、そこだけ気を付けていれば大丈夫なはずです。キャメルケースとは、単語の間をハイフン(-)で繋がず、代わりに単語の頭文字を大文字にする記法です。まとめもし改善点、ご要望があればコメントください。jsはまだまだなので、勉強がてら頑張ります。↓面白かったー!って人は是非シェアしてください。動物世界」を鑑賞しました。柳龍光」S2E8「制裁」感想。人の誕生日が覚えられない2018.10.26【総数151点】ブックオフの出張買取で売却してきた2019.01.09読書嫌いの僕が実践してる「本を読み続けるテクニック」5つ2019.01.01「自己啓発本」を読んで、普通に生活が激変した2018.05.13治験入院を経験して、世界の美しさが分かるようになった2018.05.13一人暮らしの僕が3年以上愛用し続けてる100均アイテム8選2019.01.26サンタクロースを信じ込ませる必要性。そもそも子供は本当にサンタを信じているのか?2019.01.042012年12月。dot(アレクサ)」を買ってみた2019.01.22「君の名は。」の矛盾点(突っ込み所)を都合良く補完してみる2018.05.23歩きたばこを撲滅する方法を思いついた2017.08.27スーツが嫌い。コメントをキャンセルメールアドレスが公開されることはありません。名前:ぱっかん(@pakkan316)web系の会社で働きつつ、副業(趣味)でメディア運営をやっています。運営してるメディアぱっかんブログ(当サイト)やるゲーブログ福岡散歩ブログ「内省」という資質に優れており、それを活かした映画系の記事が得意。【ストレングスファインダーの結果】着想/最上志向/内省/共感性/運命思考youtubeで、ゲーム実況とか、福岡散歩レポートの紹介とかやってます。Area」という名前で音楽活動をしています。エモいバンドサウンドが好きで、そういう曲をたまに作ってます。名前:ぱっかん福岡市内で一人暮らししながらボサーっとしてます。映画が好き過ぎるのでそれ系の記事を書きなぐってます。普段から頭の中がごちゃごちゃしているのでスッキリする為にブログを始めました。詳しいことは「ぱっかんについて」に書いてます。新着記事アイスコーヒー、ストロー無しで飲んだ方がおいしい説2020.02.13【85点】「トゥルーマンショー」作品紹介と感想。