ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。(CSS3のアニメーション機能のみで実現)
ページ背景をフルスクリーンのスライドショーにするjQueryプラグインを作ってみた。(CSS3のアニメーション機能のみで実現)
こんにちは、デザイナーの藤田です。気候が暖かくなってきたせいなのか、最近ペットとして飼っている猫が私の近くに寄り沿って来なくなり、猫肌恋しい今日この頃です。 さて、今回はスペースを十分に使用することで、ユーザビリティを向上させ、同時に私の心の隙間までも綺麗に埋めてくれる「メガメニュー」を使用したサイトをまとめてみました。 ここ数年、目にする機会が増えた一方で、いざ自身でメガメニューのデザインを行おうと思うと、それらをまとめた参考サイト(特に国内サイト)が極端に少なくて困った、なんて経験をお持ちの方も多いのではないでしょうか? かく言う私もその一人で、自身の備忘録も兼ね、国内サイトで「メガメニュー」を使用したサイトをまとめてみました。 独学でつまずいていませんか? Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめ
display:table-cell; を活用する リキッドレイアウトのコーディングにすごく便利。 親要素に display:table; 子要素に display:table-cell; 記事リストなど、画像とテキストを横並びにするときに。 均等に横並びにしたいときに。 タップ時のカラー設定 CSSで以下のように設定。アルファ値も設定可能。 -webkit-tap-highlight-color: rgba(255,105,183,0.6); 画像、iframeに max-width を指定 img・iframeは、サイズが大きすぎて画面からはみ出すことがあるので max-width:100%; を指定する。 word-break:break-all; を指定 スマホは幅が狭いため、長いURLなどが1行に入りきりません。 word-break:break-all; を適宜指定する。 フォ
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近友人と『中学生円山』を観に行きました。 女性にはおそらく理解できないであろう「男子中学生あるある(主に下ネタ)」が盛り込まれていて、いい意味でヒドイ内容でした。もう一回観たい(´ω`) さて、今回は「HTMLとCSSはわかるけどjQueryってなにそれ、おいしいの」という方向けに、今日から使える簡単かつ便利な3つのメソッド「slideToggle/fadeToggle/toggleClass」をご紹介します。 こいつらを知っとくと下記のようなメリットがあります。。 アコーディオンメニュー、タブ、スマホサイトでよくある「上からスラスラ出てくるメニュー」とか実装できる 超シンプルな記述なので、今日から使える いやーこれは便利ですね。 というわけで、早速解説していきます。 【こちらもおすすめ】 超簡単jQ
こんにちは。ライターのあだちです。 仕事柄、「ヒアリング」経験はかなり回数を重ねてきました。 ヒアリングを行うシーンは大きくわけると2つ、営業のときのヒアリングと、要件定義のときのヒアリングです。この2つのヒアリングを区別しないことも多いのですが、やり方が異なるので、私はこの2つを明確に区別していました。 今回はその一部である営業のときのヒアリング方法についてまとめます。 なお、以下のヒアリング方法は新規のお客さんを想定しています。また当然ですが、以下の方法はあくまでも標準的なシナリオであり、お客さんの反応を見て臨機応変に対応するのが原則です。 では、行ってみましょう。 【こちらもおすすめ】 STEP1 営業ヒアリングの目的を理解する なぜ営業はヒアリングをするのでしょう。色々な考え方がありますが、私はお客さんの納得感のためと認識していました。面白いもので、人は他人に言われたことはあまりや
こんにちは。LIGフィリピン支社代表のせいとです。 全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや!間違いない!」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、 今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。 それは「そもそもSassが何なのかよくわからない。プログラミング言語??」ってことと、「インストールが上手くいかない!コマンドプロンプト使い方わからない!Dreamweaver(以下DW)動かない!GUIソフトってなに!?」ってことです。
どうも〜こんにちはぁ! 最近レスポンシブなサイトを作ることが多いライターの、のび太です。 モバイル、タブレットユーザーが最近どんどん増えてきているので、Web制作者にとってレスポンシブなサイトが作れるってことが必須になるんじゃないかなぁ〜って感じますね。 レスポンシブデザインを制作するときに意識しなきゃいけないことはいろいろありますが、今回は「これはぜったいに知っておきたいよね!」って感じた基本的なことを7つご紹介させていただきたいと思います。 レスポンシブデザインを制作するときに意識しておきたい基本項目7つ 1. 画像の代わりになるべくCSSで表現すべし レスポンシブデザインで画像を使うと、モバイル端末ではPCに比べて回線速度が遅いため、読み込み時間が余計にかかってしまいます。 そのため、画像ではなくCSSで表現可能なものはどんどん代替していったほうがいいと思います。 立体ボタンや矢印だ
こんにちは、株式会社LIG 執行役員の寺倉と申します。 自社サイトの分析、競合他社、類似サイトの発掘と分析は、KPI設定や改修、WEB戦略を立てる上で非常に重要です。 今回は登録不要、かつ無料で使えるサイト分析ツールとサービスを8つほどまとめてみました。これが誰かのお役に立てば幸いです。 株式会社LIGとは 2007年設立、東京都台東区発のWeb制作会社。年間150サイトリリース、毎年複数のWebデザインアワードを受賞。Web制作だけでなく、月間200万PVのWebメディア「LIGブログ」で培ったマーケティングのノウハウを生かした企画力、複数の海外拠点を生かしたシステム開発力も強み。 👉Web制作実績 お問い合わせはこちら マジで使える無料のWebサイト分析ツール&サービス8選 類似サイト検索:Google(コマンド検索) https://www.google.co.jp/ 類似サイトを
「優秀なエンジニアが採用できない」「リソースが足りなくて開発が進まない」という方は、海外にエンジニアチームを作ってみませんか? 詳しい内容は以下からご覧いただけます。 サービス詳細はこちらから 会話が続かない理由 会話が続かない人の主な理由は以下の3つです。自分があてはまっていないか確認してみてください。 会話が続かない理由 人見知り 感情がわかりにくい 相手に対して配慮がない 人見知り 人見知りな人は人との会話に慣れておらず、話すことに抵抗がある場合が多いです。会話をするときに、目をそらしたりして表情が読み取りにくかったり、会話のキャッチボールがうまくできないことで、ぎこちない雰囲気になることも多いでしょう。 ただ、人見知りだから必ず会話が続かないというわけではありません。人見知りの人でも相手によっては普通に会話ができる場合もたくさんあります。 感情がわかりにくい どんなに面白いと思った
こんにちは、デザイナーのハルエです。 イラストやパーツ、背景など、素材の作りこみが必要なときにフリーのベクター素材ってものすごく重宝しますよね。そのまま使うこともできますが、そこから自分なりのテイストに変えてデザインしちゃえばより良いものができるはず! 時間がないときなどにも凄く助かります。 今回は、高品質なベクター素材が無料でダウンロードできる厳選した8サイトをご紹介させていただきます。 独学でつまずいていませんか? Webデザインの基礎を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。 詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください! →スクールの魅力が分かる資料はこちら!(資料請求) 高品質なベクター素材の無料ダウン
GoogleMapをサイトなどに埋め込むときに、デフォルトだと吹き出しがつきますが、Mapの領域が狭いとちょっと邪魔だったりしますよね。 今回は、マーカーを残しつつ、吹き出しを消す方法をまとめておきます。(忘れそうなので……) 単純にサイトにGoogleMapを埋め込みたい時は、右上のリンクマークをクリックすると出てくるウィンドウの「HTML を貼り付けてサイトに地図を埋め込みます」のコードをHTML内に貼ればOKです。 ただし、デフォルトのままだと吹き出しが出た状態で表示されてしまいます。 地図が小さいとちょっと邪魔になってしまいます。(まぁ×で消せばいいのですが) 消す方法その01 こちらの方法は「小粋空間」さんを参考にしています。 <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight=
暑いですね。 鳥よしです。 あまりにも暑くてネタが切れたので、先日LIGのデザイナーさんとやったjQuery勉強会の備忘録をかかせていただきます。 サボってるわけではないのです。 勉強会の内容を見直してもらえればいいのです。 1.jQueryを使用するために まずは何はともあれ、jQueryを使用するために以下の記述をhead内に書きます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> これは、jQueryの実ファイルをgoogleさんから参照しているので、ネットにつながっていないと使用できない書き方ですね。 今回は何も考えずサクッと動かしたいのでこれで行きます。 これによってjQueryが使用できるようになります。 2.jQueryの書き方 jQueryの書き
こんにちは、デザイナー兼フォトグラファーのおまめ (@omame_creator) です。 今回はPhotoshopで写真を切り抜く方法、髪の毛のような細かいものをきれいに切り抜く方法、背景と馴染ませる方法を解説します。 どれも私が試して一番短い時間で簡単にできた方法なので、ぜひ試してみてください! 独学でつまずいていませんか? Photoshopの使い方を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい!」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2022年3月に編集部が情報を更新しました 「選択とマスク」を使って髪の毛を切り抜く方法 髪の毛を目立たせるため、強めになびかせた
(……きこえますか……きこえますか) Σ(◉◒◉)ん? (……どうもです……はやちです(:3_ヽ)_) ???(◉◒◉)三(◉◒◉)??? (いま……あなたの……心に……直接……呼びかけています…(:3_ヽ)_) (◉◒◉;)お 俺にか……?? (以前「スマホサイトに入れると使いやすくなる!おすすめjQuery4選!」の中でアコーディオンメニューを紹介しましたが、他にも参考になるデザインとUIはないかなと思い集めてみました。ご紹介します……(:3_ヽ)_) (◉◒◉;)ほ ほほう Flexible Slide-to-top Accordion (矢印がくるっと回ってアコーディオンが開くタイプ。矢印の動きがおもしろいですね。_(:3」∠)_) (◉◒◉)ほほう DEMO http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/ SI
こんにちは。デザイナーのハルエです。 Dreamweaverの数ある機能を十分に活用できてる方ってどのくらいいるのでしょうか? 私の場合、これまで最低限の機能しか使ってこず、操作上でわずらわしく感じることでも我慢してたんです。で、そのわずらわしさも苦痛に感じなくなってきて、いつの間にか慣れちゃってました。いけない子ですね。 そこで今日は以前の私みたいな方のために、作業効率を良くするDreamweaverの便利な拡張機能やおすすめ設定術を紹介させていただきます。 閉じタグコメントを自動挿入:End_comment.mxp 閉じタグコメントはソースの構造をチェックしたりする時に便利なんですが、その都度書いていくのって手間ですよね。 この拡張機能は閉じタグコメントを自動で挿入してくれます。もちろんIDとclassもちゃんと認識してくれます。 コメントを生成して挿入するDreamweaver用の拡
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く