「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
「達成感がすごい」「みんなもぜひ使ってみて」 グラフィック作成ツール「Canva」が有能すぎると話題！ | GetNavi web ゲットナビ
「達成感がすごい」「みんなもぜひ使ってみて」 グラフィック作成ツール「Canva」が有能すぎると話題！ デザインの知識がなくても簡単にグラフィック作成ができるオンラインツール「Canva」が大きな話題を呼んでいる。無料テンプレートが豊富で、ユーザーからも「デザイン下手だから大助かりのツールです」「思ったより可愛らしい素材が用意されてて嬉しい！」と好評のようだ。 出典画像：「Canva」公式サイト より テンプレートが豊富な「Canva」同ツールでは、プロが手がけたハイクオリティなレイアウトを用意。美しいデザインに必要なテンプレートが揃えられているので、さまざまなグラフィックデザインに活用できる。ほかにも、厳選された写真素材やイラスト素材を収録。自分で撮影した写真を使用することが可能で、フィルター機能などの加工メニューも搭載されている。 サービスを利用するためには、最初にメールアドレスとパス
Webデザイン制作を楽にするCSS3コード生成ジェネレーターのまとめ10個+１個 - ホームページ制作やリニューアル印刷物デザインなら大阪のWPC
Webデザイン制作を楽にするCSS3コード生成ジェネレーターのまとめ10個+１個 Webデザイン制作を楽にする、CSS3コードを生成してくれるジェネレーター10個と、CSSコードを綺麗に並べてくれるサイトを紹介します。 紹介され尽くした感がありますが、参考にして頂ければと思います。 CSS3コード生成ジェネレーター ｛CSS}Porterl グローバルナビにある「CSS Generators」から、 ・角丸・ボタン・テキストシャドウ・ボックスシャドウ・メニューなど色々なジェネレーターが選べます。 http://www.cssportal.com/ CSS3プロパティジェネレーター 日本語サイトなのでわかりやすいく、グラデーションやドロップシャドウ、角丸など作成可能です。 http://css-eblog.com/eblog_sample/0912/css3-generator/ 3D CS
Webクリエイターボックス
WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ 続きを読む Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します。 続きを読む WebクリエイターボックスのX: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったWeb関連の情報トップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね
スマートフォンで画像がぼやける問題の簡単な対処法 Retina対応しよう！ | 独学でWebデザインまとめんばーず ｜Webクリオンライン
Retinaディスプレイ対応のスマートフォンやタブレットで画像がぼやけた感じになってしまうのは、解像度に対する処理が異なるためです。 詳しくはこちらにまとめています。 ⇒ スマートフォンで画像がぼやけるのはなぜ？「デバイスの画像解像度」とスマホ表示について調べてみました。 画像をRetinaディスプレイに対応させるには、以下の方法が挙げられます。 img要素に直接サイズ指定する方法 html5から追加された新しい属性 srcset属性を使う。 CSSのメディアクエリを使う。 CSS Spriteを使う。 Retina.jsなどのjavascriptを使う。 このページでは、一番簡単な方法として「img要素に直接サイズ指定する方法」と「srcset属性を使う方法」をご紹介しています。 その他の方法については、とても分かりやすく解説されている参考リンクを掲載しておきます。 img要素に直接サイ
WebデザイナーもGit使うといいよって話 | Cherry Pie Web
※この記事では「Webデザイナー」は、「ノンプログラマ」の意味で使っています。 psd、ai などの材料データの管理ではなく、サーバーにアップするファイルの管理の話です。 サルでもわかるといわれても、やっぱりわからない・・・ Web制作をやっている人は、少なからずバージョン管理システムの話を聞いたことがあると思います。 特にGit（ギット）っていうのは、内容まで知らなくても名前くらいは聞いたことがありますよね。 で、ネット上ではバージョン管理システムのメリットに関するブログ記事なんかもたくさんあって、変更履歴をたどれるとか、複数人で同じファイルを修正したりといった時のトラブルに対応できるとか、なんか便利そうだなーとは思っていたわけですが、ずーっと導入は見送ってきました。 その理由は・・・ 「Git入門」とか書いてある記事を読んでも導入方法が書いてあるだけで、実際に使うシチュエーションが思い
WEB制作時に役立つ！ダミーテキストに使える定型文まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日、弊社プログラマーの段田さんのブログで、ボーナスアップの道具として利用された野田です。 あれは、久しぶりに傷ついた。 そして、プライベートでもいろんな人にいじられた。 ネットって怖いですね。 さて、今回は、WEB制作に役立つ定型文のご紹介を致します。 僕自身、デザインする際に構成からガッツリ考えるのが大好きっていうか仕事なので、 それにあわせてダミーテキストを考えることが多いです。 デザインを提出する際には、「テキストテキストテキスト」や「ダミーダミーダミー」で提出することは絶対にしません。 お客様の意図を読み取ってこちらからご提案させていただくということも、Webデザイナーには必要なスキルの一つだと思うからです。 あたりまえなことですが、こういう部分に気づかない方も案外いらっしゃいます。 正直、僕もデザインを始めてすぐの頃にはそんな感じでした。 「仮」という言葉に甘えてしまう事は良く
ひとりでWeb制作できた！「知識０から学ぶ」すごいスライドやサイト２７
作成：2013/07/22 更新：2014/11/01 Web制作 > 先日、お客さんのところへ提案にいったところ、「サイトを自分でも作りたいので定期的に講習会を開いて欲しい。Wordしか分からない。」と言われました。とはいっても、自分である程度、継続して勉強しておかないと、受講する人は2回目以降の受講内容を理解出来ないし、教える人も基本知識をしっかり身につけておかないと、質問に答えることもできません。 今回はWeb製作をするなら必ず抑えるべきこと、知識「０」から学ぶ、基本的な知識を習得できるスライド・サービス・サイトをまとめました。ディレクションにもOK。メジャーなもの中心です。とはいえ量が膨大になったので、必要な部分だけピックアップして学びましょう。※スライドがないものに関しては、お役立ちリンクをつけてます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C
W3C Link Checker
Enter the address (URL) of a document that you would like to check: More Options Summary only Hide redirects: all for directories only Don't send the Accept-Language header Don't send the Referer header Check linked documents recursively, recursion depth: Save options in a cookie This Link Checker looks for issues in links, anchors and referenced objects in a Web page, CSS style sheet, or recursiv
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Triangle Generator | Built in AngularJS
http://www.hp-stylelink.com/news/2014/08/20140826.php