![SEO担当者向け PWA・SPA・Service Worker 超入門。もう「JavaScript苦手」なんて言ってられない | Moz - SEOとインバウンドマーケティングの実践情報](https://cdn-ak-scissors.b.st-hatena.com/image/square/f049e4a105e34cdab37ea8b8c51aca7f8b15a207/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Fseomoz%2Fmoz_teaser_icon-content-4.png%3Fitok%3DR2X-7FbU)
以下は、Adrian Beceさんの記事、You can create these elements without JavaScriptの日本語訳です。 そのコンポーネント、CSSだけで実現できますよ(You can create these elements without JavaScript) 私達は、よくあるUI要素機能(アコーディオン、ツールチップ、テキストの切り取りなど)をJavaScriptで書くことに慣れてきました。しかし、HTMLとCSSが新しい機能を手に入れたことで、より少ないJavScriptでUI要素を作れるようになり、JavScriptはバリデーションやデータプロセッシングなど、ロジックにより集中できます。 いくつかの実装、まだ洗練されてなかったり柔軟ではありませんが、それでも小さなプロジェクトなどでは便利です。 なぜ、1つのアコーディオンのためにJavaScr
以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You can create these elements without JavaScript by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブ対応のテキスト省略 スター レイティング ツールチップ・ドロップダウンメニュー モーダル フロートするラベル アコーディオン・トグル 終わりに はじめに スマホやWeb
どうも、まさとらん(@0310lan)です! 今回は、JavaScriptをベースにしたWeb開発手法のトレンドを無料で学習できる海外のYouTube動画コースをご紹介します! フロントエンドからバックエンドまでクオリティの高い動画コースを厳選しており、GitやFirebaseなどの予備知識も含めて多彩なコースをまとめました。 英語だから…と言って見ないのは非常にもったいないレベルの動画ばかりなので、ソースコードの動きをよく見ながらぜひ挑戦してみてください。 なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください! ■Web開発の基礎を学ぶ まずはWeb開発を始める前に抑えておきたい基本的な知識を学習できる動画コースから見ていきましょう! 主に、HTML / CSS / JavaScriptの3点を重点
どうも!LSSです!! 最近、JavaScriptを使って色々やってみる事にハマり、記事もそればかりになってきていましたが、今回は 『JavaScriptを使わずに、はてなブログ記事内で使用可能な開閉メニュー』 の作り方を記事にしてみます! ※はてなブログ以外でももちろん使えますよ^^ サンプルとそのコード ↓の「メニュー」をクリックすると、その下に文字が現れます! コード 注意点!半角チルダについて とりあえず解説 「menu」と「tg01」は任意の名前です。 <input id="tg01" style="display: none;" type="checkbox" /> <label for="tg01">メニュー</label> <div id="menu">ああああああ</div> はてなブログ特有の注意点!<div>と</div>で囲んでいるのがミソ CSS部分の解説 #me
どうも!LSSです!! 今回は、 「はてなブログで始める!JavaScript超入門!」 と題して、 「プログラミング?やったことねー」 って人向けにさわりだけ書いてみます!! 第一章 Hello World 第二章 変数を使ってみよう! 第三章 計算ぐらいしておこうか 第一章 Hello World 大抵のプログラミング講座で最初の第一歩として書かされる「Hello World」をやってみます。 これは単に画面に「Hello World」と出力するだけのプログラムです。 まずは、はてなブログの「記事を書く」画面を開いてください。 ↑開いたら、「HTML編集」をクリックします。 HTML編集画面が開いたら、まず日本語変換をオフにして、そこに <div id=" と打ちます。 ↑すると、勝手に"がもう一つ付けられます。 (これは、はてなブログのHTML編集画面が持つ機能) カーソルは""の間
この3つの原則は書籍の構成にも現れています。 第一部の基本文法で「書き方」を学び、第二部のユースケースで「作り方」を学べるようになっています。 「学び方」は、章としてではなく全体的な流れとして取り入れることにしました。 なぜなら、「学び方」自体は学びたいことによっても異なる方法を取る場合があります。 そのため、「学び方」で個別の章とするよりは、他の章で「書き方」や「作り方」と一緒に見たほうがよいと考えたためです。 たとえば、基本文法などの学び方にはMDNのようなリファレンスサイトを見たほうがいいし、 アプリケーションの作り方は実際のサイトなどを参考にしたほうがよいためです。 第一部と第二部がどのように書かれたのかをざっくりと振りかえってみます。 第一部: 基本文法 第一部: 基本文法はJavaScriptの基本的な文法について扱っています。 プログラミングの入門書で文法については避けること
こんにちは、マナブです。 こちらは「プログラミング基礎の完全ロードマップ」のページです。 プログラミング基礎の完全ロードマップとは プログラミング基礎解説 月5万を稼ぐ方法の解説 フリーランスの基礎解説 稼ぐ事から逆算した教材 情報は随時アップデート 上記の感じで、これらをすべて無料で提供します。 人生において「プログラミングという武器」を手にいれましょう。 なお、プログラミング学習は短期間で終わるものではありません。 徐々に、コツコツと積み上げて、少しづつ人生を変えるのが良いと思います。 補足①:プログラミングの初心者コミュニティについて 講師付きでプログラミングを学びたい方向けに「CodeBegin」というオンラインスクールを運営しております。質問し放題で、あと生徒同士での横の繋がりも作れます。詳しくは「初心者向けのプログラミングコミュニティを始めます」をどうぞ。 補足②:プログラミン
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
ブログ運営で大切なことは、公開した記事がきちんと読まれることです。週刊はてなブログではSEO専門家の辻正浩さんに、現在のFavicon(ファビコン)の重要性と注意すべきポイントについて寄稿いただきました。どうぞお読みください。 SEO専門家の辻正浩( id:t-w-o )です。はてなブログのSEOをサポートしている外部スタッフとして、これまでも何度かはてなブログのSEOについてご紹介*1してきました。今年の6月から株式会社JADEを立ち上げてJADEの辻として活動しています。 今回は、はてなブログでも対応可能なFaviconの価値についてご紹介します。 モバイル検索結果にFaviconが登場 検索結果で選ばれるためのFaviconの作り方 5つのポイント サイズは48ピクセルの倍数 透過は使わない 複雑なものにはしない 正しく指定をする あなただけのFaviconに Faviconを設定す
要約 コンテンツマーケティングは「戦略」「制作」「流通」「効果検証」のフェーズから成り立つ 戦略を決めると自らが発信すべき情報の選択や、伝達マナーが決まる。オーディエンスに届けるデリバリー方法まで考えると、継続的な関係性構築につながる コンテンツ制作とは、単に文章を書くことではなくデザインすることである コンテンツマーケティングの「戦略」「制作」「流通」「効果検証」 コンテンツマーケティングにおいては、誰に、何を、どんな目的で、何を解決するために、どのように伝えるのかという「戦略」のフェーズ、その目標にあわせてコンテンツを制作する「制作」フェーズ、制作したコンテンツを届ける「流通(デリバリー)」フェーズがある(最後に効果検証は必要であるが、本記事では触れないので割愛する)。 戦略はミッションステートメントでドキュメントに落とし込む 戦略は、具体的なミッションステートメントに落とし込む。たと
以下の内容は毎年、新卒入社でSEOに配属されてきた人に向けて「SEOの学び方」として最初にお話ししていることです。ご参考までに。2020年版。 要約 SEOは、Web経験がない新卒にはハードなお仕事 世界中の企業がSEOに取り組んでいる理由を理解する 「この領域だけは、自信がある」というスキルの柱をつくる 要約 SEOは新卒配属で学ぶにはハードなお仕事 なぜ世界中の企業がSEOに取り組むのか、その必要性を自分で経験して学ぶこと SEO単独のスキルは実はそれほど役立たない。Web運用管理の周辺専門領域を1つ習得して、それを中心にSEOの理解を深めるのもよい SEOは、Web経験がない新卒にはハードなお仕事 SEO はインターネットの雑学の集合体です。ドメイン、Web制作の一連のフロー、サイト運用管理、コンテンツマーケティング、情報設計(IA)、UX/ユーザビリティ、Web解析、ソーシャル、そ
要約 SEOのスキルを伸ばすための最低条件 「Webがとにかく好き」 「複数のスキルを持つ、または複数の業界で働いた豊富な経験がある」 「自分の頭で考える、自分で手を動かす」 SEO上級者を目指すためのアドバイス Googleの講演を聴いた直後に、それを再演する 情報を覚えるのではなく「なぜ」を常に考える 悪いSEOをしているWebサイトも研究する 様々な実験を行いながら学ぶ 問題が発生しているWebサイトの原因探し行う おまけ1:意味不明な専門用語を使わないこと おまけ2:参加者属性が制限された勉強会に参加する 要約 SEOのスキルをステップアップするためのアドバイス Googleが言うから正しいのではない。検索エンジン、検索利用者、サイト運営者 三者の立場を考えながら、何が適切か考える癖をつける 自分自身でサイトを運営して、学び続ける姿勢が最も大切 先日、SEOをこれから学び始める人向
こんにちは。事業会社のマーケター1人と広告代理店のプランナー2人で活動している「Webマーケター1年目の教科書」です。 今回は、Webマーケティングを学ぶ上で非常に重要な、上流の事業戦略から考えた時のマーケティングの全体戦略と広告媒体選定について解説したいと思います。 ❶そもそも、なぜ今Webマーケティングなのか まず、なぜ近年WEBマーケティングがここまで注目されてきているかについて簡単に触れたいと思います。 電通から発表された「2019 日本の広告費」によると、インターネットの広告費は2019年に2兆円を超え、テレビ広告費を上回る額になっています。 従来の広告と比べたインターネット広告の利点は、主にこの3点です。 1、ユーザーデータを活用したターゲティングにより、顧客それぞれに最適な広告配信が可能 2、効果測定の定量化が行いやすく、素早い改善による効率的な広告運用がしやすい 3、配信枠
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く