こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
2017年のウェブデザイントレンドをうまく反映したかっこいいウェブサイトや、アニメーションなど素敵なエフェクトを採用したランディングページなど、HTML5/CSS3で制作された無料テンプレート素材をまとめてご紹介します。 デザインの現場でも人気の高いBootstrapフレームワークをベースとしたテンプレートも多く、自由にそして手軽にHTMLテンプレートのカスタマイズを行うことができる素材が揃います。どれもスクリーン画面サイズに関係なく表示できるレスポンシブデザインを採用しており、さくっとウェブページを作成したいときの参考にもどうぞ。 Bootstrap 対応！2017年最新の無料HTMLテンプレート上半期まとめ レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度 あまり知られていないBootstrapスタイルテクニック、小技16個まとめ Wired
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
WordPress 始める前に WordPressへようこそ。始める前に、以下の項目を知っておく必要があります。 データベース名 データベースのユーザー名 データベースのパスワード データベースホスト テーブル接頭辞 (1つのデータベースに複数の WordPress を作動させる場合) この情報は wp-config.php ファイルの作成に使用されます。 もし何かが原因で自動ファイル生成が動作しなくても心配しないでください。この機能は設定ファイルにデータベース情報を記入するだけです。テキストエディターで wp-config-sample.php を開き、データベース情報を記入し、wp-config.php として保存することもできます。 さらにヘルプが必要な場合は、wp-config.php についてのサポート記事をご覧ください。 おそらく、これらの項目はホスティング先から提供されていま
HTML5でWebページを作成する時のベースになる必要最小限の構成で実装されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 HTML5 Boilerplate -GitHub イラスト: Girls Design Materials HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 ライセンスはMITライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title
今まであまり知らなかったのですが、contentプロパティを使うと自動的に文字や画像を自動的に挿入したりできて便利ですね。最近調べて知った、contentプロパティを使用した表示の仕方をいくつか書きだしてみました。 IE8以上でないとcontentプロパティを使った、:beforeや :after擬似要素は対応していませんが、「 IE9.js」を使用すれば使える範囲も広がります。ちなみにIE9.jsを適用しても5.の連番表示は8以下では表示できませんでした。 1. リストの最初の要素に”★new!”を表示する 更新記事一覧などで最新の記事に自動的に”★new!”等の表示や画像を表示する事ができます。文字だけでなく画像も表示できます。Webフォントを使えばいろんなアイコンが表示できますね。 デモ See the Pen リストの最初の要素に”★new!”を表示するサンプル by Saomoc
Webデザイナーを目指す上で気になるのが平均年収。特に、未経験から始める人にとっては不安要素のひとつといえるでしょう。そこで今回は、Webデザイナーの平均年収や収入を上げていく方法について解説します。 ＜この記事に関連する記事＞ Webデザイナーの年収は低い？少しでも収入を上げるには？ Webデザイナーで年収1000万は可能？目指すにはどうしたらいい？ なぜWebデザイナーは稼げないと言われるのか？実態を解説！ 目次 Webデザイナーの年収や労働時間は？ フリーランスのほうが年収は高い？会社員より上げられる？ 年収を上げるためにできることは？ まとめ Webデザイナーの年収や労働時間は？ 早速、Webデザイナーの平均年収について詳しく見ていきましょう。 Webデザイナーの年収は全体平均よりやや低め 賃金構造基本統計調査によると、デザイナーの平均年収は約426万円。この数字は、デザイナー職の
AndroidでChromeを使ってサイトを閲覧したときに、一部の文字が非常に大きく表示されることがあります。 ※確認した限りでは、Androidの「標準ブラウザ」では大丈夫だったので、おそらくChromeに固有のバグなのだと思います。 最初なぜこんなことが起こるのか分からなかったのですが、 色々調べた結果、意外とあっさりと解決しましたので、メモしておきます。 私の手元にある環境でしか調べられていないのですが、発生するのは、meta要素の「viewport」が設定されていないか、content属性の「width」が「width=760」のような数字になっている場合のようです。 <meta name="viewport" content="width=760">以下のキャプチャは、Google Chromeのエミュレータを使って、当ブログで再現したものですが、こんな風に非常に大きなフォントサ
Webサイトを効率良く作成する時に便利なテンプレート。最近ではHTML5/CSS3のテンプレートが多く公開され、無料で使用出来るのにレスポンシブだったりデザインのクオリティも高いものが多いです。今回はそんな無料で使えて勉強にもなるHTML5/CSS3のテンプレートを50個集めてみました。 ※基本的に無料でダウンロード出来るテンプレートばかりですが、規約は各テンプレートによって違います。使用する際は規約に注意してください。 1. Minima Demo / Download 2. Aerial（Responsive） Demo / Download 3. Beautiful and Clean Demo / Download 4. Brushed（Responsive） Demo / Download 5. Woo（Responsive） Demo / Download 6. Type &
私は大学生時代の4年間、キャバクラでキャバ嬢としてアルバイトをしてたんやけど、その時はナンバー1までは行かずとも、そこまで売れてないわけではなかった。 でも、最高でそのお店でナンバー3を取るくらいの人気を得ることができてたから、決して悪い成績ではなかったかなーとは思ってて笑 そんな私が4年間キャバクラ業界にいて、稼げるキャバ嬢と稼げないキャバ嬢の違いについて、気づいたことをここで書いていくね。 大阪のキャバクラで稼ぎたい、そう思ってる女の子はこのことについて1回考えてみて欲しい！ 稼げるキャバ嬢の特徴① 常に学ぼうとする意識がある キャバクラに入りたての頃は、仕事や接客の方法について学ぼうという意識を持つやろうけど、ある程度経って仕事にも慣れてきた頃が要注意。 キャバ嬢の仕事に慣れてきたからと言って、何も学ぼうとしないのはNG！ 接客の方法がワンパターンやと最初に持ったお客さんも、だんだん
19. Matteo Penzo氏のEyeTracking検証結果では http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php 1. Left-Aligned Labels(左寄せ) 2. Right-Aligned Labels(右寄せ) 3.Top-Aligned Labels(上寄せ) ✕ ⃝ ◎ → 項目が少ないならこっち → 項目が多い時に有効 → 一番ストレスが大きい → ストレスが最小、ログイン画面 → スクロールが必要な場合とか → 使っちゃダメ 20. 人間工学的観点では、視点の動きが重要 - Path To Completion - 視点の導線は一本に。 http://www.slideshare.net/lorielue/form-design-best-practices-t
字幕なしで『WWDC』や『Google I/O』を視聴するために、リスニング力を鍛える方法【連載：コピペで使えるIT英語tips】 2013/07/30公開 最近はさまざまなカンファレンスがUstreamなどを使って生配信されることが多い。代表的なところでは、Appleの開発者向けイベント『WWDC』（2013年の模様はコチラ）や、Googleが主催する『Google I/O』などが日本でも人気が高い。 読者の中にもリアルタイムで視聴しようと、眠い目をこすりながら生中継に見入ったという方もいるのではないだろうか。 このように、いまや世界の最新IT技術をリアルタイムで知ることができるようになったが、日本人エンジニアの場合、日本語に翻訳されてからその内容を知るという人もまだまだ少なくないはず。 いち早く情報や技術を取り入れ、エンジニアとしての知識を高めるためには、英語を英語のまま理解できる力が
The Polaris Dawn crew is back on Earth after a historic mission
Editr - HTML, CSS, JavaScript playground 自鯖に設置してHTML、CSS、JSをブラウザ上で開発して遊べる「Editr」。 いつでもどこでもブラウザがあれば開発ができるスタイルにするための鯖設置型エディタ。 コードハイライト機能がついているため、編集もしやすく、編集結果もすぐ見られるので学習用にもいいかもしれませんね。 関連エントリ Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」 前ブラウザのブラウザハックまとめ「Browserhacks」 ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 CSSのブラウザ対応状況が一発で分かる「BrowserSupport」 ブラウザ上での音声再生に使えるシンプルプレイヤー「Audio5js」
「CSSDesk」はHTMLとCSSを自由に書くことができ、リアルタイムにプレビューが確認できるサービスです。ひとつの画面内で、HTML, CSSを書いてプレビューも確認できます。リアルタイムに自分の修正が反映されるので、ウェブデザインなどに便利かと。 以下に使ってみた様子を載せておきます。まずCSSDeskへアクセスしましょう。左側がHTML, CSSがかけるスペースとなっています。自由に記述できますよ。 右側がプレビュー画面です。背景はいくつかパターンが用意されているので見やすいものを利用しましょう。記述したHTML, CSSがリアルタイムに反映されてデザインを確認できますよ。HTML, CSSの練習にも使えそうですね。ぜひご活用ください。 CSSDesk （カメきち）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
