サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
円安とは
wk-partners.co.jp
このツールについて 「Excel と HTML の相互変換ツール」では、Excel データをコピー&ペーストするだけで、瞬時に HTML テーブルに変換します。また、既存の HTML テーブルをテキストエリアに貼り付けることで、Excel データへの変換も可能です。変換プロセスはリアルタイムで行われ、変換結果がすぐに確認できます。 また、見出し行や見出し列のオプションを選択できるため、カスタマイズされた HTML テーブルの作成が簡単にできます。選択したオプションに応じて、見出し行・列の表示が切り替わります。 クライアントから渡されたエクセルデータを HTML テーブルタグに変換した場合や、Webサイトに表示されている表の HTML テーブルタグをエクセルに貼り付けたいといったニーズの際にご利用下さい。 注意事項 当社は、本ツールの利用によって直接または間接的に生じるいかなる責任も負いませ
近年のホームページには必ずと言っていいほど横並びのメニューが実装されています。グローバルナビゲーションや、フッター部分のメニューなどでよく見られます。 そしてこういった横並びのメニューは下記のように、より見やすくするために項目をボーダーで区切っていることがよくあります。 横並びメニューの例1 横並びメニューの例2 このような項目間のボーダーを実装するためにはいくつかの方法がありますが、今回はその中でも簡単で余計なクラスを増やす必要がない「隣接セレクタ」を使った方法を紹介します。 そもそも隣接セレクタとは? 隣接セレクタはCSSにおけるセレクタの1つで、ある要素の「次に来る要素」を対象としています。 具体的に説明すると、以下のように要素が並んでいたとして、 <body> <div id="example"> <div class="aaa">要素A</div> <div class="bbb
アイデア次第で効果的な使い方ができるかも!?「background-clip:text;」を使って背景画像を文字でマスクする方法 シェア つぶやく ブックマーク LINE Pocket 今回は前から試してみたかったCSSについて紹介します。 「background-clip」というCSSです。 これを使えばPhotoshopなどの画像編集ソフトを使わなくても、画像を文字でマスクできるようになります! 百聞は一見にしかず。ということで早速デモページを作ってみました。御覧ください! デモページへを見る>>(※Chorome、Safariのみ) コードは以下のようになります。 「html」 <body> <span id="text">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</span> </body>
WEB企画はホームページをリニューアルしてからおかげ様で順調にお問い合わせが増えています。さらに改善をくわえたところ、お問い合わせが1.3倍に増えました!ありがとうざいます☆ そこで今回は、お問い合わせページ改善のホームページ集客ノウハウをドーンとご紹介します!(リニューアル時の集客ノウハウはこちら) お問い合わせフォーム改善の3つのノウハウ ノウハウ1:違和感を感じさせない 1番大事にしているのは、お問い合わせページを訪れた人に違和感を感じさせないこと。 お問い合わせページは、お客様の個人情報を入力していただく1番デリケートなページ。ここで「何か違うな…」と不安に思われてしまったらお問い合わせにはつながりません。そこで気をつけていることは「デザイン&情報量」です。 みなさんもこんな経験はありませんか?カラフルでかっこいいバナーのデザインが気になってクリックしてみたら、殺風景なメールフォー
最近のWebサイトでアイコンがSVGデータが使用されているものを多く見かけるようになってきました。そこで今回はSVGアイコンを無料でダウンロードできるオススメのサイトをご紹介いたします。 SVGアイコンの魅力 SVGアイコンはベクターデータといってpngやjpgといった画像(ビットマップ)データには無い魅力があります。 SVGの基本的な特性については以前記事にしていますので、興味ある方は是非ご覧ください。 WEBデザイナーのはじめての「SVG」 | 株式会社WEB企画 解像度&使用サイズにデータが左右されない ベクターデータは拡大・縮小しても画質が損なわれない性質があります。どんなに大きく扱っても画質が劣化しないため、看板や大型ポスターなど、大きめのデータの作成や出力に適しています。 また、Webサイトでは高解像度ディスプレイ環境での使用やレスポンシブサイトでの使用の使い勝手がよく重宝され
今やコードエディタのトップシェアとなった Visual Studio Code が、ブラウザでも利用できるようになったということで、早速試してみました。 利用方法はブラウザにアクセスするだけ。 https://vscode.dev/ インストール不要ですぐに利用することができます。 利用環境 基本的にどのブラウザでも動作しますが、Chrome、Microsoft Edge、この2つでの利用をおすすめします。 Internet Explorer では開くことができませんでした。 スマホのブラウザで利用することが可能ですが、画面が小さいので制限が出てしまう部分もあります。 試しにiPhoneで横向きにしてみたのですが、この通り。 iPadなど画面の大きい端末を利用することをオススメします。 ファイルへのアクセス ローカルファイル APIを利用することでローカルファイルにもアクセスすることができ
STEP4:その他に使用できるコマンドを調べる Slackで使用できる、コマンドを調べるためには、以下のコマンドを送信します。 /trello help 3.プロジェクト管理に最適【Asana】 Asanaは、GoogleやFacebookなど有名な企業が導入している、作業を効率化できるプロジェクト管理ツールです。Slackだけではなく、Googleカレンダーなど様々なアプリと連携させることも可能です。 無料版と有料版があり、無料版はプロジェクトの共有が15人まで可能です。少人数で使用する分には、無料版で問題ないでしょう。 リスト形式・カンバン形式の2種類からタスク管理を選択できるため、自分の使用しやすいよ方法を選択できます。 また、横軸で日付とタスクが表示されるガントチャート機能が備わっていたり、複数のプロジェクトの進捗状況が、一覧表示で見れるポートフォリオ機能が備わっていいます。 Sl
grasshopperとは grasshopperはGoogleが作ったプログラム学習サービスであり、Javascriptを学ぶことができます。2018年にiOSとAndroid向けアプリとしてリリースされて、これまでに200万人以上が利用した人気のサービスです。 2019年10月8日に待望のWebアプリ版がリリースされました。ブラウザでできるようになったのはありがたいですよね。 grasshopperの特徴 「Googleが作った」という一文で期待してしまうわけなんですけれど、grasshopperには4点の大きな特徴があります。 ゲーム感覚でJavascriptを学習することができる grasshopperはJavascriptの知識を身につけるため、実際にWebサイト上でコーディングをしながら勉強するタイプのサービスで、ゲーム感覚で楽しく行える点が最大の特徴。 文字を出力するためには
WordPressの「カスタム投稿」という機能を使った際に、 カスタム投稿用のアーカイブページで、 特定のターム(term)のみをループ表示したい場合の方法をお伝えします。 query_postsで条件を指定します。 複数のタームを表示する際は、複数タクソノミークエリー「tax_query」が便利です。 今回はjapanというカスタム投稿名の、 areaというカスタム投稿分類(タクソノミー)の、 青森(aomori)、岩手(iwate)、宮城(miyagi)に属する記事を表示するという設定です。 <?php $args=array( 'tax_query' => array( array( 'taxonomy' => 'area', //タクソノミーを指定 'field' => 'slug', //ターム名をスラッグで指定する 'terms' => array( 'aomori','iwa
「Webについてよくわからないし、SEOや広告などのWebでの販売方法がいまいち理解できない」という人におすすめなのがGoogleデジタルワークショップです。 Web業界で働いている人では少し物足りない内容になってしまうかもしれませんが、Web業界へ新卒入社した人や、他業界でWebに深く関わる人にはとってもおすすめできる資格になっています。 ということで今回は、Googleデジタルワークショップについて登録方法から使い方、実際に認定証を取得するまでの流れを説明し、どういう人が学習すればいいのかをさらに深掘りしていきます。 Googleデジタルワークショップとは? Googleデジタルワークショップとは、デジタルマーケティングの知識を無料で学べるeラーニングのことで、2019年12月時点では、全15コース33モジュール存在しています。 このワークショップでは、インターネットの基礎知識から、流
今回はツールチップについての使い方・デザインのポイント・実装方法についてまとめてみました! ツールチップとは ツールチップのとは、一言で言えば、「ヒントを表示するやつ」です。 UIで直接説明がなされていないオブジェクトや普段見慣れないオブジェクトに対して、マウスオーバーすることで使い方などのヒントや説明を出す存在です。 ユーザーが情報を必要なときに、少ない動作(マウスをホバーすること)で、アクションの誘導や説明ができます。便利。 ツールチップのメリット ツールチップには、デザインをすっきりさせつつ、説明を付加できるというステキな効果があります。レスポンシブデザインが主流の今、限られた画面内でたくさんの情報を必要とするので、意外と使い所は多いかもしれません。 ただ、画面がツールチップだらけになると、逆にユーザーを混乱させる原因となるので使いどころは見極めるようにしましょう。 ツールチップの活
ウェブサイトを制作中に、「あれ?コンテンツが少なくてフッターが浮き上がってきてる!?」なんて経験はありませんか? 弊社は東京と名古屋でホームページ制作を行っている会社ですので、稀にですがそういったシーンがあります。 「そうじゃなくて最下部にフッターを固定表示したいんだーっ!」というあなたのためのエントリーです。 ↓弊社リンク 「株式会社WEB企画」のホームページはこちら CSSで実装する flexbox(CSS3)を使う この記事を公開した際には、存在していなかったのですが、最近では flexbox のお陰でかなり実装が楽になっています。(2019/06/11現在) 下記の内容をコピペで実装できます。HTML5の書き方をしていることが条件になりますね。 【HTML】 <body> <div id="wrapper"> <main> <!-- メインコンテンツ --> </main> <fo
日本語Webフォントを使い倒そう!モリサワ・Adobe・フォントワークスのWebフォント使い方・価格&イケてるデザイン15選! シェア つぶやく ブックマーク LINE Pocket 日本語Webフォント、皆さんは使っていますか?費用面や、表示速度などといった導入障壁もあって、まだ迷っている方も多いのではないかと思います。Webフォントの魅力は、デザイン性やSEOだけではありません。他にも編集が簡単なため、作業効率が一段と向上するなど、様々な魅力があります。 今回はデザイン界隈では最も使用率の高い、モリサワ、Adobe、フォントワークスが提供している日本語Webフォントの使い方をまとめてみました。 ■目次 1,Webフォントの基本的な使い方 2,モリサワWebフォントサービスの価格・使い方について 3,AdobeWebフォントサービスの価格・使い方について 4,フォントワークスWebフォン
最近、オンラインブックマークを、GoogleブックマークからPinboardというサービスへ乗り換えました。 今回はその乗換方法やサービスの内容をご紹介いたします。 Googleブックマークを使用していた理由 理由はとっても簡単で、シンプルで、目的のブックマークが探しやすく、使いやすかったから。国産だと「はてなブックマーク」が一番有名ですよね。国内での使い勝手の良さを考慮すると、はてなブックマークでも良かったのですが、単純にGoogleのアカウントと連動していると(ログインとか)便利でしたので、Googleブックマークを使用していました。 なぜ乗り換えようと思ったのか 私は普段からRSSリーダーにiPhone&iPadのアプリの「Reader」を使用しています。 「Reader」は気になった記事をサクッとSNSに投稿したり、ソーシャルブックマークサービスでシェアしたりできるんですが、「Re
引用符ジェネレーターは引用符『>』を行頭に付けるツールです。メールやマークダウン記法などの引用テキストがコピペで自動的に出来上がります。
先日、最近ウェブの担当者になったというお客様とお話をしている際、 「ウェブ系の人はSEOの話をする際に、いつもGoogleの話ばかりしてYahooの全然しないけれど、なんでなの?」 と、聞かれハッとしました。そうなんです…… 実は2011年からYahooはGoogleの検索技術を利用しているため、 YahooとGoolgeの検索結果は“ほぼ”同じ なんです! 大前提としてYahooはGoogleの検索技術を利用しているため、検索順位を決定づける仕組みも当然Google。なので、ウェブ系の人たちはGoogleの話ばかりしかしないという訳だったのですね。最近ウェブ担当者となった方が知らないのも当然です。 ただし、あくまでも「検索技術を利用」しているだけであって、検索結果が全て同じになるという訳ではありません。 ↓動画で見たい方はこちら Yahooの検索結果がGoogleと違う理由 最も大きな違
Eclipseを利用して開発を行うプロジェクトでは、メンバーが増えるたびに初回セットアップが必要となるため、企業独自の手順書などを準備しているところも多いのではないでしょうか。 手順書は一度作成してしまえば使い回しが効きますが、作成するための時間や労力はそれなりに必要となってしまいます。 そこで本記事では、Eclipseで開発を行うプロジェクトなら必須作業である、ダウンロードからプロジェクトの立ち上げまでの手順を徹底解説していきたいと思います。 新入社員やEclipseの使い方に慣れていない方でも、作業を進められるようにわかりやすく解説していきますので、企業での「Eclipse初期設定手順書」としてぜひご活用ください。 ※本記事の内容は、Mac環境を前提としているため、Windows環境の方は適宜読み替えて作業を進めてください。 Eclipseダウンロードから起動までの手順 まず公式サイト
【CSS/jQuery】マウスカーソルのカスタマイズしてオリジナルデザインに挑戦しよう!!(デモサンプル付き) シェア つぶやく ブックマーク LINE Pocket サイトデザイン作成の際に見逃されがちなマウスカーソルですが、UX,UIの観点から見るとマウスカーソルは重要なファクターです。 最近ではカーソルをオリジナルのデザインにして、使いやすさやの向上や、サイトの世界観を表現したサイトも増えてきています。今回はそんなマウスカーソルのカスタマイズに挑戦してみました。 デモ付きですので、コピペで実装できると思います。それではご覧ください! マウスカーソルを白い丸に変更する 最初にDEMOをご覧ください。今回は赤背景に白の丸がカーソルになるように設定してみました。最近多いですよね。丸のカーソル。 See the Pen マウスカーソルカスタマイズ1 by Tetsuya Ihata (@ti
WEB企画ではお客さまにデザインを出す前に、ディレクターだけでなく、デザイナー同士でも入念にデザインチェックを行っています。 自分の制作したデザインについて、同じデザイナーからフィードバックをもらったり、人のデザインに対して「自分はこう思う」等の意見を述べる事はいい刺激であり、とても勉強になります。 今回はそんなデザインチェック時に、よくチェックする点・される点をまとめてみました。デザインをしていてどうも上手くいかないなーなんて時に見てみると、何か解決策が浮かぶかもしれません。 もちろんこのチェックポイントに即さなくても、素晴らしいデザインのサイトは沢山あります。「これが正解だ!」って言えないところがデザインの難しいところであり面白いところですね…あくまでも1つの指標として参考になれば幸いです。 それではどうぞ! デザインチェック項目 レイアウト編
Webでは、紙媒体と異なり「動画」も表現手法として組み込むことができます。 以前は動画制作と聞くと専門のプロがおこなうイメージがありましたが、YouTubeやモバイル用動画編集アプリなどの台頭もあり、個人でも動画を撮りメディアにアップしている人も少なくはありません。 しかし、簡単な日常シーンなら調達できますが、ダイナミックな映像が欲しい場合などシーンによっては個人で準備するのは時間&予算的に厳しい場合があります。 というわけで今回は、そんな時に頼りになるWebサイト制作に使えるクオリティの高い無料動画素材サイトをまとめてみました!もちろんロイヤリティフリーで商用利用可能が中心です。保存版としてもお使いいただければ嬉しいです。それではどうぞー! 注) ライセンスや利用規約等は、随時変更される可能性があります。利用する前に各サイトにて必ずご確認ください。 Mixkit Mixkit 最近よく利
CMS(コンテンツマネージメントシステム)は、プログラミングがわからない人でも簡単にWebサイト更新が可能になる便利なシステムです。 「オープンソース」をはじめ、「商用パッケージ型」「クラウド型」など様々なタイプが提供されています。 本記事では、知っておきたいおすすめの各種CMSをそれぞれの特徴を解説しながらご紹介していきたいと思います。 CMSの基本をおさえておこう!動的CMS?クラウド型って何? CMS(コンテンツマネージメントシステム)と一言で表しても、「動的CMS」や「静的CMS」といったHTMLを生成する仕組みの違い、「クラウド型」や「パッケージ型」といったインストール(起動)する方法に違いがあります。 導入を検討する前の基礎知識として、それぞれの特徴や情報を確認しておきましょう。 動的CMSとは ユーザーからURLへのアクセスを受けたタイミングで、サーバーに格納されたパーツを集
「新しい女性向けWebサイトを作るがデザインはどうしよう?」 「ターゲットにする女性の年齢層にあったデザインは?」 と女性らしいWebサイトデザインを制作したいけど、どのようなデザインにすればいいのか悩む、女性向け商品やサービスのWebサイトの担当者様は多いのではないでしょうか。 女性らしいデザインにしたいといっても、ターゲットにする女性の年齢層によってデザインも変わってきますよね。 そこでこのサイトでは、年代別に分けて女性向けのWebサイトデザインを厳選した24選をご紹介します。 具体的な内容は以下のとおりです。 【10代〜20代】若い女性向け可愛いデザイン5選 【20代〜30代】大学生・社会人女性向け華やかなデザイン6選 【30代〜】大人女性向けシンプルで女性らしいデザイン6選 【その他】子育てママ向けな子供らしいデザイン6選 女性向けWebデザイン集まとめサイト3選 女性の年代別に、
Gmailの無料版の容量である15ギガがいっぱいになってしまい、泣く泣く過去のメールを削除している…そんな経験はありませんか?今回はそういった状況に遭遇した方のために、Gmailのバックアップの取得方法をご紹介いたします。 <目次> 1,バックアップページまで移動 2,バックアップ方法の設定 3,バックアップのダウンロード Gmailのバックアップ方法  1,バックアップページまで移動 まずGoogleトップページの右上に位置するアイコンから、「アカウント」ボタンをクリック。  アカウントの管理画面の中から、「コンテンツの管理」を選択します。  「コンテンツの管理」のページから、「アーカイブを作成」を選択してください。 2,バックアップ方法の設定  すると、Googleのストレージを使用する様々なサービスのバックアップの取得の有無を選択することができますので、該当するサービスのみチ
css3でアニメーションを使用するサイトが近頃増えてきました。背景としては、css3アニメーションのプロパティにほぼ対応しているスマホ端末の普及や、animationプロパティ未対応のIE9(IE6~IE8を含む)のシェアが低下してきていることが挙げられると思います。 つまり、css3アニメーションの対応ブラウザは「増加中」ということに他ならず、実装するサイトは更に増えていくのではないでしょうか。 今回は、そんなcss3アニメーションの実装時に参考できる22サイトを集めてみました! 1:丸型オブジェクトにピッタリのアニメーションギャラリー 丸型オブジェクトに対して、様々なホバーエフェクトを実装しています。 何気なくマウスオーバーした時にこんな動きがあれば、注意を引きつけられそうですね! http://tympanus.net/codrops/2013/05/30/simple-icon-h
リニューアル後、 100%のクライアントが、 アクセス数アップに成功する理由。 お客様の漠然としたご要望に対しロジカルな打ち手をお返しします。 御社でも中小〜大手まで多くの企業をお手伝いしてきたノウハウを活かしてみませんか?
こんにちは、ホームページ制作会社「ウェブ企画」の東京渋谷オフィスでディレクターをしている竹内です。 もう少しで長かった冬も終わり、春を迎えますね。 春からWebデザイナー業界の門を叩かれる方も、きっと多いのではないでしょうか。 昔とは違い、最近は「デザイン+htmlコーディング」だけでなくWebデザイナーでもディレクション能力や、「WordPress」などのCMSの扱い、プログラム言語の「PHP」「JavaScript」などプラスアルファを求められることが多くなっているように感じます。 そこで今回は、先述したプログラム言語「JavaScript」の数あるライブラリの中でも、最も有名なjQueryについて、「プログラムについて全く知らない!」という方向けに簡単に概念や、jQueryで出来ることについてご説明させていただきたいと思います。 jQueryを使えるデザイナーは、今後必ず重宝されます
今回は初めてGoogleマップのカスタマイズに挑戦したので、備忘録としてやり方をまとめました。 カスタマイズできると知ってはいるけど難しそうで試したことない人も多いはず…そんな方は是非チェックしてみてください! それではどうぞ! Googleマップのカスタマイズをする意味 実店舗があるお店のサイトにとって、そのお店の行き方や場所が分かるマップは重要なコンテンツだと思います。初めてお店に行きたい時に、サイトにマップがあるととても分かりやすいですよね! そんな時よく使われるのがGoogleマップです。ただサイトによってはマップとサイトデザインがあっておらず違和感を感じる場合もあります。 デザインをあわせるためにオリジナルの地図画像を作るという手もありますが、道が変更されたり、目印のお店が無くなったりするたびに変更しないといけないので正直あまり実用的ではありません。そこでオススメしたいのが、Go
サイトのメインビジュアルで動画がを再生するのは最近のトレンドとなっています。 今回はさらにアレンジして自動再生動画を使ったスライダーの作成に挑戦してみました。その際の知見をご紹介いたします。 <ul class="slider"> <li><a href="#"><video src="https://wk-partners.co.jp/homepage/wp-content/old-uploads/entryimg/Pexels-Videos-123540.mp4" autoplay loop muted></a></li> <li><a href="#"><video src="https://wk-partners.co.jp/homepage/wp-content/old-uploads/entryimg/Pexels-Videos-2629-1.mp4" autoplay loo
Dialogflowとは 今回ご紹介するDialogflowは、Google傘下の開発元による、チャットボットを簡単に作成できるAIエンジンです。ユーザーが入力するテキストや音声をAIが解析し、その内容に応じて、事前に設定した応答を返してくれたり、受けとったキーワードをデータベースに連携してくれます。もともと「api.ai」の名称で開発され、2016年にGoogleの一部となりました。 類似のサービスには、IBM Watson Assistant、Microsoft Azure bot service、Amazon Lexといった大手によるものがあります。その中でもDialogflowの特徴には、 コーディングなしでチャットボットの設定が可能 デバイスやプラットフォームを問わない連携先 日本語、英語をはじめ、20以上の言語に対応 といったことが挙げられます。また、Googleの傘下というこ
次のページ
このページを最初にブックマークしてみませんか?
『wk-partners.co.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く