HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
第1回 プログレッシブフレームワーク Vue.js：Vue.js入門 ―最速で作るシンプルなWebアプリケーション｜gihyo.jp … 技術評論社
Vue.jsとは Vue.js（ビュージェイエス）は、インタラクティブなUIを構築するためのJavaScriptライブラリです。Webサイト内のウィジェットや管理画面のダッシュボードといったビュー（view）層に特化しています。設計の特徴としてMVVMパターンに影響を受けています。 Vue.jsは2013年にEvan You氏の個人プロジェクトとして開始、2014年2月にバージョン0.8が正式に公開されます。その後いくつかのリリースを経て、2015年4月にLaravelへの標準搭載決定を機に一気に知名度があがりました。2015年10月に1.0が、2016年10月1日（日本時間）に2.0がリリースされ現在に至ります。 Vue.jsの主な特徴には以下のものがあります。これらによって短期間で実用的なアプリケーションを作成できるため人気を集めています。 シンプルなAPIやHTMLベースの平易なテン
chewing-grid.css - ダイナミックにレイアウトが変わるカードデザイン MOONGIFT
プロフィールページなどではユーザアイコンと名前、加えて簡単な説明をつけたカードタイプのレイアウトがよく使われます。ユーザに限らずGitHubのリポジトリリストや商品一覧ページなどでもカード型のレイアウトは便利に使えます。 そんなデザインを提供するのがchewing-grid.cssです。幅や並べる個数なども細かく指定できるグリッドレイアウトが実現します。 chewing-grid.cssの使い方 chewing-grid.cssのデモです。3つ並んでいます。 幅を変更しても3つのままです。 個数を変更しました。ダイナミックに表示が変わります。 実際に動かしているところです。 chewing-grid.cssはカラムの数、隙間、カラムの最小幅と最大幅をダイナミックに指定できます。デザインはレスポンシブになっているので幅が変わってもきちんと揃ったままになっています。 デザインフレームワークの中
デザインは第一印象が大切！5秒でできる3つのデザインチェック方法 | Webクリエイターボックス
2016年5月10日 Webデザイン, ユーザビリティ, 色彩 人間は一瞬で物を識別します。研究によると、たった0.1秒で人を判別できるようです。Webサイトにおいても同じことが言え、ユーザーはWebサイトを開いて0.05秒でそのサイトが好きかどうかを判断し、そのサイトを見続けるか、閉じるかを決めるそうです。そんな大切な「第一印象」。どのようにチェックすればいいのか、考えていきましょう！ ↑私が10年以上利用している会計ソフト！ ぼかしテスト ぼかしテストでは、デザインをぼかした状態で確認し、強調するべき箇所が強調されているかをチェックします。 テスト方法 Photoshopを使う方法と、ブラウザーを使う方法があります。 Photoshopを使う方法 バナー広告やWebサイトのスクリーンショット画像を用意 Photoshopで フィルター＞ぼかし＞ぼかし（ガウス）で5〜10pxほど画像をぼ
【境界が無くなる】デザイナーとエンジニアの仕事内容 デザイン会社 ビートラックス: ブログ
アメリカ、特にサンフランシスコ周辺の会社を見てみると、エンジニアに加えてデザイナーの需要が高まっている。これは見た目やUXが優れたプロダクトへの人気が上がっており、企業としてもよりユーザー目線で使いやすくニーズにあった製品を作る為に、企画段階からデザイナーを参加させる事が増えていているからであろう。 それに伴いデザイナーの役割が、これまでの”見た目を美しくする”事から”ユーザー視点で最適な問題解決方法を見つけ出す”へと広がりを見せている。 このビジネスに対するデザインの重要性の高まり-デザインシフト-でデザイナーやエンジニアに求められるその役割と仕事の範囲に変化がおき始めている。恐らく10年程前と比べてみると、それぞれの仕事の範囲が多種多様に広がっているのに加えて、オーバーラップする領域も増えているだろう。 デザインの未来を示す15の変化で下記のような項目があった。 “デザイナーとエンジニ
Web・ソシャゲ系エンジニア就活記録
Yahoo大企業だけあって普通。非エンジニア職の人事面接さえ通過できれば余裕。私服で大丈夫。 dwangoスーツは逆に浮く。なんだかんだ言ってWebテストは受けさせられるけどなんの参考にもしてなさそう。最終以外は現場のエンジニアが面接官なので適当に興味のある技術の話しとけば大丈夫。最終だけは多少圧迫(こっちの話に食いついてこない)というか「落とす」面接なので注意。 Pixiv説明会で社長の話聞いたら受ける気なくしたのでよくわからない。自分についてのキーワード100とか書かされる。 クックパッド自分も自分の周りも誰も通らなかったからよくわからない。Web上で簡単なプログラミングさせられるけど本当に簡単でなんで落ちたのかよくわからない。 サイバーエージェント女性人事が友達感覚で話しかけてきてアレ。技術の話より一発当たるサービスのアイデアみたいなの用意しといた方がいい。 DNA基本的に現場のエン
Webディレクターがオススメする、ディレクションに役立つ本20選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。やっと先日実家から布団が届きました！ のっちです♩ ぬくぬく眠れるのは良いのですが、今度は布団から出るときの辛さが2倍になったのを痛感し、果たしてどちらが良かったのかなと悩んでいます。幸せって難しいですね。 さて、前回の記事「LIGのデザイナー陣がオススメする、これだけは読んでおきたいデザイン本15選」に対しては、ありがたいことに社外内どちらからも良い反響をたくさんいただくことができました。 なので今回は、そんな私たちデザイナーに日々寄り添い、支えてくださるLIGディレクター陣におすすめ本を紹介してもらいました。 もくじ 顧客の要求を確実に仕様にできる要件定義マニュアル USAMIのブランディング論 ブランドのはじめかた 現場のプロが教えるWebディレクションの最新常識 知らないと困るWebデザインの新ルール2 モメないプロジェクト管理 77の鉄則 Webディレクション標準ガイ
知っておくべきIT勉強会を探せるサービス9選
1. IT勉強会ですよ Beta IT 勉強会カレンダーのように、勉強会の予定を見ることができるIT勉強会ですよ Beta。勉強会を開催している地域やその勉強会の内容で絞ることができるのが、特徴となります。 勉強会のデータ取得には、後で紹介するATNDやconnpass、Doorkeeperなどのイベントや勉強会の情報などを提供しているサービスのデータを使っているので、主要な勉強会をチェックするのに最適です。 2. dots. dots.もIT勉強会を探すことができるサービス。上記の2つと同様にカレンダー形式で勉強会を探すことができます。 会員登録をすることで、興味のあるイベントをお気に入りに入れて管理できる点などが特徴となります。イベントレポートも更新されているので、初めて参加する場合でも、空気感をつかめます。また、参加できなかった勉強会の概要などを読むことも可能です。 3. connp
Webアプリ開発者のためのHTML5セキュリティ入門
The document discusses Amazon FSx for Lustre, a fully managed file system for high-performance computing workloads. It provides fast parallel access to data stored in Amazon S3. The presentation covers how FSx for Lustre delivers scalable throughput and IOPS using Lustre and SSDs. It also discusses how FSx for Lustre can be used to access data stored in S3 for compute workloads run on EC2, with da
20+ Awesome Dashboard Designs That Will Inspire You
The Internet is awash with a truckload of websites. While most of them hardly manage to take hold of our attention, there are a few which find a way to perch themselves into our bookmarks and are scattered throughout browser’s history. The following list is not about those websites! Instead it brings forth what lies behind the websites – dashboards -and lets the site admins dictate how their websi
【エンゲージメント率150%UPも！？】注目機能Twitter Cards！内容詳細と導入方法まとめ
【エンゲージメント率150%UPも！？】注目機能Twitter Cards！内容詳細と導入方法まとめ 反応率UPに期待大！注目の機能Twitter Cardsの内容詳細と導入方法をまとめてご紹介します！ こんにちは、アライドアーキテクツ株式会社 制作部プロデューサーの久保田です。 突然ですが、あなたはTwitterに昨年導入された注目機能、「Twitter Cards」をご存知ですか？ Twitter Cardsを設定することにより、企業は「FacebookのOGP」のように、Twitterタイムライン上における投稿の見え方を最適化することができます。今回は、多くの情報が流れるタイムライン上で目に留めてもらい、さらに広めてもらうためにぜひ導入したい機能「Twitter Cards」の詳細と、設定方法をまとめて詳しくご紹介します。 Twitter Bird Sketch / shawncam
2014年これからのウェブ制作業界の流れ、伸びる職種、ウェブデザインのトレンドなどのまとめ
数多くのブログで2014年のトレンドをさまざまな切り口でポストしているので、その中から特に印象的で共感がもてたものをまとめて紹介します。 キーワードとしては、スマフォ・タブレットなどの小さいサイズのタッチデバイス、レスポンシブ（特に画像）、HTML5/CSS3、ビッグデータ、リスク管理が注目されています。 2014年、ウェブ制作業界全体の流れ ウェブデザインの2014年のトレンド 2014年に大きく変化するウェブデザインの7つの傾向 2014年、注目度の高いIT系の職種・役割 2014年、ウェブ制作業界全体の流れ まずは、2012, 2013年と的確な予測をだしてきたsitepointの2014年のウェブ制作業界の全体の流れから。 10 Web Predictions for 2014 スマートフォン中心の年 最終的にはデスクトップからのアクセスをスマフォが超える HTML5のウェブアプリ
LINEカメラのプリクラ加工とPrimoのプリクラ打ち消しを対決させてみた！
どうも、あさやんです。 みなさんLINEカメラは使っていますか？ スマホ界の巨人、LINEが送り出す写真加工アプリですが、 いつのまにやらビューティー機能という、 プリクラ系のすごい機能が搭載されていました。 この機能のすごいところは何と言っても自動でプリクラ風加工ができるとこ。 よくあるプリクラ風加工アプリは 目の位置を自分で選んだり、輪郭をなぞったりと、 手動で加工しないといけないものが主流ですが、 ビューティー機能はそういう手間一切なしの便利自動機能となっています。 いやーすごいですね。 すごい。すごいですよ。 ですけども。 その加工力はどれぐらいのもんや、と。 やっぱり人間は好奇心の塊ですからね。 確かめたくなります。 それを確かめるために、 今回はこのLINEカメラにとあるアプリと殴りあってもらおうと思います。 そのとあるアプリとはPrimo。 前回その凄まじさをご紹介しましたが
遊び心いっぱい♪Webサイトで使えるゲーミフィケーションの手法4つ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのサリーです。 休日はゲームばかりやっている私なので、ゲーミフィケーションの事例を見るのが好きです。 ゲーミフィケーションとは？ ゲームデザイン手法や仕組みを用いて問題の解決やユーザー契約などを獲得すること。例えば、既存のシステムやサービスへの、ポイント性、順位の可視化、バッジ、ミッション、レベルシステムの採用など。さらにゲームの要素を盛り込むことによって楽しみながら意図せずそれらと関わっていってもらうことが目的で行われる場合もある。 -wikipediaより- 読み飛ばしがちなサイトのチュートリアルも、スタンプラリー形式だとスイスイ進めてしまいます。今日は簡単なものからこれぞゲーミフィケーション！なものまで、事例を7つ紹介します。 ランキング ユーザーのポイントや投稿数などでランキングを作成し、ユーザー間の競争心を持たせることでサイトを活性化させます。 食べログ h
楽天で例の定価12000円（笑）のシュークリームの販売会社ってどんなとこ?
昨日のエントリー 言っちゃうよ。無料化されるYahoo!ショッピングはこう使え に、いま話題の楽天で優勝セールした時に抹茶シュークリームの価格を12000円にスーパー値上げして77％オフを「偽装」したショップの話を書いた。元になったのはこの楽天の記者会見で 楽天・三木谷社長が陳謝「ルール甘かった」 記者会見を見ると元値を上げて77％オフを偽装したうち、３社は実は楽天に事前審査を上げていて、楽天側のチェックミスということでおとがめ無しになったと言っておりました。抹茶シュークリームの販売店は取材の音声がかぶり「偽装なんてとんでもない。掲載ミスをしただけ」と言ってまして、この報道見る限り「ああ、計算に疎い店舗がミスをしてそれを楽天がスルーしたんだな」と思い込んでおりました。楽天側もこのシュークリームの扱いが初めてだったので確認できなかったといっておりました。 んで、当初↑のエントリーには「楽天の
Web制作者は知っておきたいwebサイトのレイアウト7選 │ Design Spice
レスポンシブwebデザインからグリッドデザインまでよく使われているwebデザインのレイアウト用語をまとめました。 レスポンシブwebデザイン エラスティックレイアウト リキッドレイアウト フレキシブルレイアウト 固定幅レイアウト グリッドレイアウト 可変グリッドレイアウト レスポンシブwebデザイン(Responsive Web Design) PCやスマートフォン、タブレット事に複数のデザインを制作するのではなく、 ディスプレイの幅に合わせてデザインを最適化する方法。 CSS3のMedia Queriesを利用してディスプレイサイズに応じてデザインを変更します。 メリット 一つのソースで複数デバイスに対応できるのでメンテナンスが容易です。 また今後デバイスの種類が増えてもそれに対応できます。 それぞれのデバイスに合わせた形で調整できるのでユーザーエクスペリエンスも高くなります。 デメリッ
PHPのコミュニティ ポータルサイト「PHPプロ！」
平素より「PHPプロ！」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ！」ですが、サービスの利用状況を鑑みまして、2018年9月25日（火曜日）をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日（火曜日）を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
メルカリは若者だけのものじゃない。85歳のおばあちゃんの使い方
Internet ExplorerはIE特化アプリから一時的に日本を救ってくれたけど次回はもう助けてくれないよという警告
【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 初代編集長ブログ―安田英久
