Web制作者として転職する際、その会社の面接で尋ねておきたい質問のまとめ
就職や転職の面接は、面接官が投げかけてくる質問に答えるだけではありません。面接の最後に、「質問はありますか？」と必ず聞かれます。その会社にWeb制作者として就職するにあたって、答えを知っておきたい質問を紹介します。 私は面接を受けたことも、面接官をした経験もあるのですが、どちらの立場でもこれを読んでおけばまた違ったアプローチができたのかな、と思いました。 10 Questions You Should Ask In A Web Dev Interview by Milecia McG 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに プロジェクト管理はどのように扱われていますか？ 1ヵ月にいくつのプロジェクトに取り組むことができますか？ コードを管理するプロセスはどのようなものですか? 典型的なスプリントはどのくらいです
W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
HTMLとCSSのファイルを解析し、未使用のCSSをお掃除してくれる便利なツール -DropCSS
CSSファイルを軽量化するには、最適化・軽量化などの便利ツールがありますが、未使用のCSSを掃除することも重要です。HTMLとCSSのファイルを解析し、未使用のCSS（CSS4までサポート）を掃除してくれるツールを紹介します。 DropCSS -GitHub DropCSSの特徴 DropCSSの使い方 DropCSSのパフォーマンス DropCSSの特徴 DropCSSは未使用のCSSを掃除してくれる、わずか60行のスクリプトです。 HTMLとCSSを入力として受け取り、使用されたCSSのみを出力として返します。 対象となるセレクタはcss-selectのおかげで、実質的に考えられるすべてのセレクタの削除が達成されます。 参考: サポートされているセレクタ CSSTreeを使用すると、特別な処理を行わなくても、メディアクエリを他のすべてのブロックと同じように透過的に処理および削除できます
ホームページを作成しよう！無料で使える高品質HTMLテンプレート26個まとめ 2018年4月度
ウェブサイトやアプリを素早く作成でき、モバイルやタブレットでの表示にも対応した、レスポンシブな無料HTML5/CSS3テンプレート素材をまとめてご紹介します。 人気フレームワークの最新版となるBootstrap 4を利用したテンプレートも多く、デザイン性だけでなく自由なカスタマイズ性にもこだわったHTMLテンプレートが多く揃っています。2018年のウェブデザイントレンドもうまく取り入れているので、サイト開発のデザインやレイアウトの参考にもいかがでしょう。 無料で最強！レスポンシブ対応の高品質HTMLテンプレート23個まとめ 2017年10月度 全部無料！レスポンシブ対応の最新HTML5/CSS3テンプレートまとめ Oasis 静的サイトの生成を行うJekyllを使って作成された、モバイルアプリのランディングページを想定したテンプレート。刻々と変化するバロメーターなど遊びココロのあるレイアウ
SPAだけじゃない！Vue.js[1] jQueryをVue.jsに書き換えてみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドのつっちーです。 以前は最先端感をプンプンさせていたSPA（シングルページアプリケーション）ですが、最近では事例や情報が増え、当たり前に選択される技術となってきたように感じます。今後もどんどん使われていくのでしょう。ですが、だからといってサーバーサイドテンプレート（Haml、Slim、テンプレートとしてのPHPなど）やHTMLファイルへのマークアップが無くなるわけではありません。SEO対策、CMSやフレームワークへの適応など、様々な理由でまだまだ使われていくはずです。 ではSPAと、サーバーサイドテンプレートやHTMLファイルへのマークアップと、両方に使えるフレームワークはないものだろうか？ そう思い調べてみたところ、Vue.js がまさにそれでした。案件でも実際に使用し、大きなメリットを感じられたため、記事にまとめておこうと思います。 Vue.jsのSPAでの用
![SPAだけじゃない！Vue.js[1] jQueryをVue.jsに書き換えてみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/9c0639a571a5571b378855b1f6fd361c9080dbcf/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2018%2F02%2F30145102%2F01_ogp.png)
入門者向け alt属性の書き方アドバイス
入門者向け alt属性の書き方アドバイス Web Accessibility Advent Calendar 2017
Web制作者がgtag.jsで知っておきたいGoogleアナリティクスの今
Googleアナリティクスの新規プロパティ作成時に発行されるトラッキングコードが、gtag.js に変わりました。 こんにちは、Googleアナリティクス大好きカグア！です。gtag.js というのは2017年9月25日現在ベータ版として提供されていますトラッキングコードです。次期バージョンと見られ、現在英語版ヘルプまでは公式に情報公開されています。 本記事では、現時点でわかっていることと、今後いろいろと出てきます情報を読む上での前提知識レベルの内容を提供することを目的としています。詳しくは公式ヘルプや自己責任にてご実行下さい。 ＞＞人気の「Googleタグマネージャ: 本」最新一覧はこちら。 Amazonで詳しく見る 追記：2017年10月5日 ビーコン送信の確認方法を追記。 追記：2017年9月29日 確認したところ、analytics.js の表記と、ベータの表記はなくなっていました
CSSのコードを整理し、効率的に管理する方法のまとめ
CSSのコードを書くことは簡単ですが、コードを整理し、効率的に管理する方法は難しいものです。大規模なプロジェクトだけでなく、小規模なプロジェクトにも、そして未来の自分のためにも必須と言えます。 CSSを効率的に管理する一連のソリューションについて紹介します。 OOCSSはオブジェクト指向のCSSの略です。OOCSSのアプローチには、2つのポイントがあります。 構造とデザインの分離 コンテナとコンテンツの分離 このアプローチにより、制作者は異なる場所でも使用できる総合的なclassを利用することができます。 これには、良いニュースと悪いニュースがあります 良いニュース: 再利用することで、コードの量を減らします。「DRY Principle」と呼ばれるものです。 悪いニュース: 保守が複雑になります。特定の要素のスタイルを変更する時、ほとんどのclassが共通で使用されているため、そのスタイ
いまさら聞けないCSSレイアウトの定番手法 Flexbox再入門
floatレイアウトはすでに過去のもの。Webサイトの要素の位置を操作するならFlexboxが定番となりました。出遅れたWeb制作者のために基本を解説します。 テーブルタグが唯一のWebページをレイアウトする手法だった頃を覚えていますか？ 表形式のデータを表示するための機能をレイアウトに無理やり使っていたので、タグ名の意味と用途が異なるひどい状態でした。新しい「道具」が必要になり、「正しい」レイアウト方法としてfloatと絶対位置指定による手法が登場しました。 しかしテーブルタグ同様、floatと絶対位置指定の目的はWebサイトを整形することではありません。 主要ブラウザーがCSSで機能する頼れるレイアウトエンジン、CSSグリッドレイアウトをサポートしました。非対応のブラウザーに対する互換措置をすれば十分使えます。 互換性確保の方法は、Flexboxベースのレイアウト（W3Cが好む言い方だ
宣言ブロックのCSS設計 - kojika17
日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用
How to Use minmax() CSS Grid
The CSS Grid Layout Module takes responsive design to the next level by introducing a new kind of flexibility that was never seen before. Now, we can’t only define custom grids blazingly fast solely with pure CSS, but the CSS Grid also has many hidden gems that allow us to further tweak the grid and achieve complicated layouts. The minmax() function is one of these less widely known features. It m
シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選
コーディング Kota Naito / 2017.07.11 シンプルなHTMLとCSSをコピペするだけで実装できる見出しデザイン20選 画像を使用することなくHTMLとCSSだけでデザインした見出しのデザインサンプルを20パターン紹介いたします。できるだけ特性の違うデザインに仕上がるように工夫しております。これから紹介する様々なデザインサンプルを組み合わせれば、また新たな面白い見出しを作ることも可能かと思いますので、カスタマイズも楽しんでみてください。 一部ブラウザで表示できないデザインもあるかと思いますが、その場合はベンダープレフィックスを、各自で追加してください。 このページでは「見出しデザイン」のプレビューに画像を使用していますが、実際の表示は以下デモページで確認することができます。 DEMOページ 手書き風の見出しデザイン[01] このデザインのポイントは「border-radi
Webデザイナー中級者になるためのHTML5/CSS3テクニック10選
「作業効率に課題を感じている」 「作りたいページのデザインの実現方法がわからない」 日々webサイトを制作しているなかで、このような悩みを抱える方も多いのではないでしょうか。 この授業では、初心者から中級者へのステップアップを目標に「便利な機能」「比較的新しい機能」を中心に実演形式でご紹介し、実際のWebサイト制作時によく使われる＆役立つテクニックを学びます。 ■アジェンダ （）内の番号は、書籍内のサンプル番号です 1 レイアウトのマークアップのコツ（248、251など） 2 フロートに振り回されない（206） 3 フレックスボックスに挑戦。ナビゲーションを作成してみよう（237） 4 属性セレクタを使ったスタイリングで作業効率アップ（195、196） 5 border-radiusの仕組みを知って「カド丸」を手なずける（197） 6 蛍光ペンの太さのアンダーラインを引こう（198） 7
全日本＜label＞要素マークアップ検定
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗRead less
link要素「rel="canonical"」のまとめ
link要素のrel="canonical"について調べてみました。 以下、主にGoogleの「rel="canonical" 属性について」の記載を引用しながら、FAQ形式で書いていますが、認識誤りがありましたらどこかでつぶやいてください。 １．利用目的は？ 「検索エンジンのインデックス内での重複コンテンツ問題」解消のためです。 下の図で示すURLは、同じページにアクセスしているにもかかわらず、検索エンジンでは別のURLとしてインデックスされます。 検索エンジンのインデックス内での重複コンテンツ問題 link要素の「rel="canonical"」を利用することで、URLの正規化が行われ、重複コンテンツ問題を解消します。 解消イメージ 2009年2月、Google、Yahoo!、Microosftの大手検索エンジン企業が、URLの正規化に対応する共通の取り組みとして、「rel="cano
次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた
レスポンシブWebデザインを実装する際、画像の扱いは一つの課題として残っています。現在、PHPを使用した「Adaptive Images」やJavaScriptを使った「Responsive-Images」などが現実的な対応策としてありますが、どちらもApacheの設定を必要とします。レスポンシブWebデザインが広まって標準的な実装方法の一つになろうとしている今、サーバサイド技術に依存しない解決策が早急に求められています。 そんな中、HTMLの仕様策定の一端を担うWHATWG（Web Hypertext Application Technology Working Group – ワットダブルジーと読む）で、新たな仕様が検討されています。 では、どんな議論がされていて、今どんな状況なのか？ なかなか複雑なことになっているようなので、調べてまとめてみました。 ※この記事は、レスポンシブWeb
第1回 WebSocket登場までの歴史 | gihyo.jp
はじめに 初めまして。NTTアドバンステクノロジの金城と申します。幸運にも記事を執筆させていただけることになりました。WebSocketという新しいウェブの規格についての連載を、全4回の予定でお届けします。 用語統一について WebSocketは「WebSocket」「WebSockets」、単語を切り離した「Web Socket」等、表記に揺れがあります。2009年12月22日のワーキングドラフトのタイトルは「The Web Sockets API」となっていますが、2010年4月26日のエディターズドラフトでは「The WebSocket API」となっています。この連載では、最新の仕様書に則り、用語を「WebSocket」で統一します。 HTML5とWebSocketの関係 WebSocketは、もともとHTML5の一機能として仕様の策定が進められていました。しかし、Web S
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Nite LP54「Coder's High 2017」（2017年11月4日開催）
HTMLやCSSを100問特訓！パズルゲーム「Super Markup Man」
re-dzine.net situs togel online toto 2023 -
