俺流レスポンシブコーディング
俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい
めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
Webサイトで機種依存文字（環境依存文字）を使っても大丈夫!? | ビジネスとIT活用に役立つ情報（株式会社アーティス）
かつて機種依存文字（環境依存文字）は、OSなどの環境の違いにより文字化けを起こしてしまうため、Webページにおいて使ってはならない文字として扱われていました。 しかし、これは昔のはなし。 実は、WebページがUTF-8などのUnicodeを採用している場合は、機種依存文字（環境依存文字）が問題なく使えます。 今回は、環境依存文字（機種依存文字）と、UTF-8について解説していきます。 機種依存文字（環境依存文字）とは？ 機種依存文字（環境依存文字）とは、WindowsやMacintoshなどのOSやフォントの種類などに依存してしまう、ある特定の環境上でしか正常に表示されない文字のことを呼びます。 代表的な機種依存文字（環境依存文字）として、下記が挙げられます。 丸囲みの数字
How speeding up your mobile site can improve your bottom line
今の KPI はビジネス成長に貢献しているか？ 「バイトル」が部門横断のデータ整備から真の KPI を問い直す
「img要素をpで囲う」仕様を読むのがめんどくさい人向け解説 - m31
web屋さんたちのTLで話題沸騰の「img要素、下から見るか？横から見pで囲うか？」問題について、Twitterでもやいのやいの言っていますが、件のツイートで挙がっている項目について、独自解釈ではなく、仕様についてきちんと解説したいと思います。 って書いたけどたぶんimg要素の話だけで終わる。 2019.9.12追記 この記事は書いたものを書きっぱなしにしておくつもりだったのですが、TwitterのDMでいただいたメッセージで気付かされたことがあり、一部に訂正と補足を追記することにしました。 このボックスで書かれている追記には、著者による嘘は含まれていません。もし追記の内容に誤りがありましたらそれはただのミスです。 また、追記にこのボックスを使用するにあたり、もともと記事内にあった同じボックスは別のボックスに置き換えました。 訂正の経緯については記事の最後で後述します。 img要素の仕様を
デバッグ作業が快適に！VS Codeにブラウザのプレビュー機能を加える機能拡張 -Browser Preview for VS Code
エディタで作業しながらデバッグをしたい人にぴったりな、VS Code内にChromeをプレビューとして表示させることができる機能拡張を紹介します。 ブラウザで単に表示するだけでなく、デベロッパーツールと連携させることも可能なので、デバッグがかなり捗ると思います。 Browser Preview for VS Code -GitHub Browser Preview for VS Codeの特徴 Browser Preview for VS Codeのインストール Browser Preview for VS Codeの使い方 Browser Preview for VS Codeの特徴 Browser Previewは、VS Code内に実際のブラウザをプレビューとして表示させることができます。 VS Code内でブラウザのプレビューが可能（Chrome Headlessにより）。 複数の
Webサイト制作の一連の流れをまとめてみました
Webサイト制作の一連の流れをまとめてみました。クライアント向けにまとめたものを少し手直ししてのせています。新人Web担当者さんや、新人ディレクターさんの参考になるかなと。 なるべく難しい言葉を使わず、理解しやすいよう平易な言葉で書いております。 ※流れや手順は制作会社によって違うのですが、概要はつかめるかなと思います。 目次と流れ 1. サイトのコンセプトを考える 2. 競合他社からクライアントのお店や商品を選んでもらうためのポイント（強み）を整理する 3. そのサイトで一番伝えたい内容を決める 4. お客さんが必要とする3以外の情報や、クライアントの伝えたい情報をまとめる 5. サイト更新は誰がするのかを決める 6. 想定使用デバイス（PCやスマートフォンなど）を決める 7. サイトの周知・宣伝方法を考える 8. ページの設計図をつくる 9. サイト制作にかかわる必要な素材を準備する
WEBサイト制作前やデザイン制作時に欠かせないヒアリングシートを作り直してみた | WEBとかデザインとか | アスパラブログ | アスパラガス
制作依頼時のヒアリングシート ヒアリングシートの内容には、業種によって様々なものがあると思いますが、WEB制作に関して言えば、制作依頼のお話が来た時点や、検討されている段階で、お客様の考えをアウトプットすることに大きな目的があり、その内容をもとにサイトの方向性や目標等を定めていきます。 アウトプットする内容としては、大きく分けて以下のような項目になると思います。 ■ WEBサイト構築の背景・目的 ■ WEBサイトのタイプ（企業サイト、製品紹介サイト・ECサイト、etc...） ■ ターゲットとするエンドユーザーの層 ■ WEBサイトから期待する効果 ■ 同業種・競合他社の有無とその動向 ■ 予算と制作スケジュール ■ 保守・管理に関して WEBサイトを"意味のある・効果のある"ものへと作り上げていく上で、上記項目は欠かすことのできない情報となります。 これらを踏まえた上で、その他様々なヒア
今すぐレベルアップ！企画書・提案書の書き方まとめ（Webサイト制作編） – 請求書作成サービス「Misoca(ミソカ)」
こんにちは、ブログ担当のトヨシです。今回はWebサイト制作の企画書や提案書の書き方を紹介しているサイトをまとめました。1ページのものから100ページ超えのものまでいろいろあります。案件に応じて参考にさせてもらいましょう。 とその前に、 「経理書類の作成が大変！」という方は、ミスなくカンタンに見積書や請求書が作れる「Misoca」（無料）がおすすめです！こちらから試しください↓ [adrotate group=”7″] それではいきましょう！ 上司を説得できる企画資料の作り方講座（1ページの企画書） EC/ネットショップ構築の予算をゲットできる企画書／上司を説得できる企画資料の作り方講座#5 | 上司を説得できる企画資料の作り方講座 | Web担当者Forum この連載では、さまざまな事例をベースに駄目な企画書を提示し、それをどう直せばいいのかということを丁寧に解説してくれています。今回のE
Webデザイナーの私はこんな風に情報収集しています
2018年5月24日 Web関連記事 先日CSS Nite in KOBE, Vol.34にて登壇させていただきました！ご参加くださった皆さん、ありがとうございました！その中でデザイナーとしての情報収集・情報発信についてパネルディスカッションもあったのですが、時間の関係であまり多くを語れませんでしたので、今回改めてまとめてみようと思います！ ↑私が10年以上利用している会計ソフト！ 情報収集する時のルール ただやみくもに、なんとなーく情報収集してみても、結局ダラダラしてしまいます。なので事前にルールを作っておくと続けやすいですよ。 1. 制限時間をつくる 一番大事なルールがこれかなーと思っています。Twitterで素敵なイラストが流れてくると見入っちゃいますよね！初めて見る面白そうなスクリプトがあると試したくなっちゃいますよね！わかります！！でも時間は有限。メリハリつけるためにも、情報収集
ウェブ制作にはWebStormがお勧め！ 使いこなせば操作が爆速になる機能のまとめ - ICS MEDIA
みなさんはウェブサイト制作で、どのテキストエディターを使用していますか？ 弊社ではHTMLやCSS、JavaScriptを扱うウェブ制作ソフトとして「WebStorm（ウェブストーム）」を全スタッフが利用しています。WebStormは有料のソフトウェアですが、日本語に対応しており、ウェブ制作に役立つ機能が豊富に搭載されていて値段以上の価値があります。 今回はWebStormの魅力について、「WebStormの概要」、「ウェブ制作に便利な使い方」、「コードリーディングに重宝する機能」、「コーディングの助けになる機能」の4点から紹介します。 ※本記事はWebStormの内容ですが、開発元のJetBrains社が提供しているIntelliJ IDEAやPhpStorm、その他のIDE（統合開発ソフト）で同様のショートカットや機能を使用できます。 本記事は初心者向けの内容ですが、続編記事「使用歴5
Adobe XDでWebデザインをしよう！画面作成からページ推移までの手順を紹介
2018年3月15日 Webデザイン, XD デザインやプロトタイプを作成できるAdobe XD。みなさん使っていますか？先日アップデートもされ、Photoshopとの連携がより簡単になったり、Sketchファイルも扱えるようになるなど、進化が進んでいますね。これまではWebサイトのデザインにはPhotoshopが多く使われてきましたが、これからはXDが主力となっていきそうな予感。ということでAdobe XDを使ったWebデザインの手順を紹介します！ ↑私が10年以上利用している会計ソフト！ 今回作成するもの このように簡単なホームページと問い合わせフォーム用のモーダルウィンドウの画面を作ります。プロトタイプ機能で画面推移のアニメーションも加えてみましょう！ 1. 画面の作成準備 Adobe XDを立ち上げ、Web用の画面を1280×800のサイズで新規作成します。「portfolio」と
Sneakpeekit Sketch Sheets
Catch insights, sketch ideas.Printable Wireframe Templates for Designers Planning apps or websites is not always completely digital: sometimes you may need pencil, paper and some good sketch sheet templates to speed up your creative process. Precision GridMultipurpose grid with column marks A generic A4 grid template with column marks ideal for website wireframes as well as icon, font and logo des
無料でアニメーションバナーも作れる超有能ツール！Google Web Designerの基本｜アナグラム株式会社
皆さんはバナー作成の際、どのようなツールを使用していますか？PhotoshopやIllustrator等の有料のグラフィックデザインソフトは、社内に導入していないケースやデザインの技術がなく利用していない人も多いのではないでしょうか。 フリー素材サイトでダウンロードした画像をリサイズし入稿するのも良いですが、テキストを一文加えるだけで印象が変わり、アニメーションを加えることで広告をより目立たせることができます。 2016年6月にFlash形式のディスプレイ広告がGoogle アドワーズへアップロードできなくなり、2017年1月以降Flash形式のディスプレイ広告が廃止されました。Flash形式と同じく動きのある広告は、HTML5広告を利用することが推奨されています。Google Web Designerでは工数もかけずにGoogle ディスプレイネットワークキャンペーン向けのHTML5広告
HTML5の子要素・親要素の入れ子のルールがすぐわかるツール
HTMLが、HTML5になってから、ありそうでなかったツール。作りました。 HTML5 入れ子チートシート。 どういうツールか たとえば、「a要素ってsection要素を子要素にすることってできるんだっけ？」とか「h1要素ってdtのタグで囲んでいいんだっけ？」とか思ったときに調べるツールです。 使い方 以下にアクセス。 調べたい要素にマウスポインタを合わす 「親」と「子」が出てくるので、どちらかを押下 色が変わった要素が、その要素が取り得ることのできる要素 ガラケー以外の、だいたいの端末やブラウザで動くはずです。 制作経緯 こういったことが簡単にわかるサイトが見つからず（探しきれていないだけかもですが）、仕様書を見てもわかりづらい。 HTML 4.01 は、ブロック要素とインライン要素さえ覚えていれば、なんとかなりましたが、HTML5からは複雑になってしまいました。 そこで、「なければ作れ
%25E3%2581%25AE%25E6%25AD%25A3%25E3%2581%2597%25E3%2581%2584%25E6%259B%25B8%25E3%2581%258D%25E6%2596%25B9%25E3%2582%2592)
Copyright(コピーライト：著作権表示)の正しい書き方を知っていますか？：webサイト制作 - webデザイン初心者｜sometimes study
webサイトの1番下にある『著作権表示』色々な表記を見かけるけどどれが正しいのー？って思ったことありませんか？ Copyright(コピーライト：著作権表示)の 正しい書き方を知っていますか？ webサイトでいう『Copyright(コピーライト/著作権表示)』は、サイトの1番下にある Copyright © 2015 sometimes study All Rights Reserved. (c) 2010-2015 sometimes study All Rights Reserved. こんな感じの表記のことです。 このページの所有者は私ですよ！という『著作権の所有を示すおまじない』みたいなものですね。ひとつずつ、一緒に書き方をおさらいしていきましょう！ 『著作権(ちょさくけん)』って何？ まず、著作権とは？ってところからですね。 著書などの 制作物に対して 発生する権利 知的財産権
WordPressで新着情報を表示するまとめ [SOHO ホームページ制作 東京・新宿区 スマイルワークス ]
コーポレートサイトなどでよく見かける新着情報エリアを設置する方法です。 最も一般的な、更新日付とタイトルにカテゴリーごとのアイコンを付けたタイプ。 PHP/HTML 新着情報を表示したいテンプレートファイルに記述します。 <div id="feed_area"> <?php query_posts('posts_per_page=5'); ?> <?php if (have_posts()):while(have_posts()):the_post(); ?> <?php $cats = get_the_category($post->id); $cat = $cats[0]; $img = '<img src="' . get_bloginfo('template_url'). '/img/category-' . $cat->category_nicename . '.png" alt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE9～IE11でtransformにcalcを使用すると無視される | HTML・CSS・JavaScriptのテクニック集 | Webサイト制作支援 | ShanaBrian Website
Diffchecker - Online diff tool to compare text to find the difference between two text files
web計。
