2019年7月24日にUIT meetup vol.7 - 集まれ！（タブン）実務では使わないフロントエンド芸発表会に、CSS芸人として登壇した。 UIT meetupとは、ReactやVue.js、BFFなどのフロントエンド技術を扱った至ってマジメなイベントだ。そんな中、主催者から「次はテーマをかえてフロントエンド芸人を集めたイベントがしたい」とお誘いがあり、CSS芸人として参戦してきた。 当記事は、UIT meetupで発表した内容をスライドと共に文字起こししたものである。 ※ 当記事には多くの画像が貼られているため、読み込みに時間がかかる可能性があります。 公式レポート記事: https://engineering.linecorp.com/ja/blog/uit-meetup-vol7/ 本気でCSS芸やりたい人のためのbox-shadow講座 CSS芸人、あらためbox-shad

こちらの記事は、『Learn to become a modern Frontend Developer in 2019』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに 新年になって以前書いた記事を少し簡潔にして理解しやすいように書き直してみました。この文章に以前私が書いた文章と違ったことが書いてあったり、少し矛盾する内容が見つかってもあまり気にする必要はありません。 昨年私が書いた記事はGitHubで公開しています。 Web開発は絶えず変化する分野です - 今日私たちがWebサイトを構築する方法は、2～3年前のやり方とは全く違ってきています。利用できるツールが沢山あり、新しいツールも毎日出てくるので、ウェブ開発者はいつもどのツールを使えばよいのか迷ってしまいます。 私は、ウェブ開発に係るフロントエンド、バックエンド、または運用を学びたいと思う人を対象にしたツ

通称「おにぎり」ことスーパーアフィリエイター水野が漏らした一言。 ※水野がツイートを削除したので画像で表示しています。よほど知られたくないノウハウだったのか。 ここからどんな難関キーワード１語でも上位表示される驚異のSEO手法を見抜いた人はどれだけいるだろうか？ こんにちは、SEO研究家のみうです。日々SEO対策の研究をしています。みうはアフィリエイトサイトを運営していた時期も含めて通算10年以上SEO対策に携わっています。 SEO対策はどんどん変わっています。「昔と今のSEO対策で大きく違う点は何か？」と聞かれたらみうは「被リンクの効き方」と答えます。 昔のSEO対策はとても簡単でした。上位表示したいキーワードで被リンクを付ければ付けた分だけ面白いように順位が上がっていました。 しかし、今は事情が異なります。被リンクを付けても思うように順位が上がらないことが多い。被リンクはSEO効果がな

ウェブページの検索順位を上げる方法をSEOの専門家でない人に説明するのは、今でも難しい。この分野はますます複雑になっているため、成果を出すには、さまざまなテーマについて正しく理解する必要があるからだ。 今回のホワイトボード・フライデーでは、2018年に検索順位を上げるために解決すべき9つの主な課題を順番に紹介しよう。また、これを読めば、検索順位を上げる方法を他の人に説明する手がかりが得られるし、そのままチェックリストとして使えるはずだ。 Mozファンのみんな、こんにちは。新年のスペシャル版ホワイトボード・フライデーにようこそ。今回は、2018年に検索順位を上げる方法を、チェックリスト形式で簡単に説明しよう。 多くの人がこう思ったことがあるだろう。 ウェブページの検索順位を上げる方法をSEOの専門家でない人に説明するのは、ちょっと難しそうだ その気持ちはわからなくもないが、今回のホワイトボー

今話題の次世代CSS『PostCSS』について、調べたことをまとめつつ、実際に使ってみました。 PostCSSとは？ PostCSSはJavaScriptプラグインでCSSスタイルを変換するためのCSS Processorです。 PostCSSはCSSを変換するAPIで、必要なプラグインをダウンロード（カスタマイズ）して設定することでCSSを変換することができる。 これらのJSプラグインは200以上用意されていて、変数やミックスインのサポート、カスタムセレクター、最新のCSS構文利用、インライン画像などの表示に役立ちます。 （プラグインの一覧はこちら） SassからPostCSSに移行する流れが出てきているようで、GoogleやTwitte、Shopifyなど結構大手サイトもPostCSSを導入しているそうです。 PostCSSを使うメリットとデメリット メリット ・コーディング時間の時短

Flexboxを使ったレイアウト手法に代わって、新たに注目を集めている手法がCSSグリッドを使ったレイアウトです。 従来のfloatを使った回り込みレイアウトやFlexboxを使ったレイアウト手法は、いわば「1次元的」なレイアウトでした。それに対して、縦横に配置する*「2次元レイアウト」*であるCSSグリッドは、Webデザインのパラダイムを大きく変えたという点で重要な役割を担っています。 CSSグリッドは、ほぼ全てのモダンブラウザで使用できるので、2018年以降もWebデザインにおけるレイアウト手法より定着していくはずです。しかし、これまで出てきている多くの情報が、実践的なものというよりは、どちらかと言えば概念的なものばかりです。 そこで今回は、「CSSグリッド」を使ったレスポンシブ対応の3カラムサイトのチュートリアルをご紹介していきます。 CSSグリッドをより実践的なサイト制作に当てはめ

ヒートマップとは、赤、青、黄、緑などの色で視覚的にコンテンツのユーザー行動の良し悪しが分析できるツールのことです。別名「ヒートマップツール」とも呼ばれます。 このヒートマップでユーザーに見られてない部分（とくに青色のコンテンツ部分）を改善すれば、SEOの良い効果が期待できます。 一方、ヒートマップを活用しなければ、ユーザー行動がわかりません。 具体的には、コンテンツのどの部分がユーザーによく見られてるか、見られてないかが把握できません。 この場合、改善の必要性が判断できません。 この状態だと、闇雲にコンテンツをリライトしてユーザーに見られてるコンテンツを削除したり、見られてないコンテンツをそのまま放置する可能性が高まります。 そうなれば、Googleに評価されづらくなります。 結果、検索順位が上がらなかったり、検索流入が増えづらくなるというわけです。 こうした良くない状況を回避する為に、ヒ

無駄な努力とお別れ。「採用される」提案書のつくり方 「頑張ったけど報われなかった提案書問題」とさよならするべく、「採用される提案書」の進め方・書き方の手順を解説していきます。 1. 企画書・提案書の目的 「上司に企画書を作れと言われたから……」 普段、このように定型的に企画書作成に取り組んでいる方も少なくありません。しかし、企画書を作成する目的を理解しておかなければ、相手に伝わりやすい魅力的な企画書にはなりません。まずは企画書の目的から確認しましょう。 企画書・提案書は相手に「問題解決策」を提示するもの 企画書は、何を目的として作られるのでしょうか。 企画書が必要となる背景には、現状で何かしらの問題があり、その問題が解決される理想像があるはずです。そして、そのギャップを埋めるための解決策が企画です。 そのため、企画書を見る相手が、「この企画をとおすことで現状の問題が解決し、理想像に近付ける

文章の書き方の1つ*「マークダウン」*はWebメディアの記事を作成する方にとって親しみ深いものでしょう。 今回はマークダウンに対応したテキストエディタとマークダウンを自動で生成するジェネレーターを紹介します。 マークダウン対応のテキストエディタを利用すれば、自分の記述しているマークダウンでホームページに公開した時に、どのような見え方になるのかリアルタイムでチェックできます。 また、ジェネレーターを使えば作成したい図をテーブルに変換したり、ホームページそのものをマークダウン記法に変換したりといった作業の効率化が図れます。 マークダウンとは マークダウンとは、文章の構造をWeb上でわかりやすいように記載するための文書の書き方を指します。2004年にジョン・グルーバー（John Gruber）によって開発され、その後多くの開発者の手が加わって現在の形式となっています。 文章の構造とは、例えば記事