サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第3回目となる本記事ではウェブ業界の「HTMLコーディング」や「フロントエンド」を中心にアンケート結果を紹介します。アンケートは筆者のTwitterから実施していたものです。CSSのレイアウトに使うのはFlexboxが多い ウェブサイトの大枠レイアウトを組むときに一番使っているCSSの種類を質問しました。 727票の回答があり「float」が32%、「Flexbox」が51%、「Grid Layout」が11%、「table」が6%でした。 Flexboxが最多となったのは、未対応ブラウザ（例：IE9）が無視できるシェアまで下がったことや、floatよりFlexboxのほうが
先週のCreative Cloudアップデートで、Adobe XDが正式版としてリリースされました。Adobeユーザーはもちろん、Windowsがメイン環境の人にもUI/UXデザインの本命と言えるでしょう。 昨日のAdobeCreative Cloud道場のライブ動画ではAdobe XDの近い将来の機能として、タブレット用のレイアウトを作成したら、人工知能Adobe Senseiでスマホ用の複数のレイアウト候補を自動作成し、あとはそこから選び出せるようになるとのことです。作業には時間をかけず、クリエイティブに時間をかけることができますね。 Adobe XDでWebサイトやスマホアプリを制作する際に役立つ、ユーザーフローやワイヤーフレーム、グリッド、スタイルガイド、UIコンポーネントなどの無料素材を紹介します。
Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。 デバイスのdpiによる見え方 このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。) 109ppi(Thunderbolt Display) 220ppi(MBP Retina Display) 以下のことがわかります
Webサイトをコーディングするにあたって必ず必要になる技術の一つに、「ロールオーバー表現」があります。 「ロールオーバー表現」とは主にリンク要素にマウスポインタを載せた際に、色や画像等が切り替わる表現のことです。 「ロールオーバー」に似た表現で「マウスオーバー」「オンマウス」「ホバー」といった言い方があります。 どれも同じ意味で使われることがありますが、厳密には「ロールオーバー」は切り替わる動作そのものを指し、「マウスオーバー」「オンマウス」「ホバー」はマウスポインタが何かに乗った状態のことを指します。 今や画像のロールオーバーは、グローバルナビゲーションやボタン等Webサイトを構築する上で必ず使用すると言っても過言ではない技術ですが、実装方法がいくつか存在するため、どの方法で実装すればいいのか迷うことがあるかと思います。 また、普段使っている方法が果たしてベストなのか？疑問に思いながらコ
ダミー画像の無料サービスはいくつかありますが、真打ちとも言える高性能なダミー画像が利用できる無料オンラインサービスがリリースされました。 ダミー画像はレスポンシブ対応、可変画像や高さが不揃いの画像にも対応しています。しかもオンラインなのにオフラインでも利用できてしまう優れものです。
（2016年7月26日：フォロー記事を書きました。「Windowsで游ゴシックが汚いのは、結局誰が悪いのか？」） （2016年7月11日追記：Windows8.1においても細字ではなく標準が使用されているのではないかというご指摘を受けて、若干表記を修正しました） （2016年6月29日追記：Twitterでご指摘を受けて、Windows8.1と10での違いを追記しました） （2017年3月27日追記：当サイトでの使用CSSについて追記しました） （2020年9月13日追記：当サイトでの使用フォントについて追記しました） タイトルが旬を外していて、しかもちょっと釣り気味で申し訳ありません・・・ OS X MavericksとWindows 8.1に共通のフォント「游ゴシック」・「游明朝」が搭載され、CSSのfont-familyに「游ゴシック」を指定すれば、Webデザイナーの長年の悲願であっ
1500以上の会社、お店が利用中の月額無料HP制作サービス 「HPの制作を安心して任せられる業者が見つからない＞＜」 そんなふうに頭を悩ますアナタ。 以下の「ウェブさえパック」はもうチェック済みですか？ HPを作るのに必要なものがパッケージになってるお得なサービスです。 料金と事例を見てみるHTMLテンプレートをいじくると、「こんなデザインにするには、これが必要なのか」と実践的に技術を学べます。それに、手を動かした結果がすぐにデザインに反映されるので、何よりやってて楽しい。今まで何度もホームページ作りを断念してきたヒトにおすすめしたい独学の方法です。 そもそも、自分で全部やろうとすると、ホームページ作成に必要なスキルは、「HTML／CSS」「JavaScript」「画像編集・処理」「コピーライティング」「ライティング」など、あげだすと切りがないです。 ありがちな失敗パターンは、最初から全
Yamadaです。 かれこれWeb屋暦が14年くらいになるんですが、こうしてWebに携わっていると、3ヶ月周期で情報の入れ替えをしていかないと、正直追いつかないと感じます。そんな激流のようなWeb業界にこれから飛び込もうと言う新卒の方や、中途の方に送るバイブルとなればと思います。 というわけで改めて春ですし、これからホームページ（Webサイト）を作成してWeb屋さんになる方へ送るお勧めサイト集です。 後編はこちらWeb制作を始める人の為のスキル・ワイヤーフレーム・SEO・マーケティング・Webサービスの基礎情報 忘れないで欲しい事Web制作には、様々なスキルが求められます。 しかしその技術が、いつの間にか消えていったり、使えなくなったりしました。新しいデザイン、新しいコード、新しい言語、新しい環境、様々なものがあります。しかし、それらを追い続けていくうちに、一つ、とても大事な事を忘れて
Bracketsがメジャーバージョンアップ 昨日、これまで小刻みなマイナーバージョンアップを繰り返し0.44までバージョンを重ねていたBracketsが1.0と、正式なバージョンアップを行いました。わーい！！確か私は0.14くらいから（2年近く経ってる？）使っているはずですが、開発には既に3年ほどかかっているそうです。 Brackets – A modern, open source code editor that understands web design. 今回はこれについてではなく（別途記事を書きます書きました→Bracketsだって激しく進化してますよ！メインエディターとして1年使ってみて）、この1.0と同時にリリースされたBrackets制作チーム肝いりの拡張機能、「Extarct for Brackets」の紹介をしたいと思います。これはまだまだ多いPSDカンプからのHTM
Webデザイナーを目指す初心者さんが知っておきたい専門用語WebデザイナーとしてWeb業界で活躍したいという初心者さんが、最初につまづきやすいのが、その専門用語の多さ。Webデザインの入門書をパラパラッとめくってみても、見慣れない単語に圧倒されてしまう人も多いのではないでしょうか？そこで今回はWebデザイナーなら知っておきたい単語をいくつかまとめてみました。Webデザインのお勉強中に「これなんだ？」という単語に出くわした時に参考にしてみてください！ 目次あ行か行さ行た行は行ま行や行ら行わ行あ行アクセシビリティWeb アクセシビリティとも呼ばれます。アクセスのしやすさを表し、実生活上ではバリアフリーとも知られています。Web のアクセシビリティにおいては、音声によって Web ページを読み上げたり、動画に字幕をつけるなどの工夫をして、身体の不自由な方でも Web サイトを利用可能な状態にする
CCの魅力を感じつつもCS6製品で様子を見ている、月額支払いがちょっと怖い。そんな九州ライター村上です、みなさんこんにちは。 今人気のフラットデザインはIllustratorが得意とする部分なので、最近Illustratorを使ってWebサイトを作ろうという動きが増えてきました。Illustrator使いとしては非常に嬉しい事です。しかし、DTPを得意とするIllustratorでWebサイトを作る際には、確認しておかなくてはいけないWeb用のポイントがあります。 今回は、初心者向けのちょっとした用語の説明と共に、Web用コンテンツ作成時に気をつけるべきIllustratorの設定をご紹介していきます。 IllustratorでWeb作業をする時に気をつけたい5つの設定 単位は相対単位のピクセルにする カラーモードはRGBにする ピクセルプレビューで作業する 各パーツはアートボードをわけて
概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
こんにちは。 会社からMacBookPro Retinaディスプレイモデルを支給されました浅海です。 Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。 特に文字を画像にしている場合なんかは、かなり気になります。 Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。 これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。 目次 imgタグCSSJavaScriptGoogleMap
作成：2014/01/27 更新：2015/08/07Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。エンジニア速報はTwitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリングHTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェックCSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
心構え ・HTMLは最小限にする ・JSも最小限。不要なら ・デザインとか全部決まってから手を付ける。 開発環境 ・リアルタイム入力補完ができるエディタ （プログラマならEcripseとかEmeditorとか、MacならCodaか） ・動作確認の InternetExplorer ＞Macで動いてWindowsでレイアウト崩れた！Windowsが悪い！ ←なに言ってんだ・・・？？ ・おまけでDreamwaver。 下準備 ・予め画像を切り出しておく。HTMLコーディング開始 ・画像切り出しは全部後回しにして、 ZencodingでHTMLを「一気に」組む。HTML”だけ”組む。 IDやclass名もここでつけちゃう。 ブラウザで開くとめちゃくちゃだけど気にしない。 文字も入力しない。 画像やCSSパスを設定する。 ・作ったHTMLをDreamwaverにコピペして、 Dreamwave
What's this?HTMLソースをもとに、id,class名CSS、子孫セレクタCSS、子セレクタCSS、LESS、SASS、SCSSを自動生成するオンラインサービスです。 従来のHTMLコーディグを強力にサポートします。 What's LESS/SASS/SCSS? LESS / SASS / SCSSはCSSを効率的にコーディングできるCSSメタ言語です。 従来のCSSに比べ子孫セレクタ・子セレクタを簡単に管理することができ、高速にコーディングすることができます。 LESS OFFICIAL SASS/SCSS OFFICIAL 関連サービス 高画質サムネイル生成サービス HTTPクエリデコードSQLフォーマッター Insert文フォーマッター スペースフォーマッター JSONフォーマッターHTML/XMLフォーマッターEmmet toolkit for <textare
HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [StyleGuide]「GoogleHTML/CSS StyleGuide」の和訳Googleが作ったStyleGuide『GoogleHTML/CSS StyleGuide』を和訳していただいた『GoogleHTML/CSS StyleGuideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う！ 🐰 [S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
