Web屋という仕事のこれから 〜Web動向からWeb屋に必要な技術を考えてみる〜 FutureSync Vol.5 で発表したスライドです。 タイトルは釣りです。前半はほぼネタです。 中身はJavaScriptで動作するデバイスは楽しいからみんなやってみたら？ という内容です。
Web屋という仕事のこれから Web動向からWeb屋に必要な技術を考えてみる
Web屋という仕事のこれから 〜Web動向からWeb屋に必要な技術を考えてみる〜 FutureSync Vol.5 で発表したスライドです。 タイトルは釣りです。前半はほぼネタです。 中身はJavaScriptで動作するデバイスは楽しいからみんなやってみたら？ という内容です。
コーディング規約を作ろう
コーディング規約を作ろうコーディング規約やスタイルガイドは、HTMLやCSSのマークアップや、各種プログラミング言語の書き方をまとめたものです。コーディングスタンダードやコーディングガイドラインとも呼ばれますね。コーディング規約を決めていなかったり、あいまいにしたまま進めていくと、書式が統一されていないため、コードを追加すればするほどゴチャゴチャしたコードになりがちです。チームでコーディングしていくならなおさら。今回チーム用のコーディング規約を見直すことになったので、その時感じた抑えておくべきポイントをまとめてみます。 コーディング規約に含むべき項目ディレクトリー階層ファイルを保存するフォルダーの階層や、そのフォルダーの名前を決めておきます。画像を格納しているフォルダーを例にあげても、「image」「images」「img」などの名前が考えられます。人によってつけるフォルダーの名前が変わっ
Ajaxを劇的に簡単にするReact.js
ここ数年、Javascript界隈でフレームワーク戦争が勃発してきました。クライアント開発の規模も年々大きくなり、jQueryだけでは複雑な画面遷移などを管理しきれなくなってきたのが原因だと思います。 私も昨年までAngularとbackboneを試しましたが、サーバサイドをMVCにしているのに、クライアントでもMVCを作るMVCの2階建ては、やり過ぎなのではないかと思っていました。フレームワークそのもの覚えるまでにも一苦労というのも面倒に感じました。 2014年、海外でブームに火が付いたReact.js そんな中、2014年の後半からFacebook発のReact.jsの採用事例が聞こえてくるようになりました。AirBnBや米Yahoo! Mailなど大手がReact.jsを積極的に採用し出したので気になり、年末年始を使って色々調べてみることにしました。 Rails以来の衝撃 色々試して
こんなHTMLとCSSのコーディング規約で書きたい - Qiita
HTML と CSS のコーディングルールを作ろう HTML と CSS のコーディング規約を中心に、メンテナンス性の良い HTML や CSS をコーディングする際に重要だと思うポイントをまとめています。 誰に向けた記事か この記事には、HTML や CSS を書く人に役立ちそうな内容が書いてあります。 特に初級者から中級者の方で、HTML や CSS を一通り学習した方からの反応が良いです。 まだ HTML や CSS の学習を始めて間もないという方は、先に案件やプロジェクトをこなしコーディング経験を積むことをお勧めします。経験を積むとよりこの記事の内容への理解が深まるはずです。 HTML と CSS を書くときに大切なポイント2点 HTML と CSS を書くときに大切だと思うことを書きます。 1. HTML と CSS を書かない あなたがいま書いている HTML と CSS は、
[HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者
web制作者は一人で制作するのではなく複数人で制作したリ、作ったものを他の人に渡したりします。その場合、コードは同じルールに基づいている方が引き継ぎ易いですよね。 一部の人間、または企業内のみで通っているルールは方言の様なもので、他では通用しません。 こうした、別の場所で制作している人間の間で通じる可能性のあるスタンダードな概念として、セマンティックwebという考え方が存在している(全ての制作者が行きつくべき概念としての存在意義もある、という意味です。その為にあるという話ではないです。コーディングルールもこの考え方を踏まえた上で作るべきで、地域やコミュニティの違う集団の中でも、皆がセマンティックというものを意識として持っていれば、マークアップも似通っていく、共通化されていくはずだと考えています)のです。現状、たくさんの制作者がこれ以外のルールに基づいて制作を行うという事はまあ、あり得ないで
![[HTML]セマンティックで正しいコードを書こうとする理由 ― 二人の主を戴く技術者](https://cdn-ak-scissors.b.st-hatena.com/image/square/8b6c55139e81b201569782d7f4f2ec31ff4b2b3e/backend=imagemagick;height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F03%2Fsemantic-html-reason-01-150x150.png)
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
日本語Webフォントの革命 - 3846masa's memo
日本語Webフォントに革命がおきた． 詳しくは続きを読んでくれ． ちょっと大きく出てみた． 実装についての記事はこちら この記事で言いたいこと 動的に日本語フォントのサブセットを作成してくれるOSSを作りました． サンプルページはこちら 臨時のサンプルページはこちら 追記 herokuが落ちてる，メモリ不足だな．早い所Dockerfileつくろう． 追追記 herokuで運用は再検討したほうがよさそう．「こういうこともできます」の事例ということでひとつ． （やっぱり普通のサーバで動かす分には大丈夫そうな気がする．どうだろう） そんなわけで，どうぞご利用ください。 （ちなみに粗い作りなので，pull-requestやissue投稿をしてくださると嬉しいです．） 何が革命なんだ 革命が起きたというけど，どこが革命なの？ 僕には革命が起きたようには思えないけど そんなこと言わんといて，泣くわ．
レスポンシブイメージのネイティブサポート - HTML5 Rocks
<picture> <img src="image.jpg" alt="A description of the image."> </picture> If there is no img element nested inside the picture element, the picture element won't work. Like the srcset attribute, the picture element will update the value of the src attribute in that img element. The difference is that where the srcset attribute gives suggestions to the browser, the picture element gives commands
★★Facebook・TwitterのOGP設定方法まとめ｜ferret [フェレット]
運営しているホームページやWebサイトで、OGP設定は行っていますか？ OGPとは「Open Graph protocol」の略称。FacebookやTwitterなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。SNSでの拡散を通じて多くの人に記事をみてもらうためには必須の設定といえます。 そこで今回は、最新のFacebookの仕様に準ずるOGPの設定や確認方法、注意点などを紹介します。 OGPとは OGPとはOpen Graph Protcolの略称で、FacebookやTwitter、mixiなどのSNSでシェアされた際に、そのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）を意図した通りに正しく表示させる仕組みです。 上の赤枠のように表示を目立たせることが可能で、URLだけの場
![★★Facebook・TwitterのOGP設定方法まとめ｜ferret [フェレット]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1c3700a579097ec52c83fa0099fe14fd17a02d34/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fferret.akamaized.net%2Fuploads%2Farticle%2F610%2Fog_image%2Fdefault-bdf2027367621662f48bdc85408bf81b.jpg)
スタイルシートの class と id の使い分け
初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。 ...続きを読む class属性とid属性の役割の違い 「class」と「id」の役割と、使用上の違いを簡単に言うと、次の通りです。 ■class： 「種別名を割り当てる」 → 同じclass名を、1ページ中に何度でも使える。 ■id： 「固有の名前を割り当てる」 → 同じid名は、1ページ中に1度しか使えない。 class属性が対象の「種類・部類」を表しているに過ぎないのに対して、id属性は対象に「固有の名前」を付けて一意に表すために使われます。ですから、1ページ中に同じid名は1度しか使えません。 学級名(class)、学籍番号(id)
SEO対策をやるならこれだけは知っておきたいHTMLタグの基礎
更新日: 2017年03月21日公開日: 2014年04月07日SEO対策をやるならこれだけは知っておきたいHTMLタグの基礎 SEO対策を過去に試みた方は多くいらっしゃるかと思いますが、HTMLタグなどのマークアップの知識を必要とする場面でつまづいたり、SEO対策をやっていてもHTMLについては何となくしか理解していないという方は多いと思います。 そんな方のために、今回はSEO対策における最低限の知識であるHTMLタグについて簡単にご紹介できればと思います。 SEO対策にはHTMLの知識が不可欠 SEO対策には内部対策と外部対策外部対策とはホームページに対して他のサイトからリンクを貼ってもらえるように働きかけることです。 一方で、内部対策とは『検索エンジンにサイト構成やコンテンツ内容を正確に理解させるため、サイト内部に施す施策』のことを言います。 両者ともSEOにとって大事な対策でありま
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
ウェブエンジニアのためのオンラインツールまとめ
The Web engineer's online toolboxというまとめ記事が便利そうだったので、実際に試しつつ抄訳してみました。(一部のコメントと体裁は変えています。) 目次 一覧 RequestBin httpリクエストを保存するエンドポイントを作ってくれる。 Create a RequestBin のボタンをクリックするとURLが表示されるので、そこをHTTPクライアントからたたくとRequestBin側にリクエスト内容が記録される。 ソースも公開されてるのでローカルで立ちあげることもできる。 githubのwebhookのhelpも参考にどうぞ。 Hurl httpリクエストを実行してくれる。パーマリンクも作ってくれるので、POSTリクエストもコピペで他の人と共有できる。 類似サービス: REST test test , Apigee console httpbin HTTP
CSSでWebサイトのレイアウト組み＋装飾の基本プロセス
CSSでWebサイトのレイアウト組み＋装飾の基本プロセスCSSでレイアウトを組むのは、最初はすごく難しく感じるかもしれません。私も何度も挫折しかけました。。でもよく使うプロパティを理解し、少しずつ組み立てていくと自然と慣れてきますよ！今回はサンプルファイルも用意したので、ダウンロードしてコードをじっくり見てやってください。連載企画「実践で学ぶWebサイト制作ガイド」、CSSでラストスパートです！ 実践で学ぶ Web サイト制作ガイド：その 7目標：CSS でレイアウトが組める・基本的な装飾ができる必要なもの：Windows メモ帳 や、Mac OS Text Edit などの文章エディタツール。もちろん Adobe Dreamweaver などの Web 系オーサリングソフトがあるならそれで OK対象レベル：CSS の基礎知識がある・基本的な CSS が手打ちで書ける目次誰のため？何のため
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
re-dzine.net situs togel online toto 2023 -
CSS Lecture: 有名サイトが使っているid名class名集めてきました！
密かにわりと長くWebデザイナーやってるけど「Git」は初心者なの。
