IllustratorでWeb制作をするときに気をつけたい5つの設定 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
CCの魅力を感じつつもCS6製品で様子を見ている、月額支払いがちょっと怖い。そんな九州ライター村上です、みなさんこんにちは。 今人気のフラットデザインはIllustratorが得意とする部分なので、最近Illustratorを使ってWebサイトを作ろうという動きが増えてきました。Illustrator使いとしては非常に嬉しい事です。しかし、DTPを得意とするIllustratorでWebサイトを作る際には、確認しておかなくてはいけないWeb用のポイントがあります。 今回は、初心者向けのちょっとした用語の説明と共に、Web用コンテンツ作成時に気をつけるべきIllustratorの設定をご紹介していきます。 IllustratorでWeb作業をする時に気をつけたい5つの設定 単位は相対単位のピクセルにする カラーモードはRGBにする ピクセルプレビューで作業する 各パーツはアートボードをわけて
Sublime Text初心者向け：覚えておけばとりあえずラクできるおすすめショートカットキーまとめ
こんにちは、霙(@xxmiz0rexx)です。 立て続けに記事を書いてしまうほど愛してやまない魅力的なエディタ『Sublime Text』。 便利な機能は星の数ほどありますが、今回はこれだけ覚えておけばSublime Textの恩恵にあずかれるはず！！という、 私のオススメショートカットキーたちをご紹介したいと思います:) ※Mac版です 覚えておきたいショートカットキー とりあえず一番オススメの3つをご紹介。とっておきの便利な子たちがいます。 私がSublime Textを使う理由の最たるものがこれで、もっと言うとこれがあるから使っていますｗ みぞれが選ぶ最も便利なショートカットキー3個 入力コマンド 結果
もっと広まって欲しいCSS - dskd
公開日2013-12-02タグAdvent CalendarCSSCSS Property Advent Calendar 2013 ２日目のエントリです。 何度も同じことを書いているのでいいかげんにしろっていう感じがしますが、僕がこの１年半くらいで「なぜ使われないのだ！ もっと広まってくれ！」と思っている CSS について記載します。 position: absolute; を使った絶対中央配置 ある要素を包含ブロックのど真ん中に置きたい時はとにかく position: absolute; を使った絶対中央配置が便利です。大まかな書き方は親要素に position: relative; を指定したのち、配置したい子要素に対して下記を適用するというものです。 .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0;
Webデザインが3倍速くなる！Photoshop神速テク4つ
カンプのデザインやパーツの作成など、Webデザインにも欠かせないPhotoshop。もっとラクに、もっと速くWebデザインするために、すぐに役立つ4つの時短テクニックを紹介します。 サイズ違いのバナーはまとめて使い回し Photoshopでよく作るモノの1つといえば、バナー。掲載場所や配信先によってサイズが異なるバナーをバラバラに作成すると使い回しが面倒だし、写真や文言に変更があったときにいちいち直すのが大変ですよね。 いろんなサイズのバナーを1つのPhotoshopファイルにまとめて作成し、写真やロゴをスマートオブジェクトで一元化しておくと、バリエーションをスピーディに作れ、修正にも対応しやすくなります。 例として、大中小の3つのバナーを一気に作ってみましょう。作成する最大サイズのバナーが収まるように新規ドキュメントを作成し、大きいサイズのバナーから作成します。 レイヤーに素材を配置して
css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net
css3のアニメーションプロパティ、transitionがとても面白いので何となくアニメーションのサンプルを色々と作ってみました。まだ対応ブラウザは少ないですが、将来の為に予習してみたのでシェア。 css3のtransitionプロパティは変化を与えるプロパティです。アニメーションを実装できるプロパティはtransitionとanimetionがあり、後者のほうが「アニメーション」としての位置付けっぽいのですが、今回は何となくtransitionを使用しました。 プロパティ：-webkit-transition 対応ブラウザ：webkit系(GoogleChrome、Safari等) JavaScript：未使用 （※ソース閲覧の部分はjsを使っています） 一応アニメーション以外（角丸など）は-mozも入れています。 サンプルなので「-webkit-transition: *s ease-
お問い合せフォームをコーディングするための9つのTips | 株式会社LIG
こんにちは。 LIGフィリピン支社代表のせいとです。 お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。 どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。 ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。 そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。 また、今回の記事を書くにあたり、デモページを作成しました。 こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。 ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips 1. ボタン系の要素は全て<button type=”submit”></button>を使う 「送信する」「入力画面に戻る」などの要素を作る際、タグは
IllustratorでのWebデザインがいい感じ！おすすめポイントや設定いろいろ
2014年3月19日 Illustrator, Webサイト制作 これまでは「WebデザインといえばPhotoshop」というのが通例でした。しかしIllustratorもWeb制作の環境に適応されてきた今、フラットデザインやイラストを多く扱うWebサイトでは断然Illustratorをおすすめします！今回はあまり知られていないIllustratorとWebデザインの相性や、Webデザイン用の設定方法等をご紹介します。 ↑私が10年以上利用している会計ソフト！ Illustrator初心者さんへ Illustratorはベクター形式の画像を作成できるAdobe社のアプリです。ロゴやイラストを作る時にはかかせません。Adobeの公式チュートリアルサイト、Adobe TVではIllustratorの概要やチュートリアルをはじめ、新しい機能の紹介も随時追加されています。 Illustratorは
隠れた便利機能ベスト3
こんにちは。デザイナーのハルエです。 今回は、知っているのと知らないのとでは作業時間に圧倒的な差がついてしまうPhotoshopの効率化機能マイベスト3を紹介させていただきます！ 独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！ ※2014年3月7日に公開された記事を再編集したものです。 その1：Vanishing Pointでハメコミ合成 みなさん、“Vanishing Point（ヴァニシングポイント）”機能をご存じでしょうか？ 機能の存在は知っていても、使ったことのない方が多いかと思います。 このVanishing Point
jQuery：チェックされたら or 入力されたら送信可能にするボタンを実装する方法 - NxWorld
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
Macの基礎の基礎: Spotlight編
「Windows から Mac に乗り換えたけどよく分からない」「いまいち使いこなせない」という方のための連載、2回目は「Spotlight」です。 Spotlightとは Mac を使い始めたばかりの方にとって、Spotlight は「ファイルやフォルダを検索する時に使うもの」のように見えるかもしれません。 確かにそれは Spotlight の主要な機能ですが、Spotlight はあらゆる調べ物に利用することができます。 Spotlight を使いこなせるようになると、たとえば以下のようなことができます。 コーディング（HTML/CSS/JavaScript などの記述）の時間を大幅に短縮する 英語を書く時間を短縮する 言葉の意味を調べる 複雑な計算を素早く行い、結果をクリップボードにコピー マウスカーソルを動かさずにアプリケーションの起動や切替えをする 指定した期間に作成したファイル
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
横に水平線のあるテキスト
図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
[CSS]アイテム数が不明でもカラム数に合わせてぴったりに配置するスタイルシート
下記のような3カラムのグリッドに複数のアイテムを配置する時、アイテムの数が3の倍数だったらぴったり収まりますが、アイテムが7, 8個の場合は最後に余白を生じます。 もちろん余白のままでも良い場合はありますが、ぴったり収めたいという時に役立つスタイルシートのテクニックを紹介します。 Tetris & The Power Of CSS 基本となるHTMLは、リストでアイテムを配置します。 HTML アイテム数は、適当に変更して構いません。 <ul class="flex-container"> <li class="flex-item">1</li> <li class="flex-item">2</li> <li class="flex-item">3</li> <li class="flex-item">4</li> <li class="flex-item">5</li> <li cla
スマートフォンのブラウザにおけるURLスキームの解釈：That's the Way to GO!：オルタナティブ・ブログ
個体識別番号を扱わないリワード計測の場合、このURLスキームを使ってSDKを動かすのですが、ブラウザにURLスキームを記述するときそれぞれのOS・バージョンによってURLスキームの扱いが変わるので注意が必要です。ここのところ、ちらほら問い合わせの連絡があったりしていて、ネットで検索しても載っていなかったので備忘録含め投稿してみます。 iOSもAndroidもアプリ毎に設定することができて、設定すると他のアプリからそのURLスキーム経由で、アプリを起動することができます（*1）。わかりやすい例でいうとiPhoneのSafariから「instagram://」と入力して「開く」を選択するとInstagramが起動する感じです。 さらにパラメータみたいのが設定できて「instagram://camera」と入力して開くとInstagramのカメラが起動するといった具合にとても便利な機能なのです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
https://coliss.com/articles/build-websites/operation/css/css-vertical-align-anything-by-sebastian.html
ウェブサービスの body 要素に出力されている id と class まとめ · Issue #56 · shikakun/tips
ENTACL TECH LAB.