今回はWebサイトやブログで表を作る方法を解説します。1ずつ丁寧に解説していくので、HTML/CSS初心者の方もご安心ください。 1. HTMLのtableの使い方 <table>はHTMLのタグの1つです。<tr>や<th>、<td>などのタグと合わせて使うことで表を作ります。タグの名前が似ていて分かりづらいんですよね…。 1-1. それぞれのタグの意味

今回はフォルダー整理のコツを10コのポイントに分けて紹介します。後から時間をかけてファイル探しをしなくても良いように、自分なりにルールを作っておきましょう。 フォルダー整理の3つの基本

サルワカくん 知っておきたい「暮らしの雑学」や「インターネットの知識」を分かりやすく解説していきます。

今回はTumblrというサービスを使っておしゃれなWebポートフォリオサイトを作る方法を解説します。おそらく1〜2時間ほどあれば「写真」や「動画」「イラスト」「アート」などのポートフォリオサイトを作ることができます。是非参考にしてみてください。

この記事では、iPhoneの入力スピードをぐーんと速くする「キーボードの設定方法」や「フリック入力技」を図を交えて解説します。

今回はCSSのbox-shadowを使って影（ドロップシャドウ）をつける方法と、コピペで使えるおしゃれな影のサンプルを10個紹介します。ぜひ参考にしてみてください。 CSSのbox-shadowの使い方 それでは、まずbox-shadowプロパティの使い方を紹介します。何かの要素に影をつけたいときには、例えば以下のように書きます。 ◯◯ { box-shadow: 左右の向きpx 上下の向きpx ぼかしpx 広がりpx 色 内側指定; } 例 .box {box-shadow: 2px 2px 4px -2px gray inset}

Google Chromeの拡張機能をひたすら試して、おすすめのものを32個厳選しました。目的に応じて、使えそうなものを探して頂ければと思います。 最後のセクションでは、ブログなどでよく取り上げられているものの「これはいらないんじゃないか」という拡張機能をまとめています。参考になれば幸いです。

今回はWordPress初心者の方に向けて「WordPressの基本」や「最初につまずきやすい点」などを紹介していきます。すでに知っている部分はサクッと読み飛ばしてくださいませ（とくに前半は簡単な内容です）。

僕はWordPressを独学で学んできました。たくさんの解説書を読み、分からないことがあれば、その都度Googleで調べてきました。 SANGO 今ではWordPressテーマの制作・配布まで行うようになりましたが、ここまで来ることができたのは、何冊かの良質な本に出会えたからです。 今回は、僕が今まで読んできた中で、特におすすめしたいWordPress関係の本を紹介します。 この本について どんな本？ 「WordPressをはじめて使う」という方にダントツでおすすめできる本がこちらです。とにかく易しく、見やすく、分かりやすい。第3版になってさらにパワーアップした印象です。他の解説書ではボリュームが多すぎて挫折してしまったという方にもおすすめできます。 学べることは？ WordPressとは何？というところから、WordPressの基本的な使い方まで、ざっと学ぶことができます。 どんな人にお

HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に

サイトの表示速度を上げるメリット 読み込み速度を上げることには、大きなメリットがあります。 メリット1：ユーザービリティの向上 Googleの公式調査によると、モバイルページにおいての「読み込み速度の遅延」と「直帰率」の関係は以下のようになるそうです。 読み込みが1秒から3秒になると、直帰率は32%上がる 読み込みが1秒から5秒になると、直帰率は90%上がる 読み込みが1秒から6秒になると、直帰率は106%上がる読み込みが1秒から10秒になると、直帰率は123%上がる これは致命的に感じられますね。もっと言うと、読み込み速度の低下により直帰する訪問者は、ただの他のページを見てくれないだけではなく、すぐに帰っていること予想されます。「3分滞在して直帰」ではなく「5秒待って遅いから直帰」という状態なわけですね。 現在のGoogleは検索順位を決めるうえで、検索ユーザーの動きまで見ている説もあり

WordPressにはおしゃれなテーマがたくさんあります。「これが無料！？」と思うようなハイクオリティなものが無料配布されていることもあります。 全てレスポンシブ対応 今回はおしゃれなWordPressテーマをまとめて紹介します。どれもレスポンシブ対応（スマホ表示にも最適化）です。海外製のものが多めですが、どれも日本語で使うことができます。ジャンル別に紹介していくので、必要に応じて読み飛ばして頂ければと思います。 いきなり手前味噌で恐縮なのですが、当サイトが制作・配布しているWordPressテーマです。開設1年で200万ページビュー/月を超えたサルワカのノウハウを、余すことなく詰め込んでいます。 デザインはモバイルファーストで、細部までこだわり抜いています。見出し、ボックスなどの装飾が多数用意されており、専門知識なしで簡単に記事に挿入できます。内部SEOもバッチリ最適化済み。有料ですが、

今回は、アイキャッチ画像の作り方を解説します。デザインのコツもまとめているので、ブログやWebメディアを運営している方はぜひ参考にしてみてください。 1. アイキャッチ画像のデザインツールは？ アイキャッチ画像を作るためのツールはたくさんあります。 Photoshop Photoshop（フォトショップ）を使えば写真をアーティスティックに加工したり、手描きのイラストを取り入れたりなどと、多様な表現ができます。しかし、有料です（参考）。また、ブログのアイキャッチ画像は基本的にイラストや写真をレイアウトをするだけで十分かと思います。購入してまで、フォトショップを使う必要はないでしょう。 Illustrator 当サイトでのアイキャッチ画像制作に使っているのはIllustrator（イラストレーター）です。フォトショップよりも、イラストレーターの方がアイキャッチ画像を作るような、レイアウト作業に

今回はHTMLとCSSだけで要素の「表示」⇔「非表示」を切り替える方法を解説します。JavaScriptやjQueryは使わないので、AMP対応している場合にも利用できます。 この画像のようなイメージですね。隠しておくものは文章でも、画像でも、箇条書きでも何でもOKです。 表示⇔非表示を切り替える仕組み ひとまず、仕組みを解説しておきます。コードは後ほど載せるので、仕組みに興味のない方は読み飛ばして頂ければと思います。 inputタグに連動させて切り替え

おしゃれなデザインのブログを勝手ながら22こ厳選してみました。審査基準は、僕が見て「お、おしゃれ〜」と思ったかどうか。加えて、読みやすさもある程度考慮に入れています。なお、デスクトップ表示・スマホ表示の両方のデザインを取り上げていきます（どのブログもレスポンシブ対応です）。 2017/07/11：ブログを追加しました。

本当におすすめできる映画を56本厳選しました。邦画もありますが、洋画作品が中心となっています。アクションからSF、コメディ、サスペンスなどまでジャンル問わず選んでいます。気になった作品はぜひ鑑賞してみてください。 記事内に商品プロモーションが含まれる場合があります はじめて観たときに、雷に打たれたような衝撃を受けました。 自分が生きている間には目にすることはできないのだろう、と思っていた宇宙の不思議をリアリスティックに、説得力たっぷりに描写しているのです。 ワームホール（タイムトンネル）を通り、高次元の世界に入る、といった 想像もできないような世界が美しく描かれています。 ただの空想だけではないのが、この映画のスゴイところ。映画制作にあたって、その道の権威とも言える物理学者が監修に加わっています。 この映画の魅力は宇宙の描写だけではありません。ストーリー展開も秀逸です。はじめは、やや後半に

人気の小説ランキングなどで度々上位に食い込んでいる人気作品です。テーマを挙げるとすれば「親子の愛情」です。舞台は小さな田舎町、主人公は不器用ながらも真っ直ぐなお父さん（＝ヤスさん）。たくさんの失敗を重ねながらも、一生懸命に息子を育てようとするヤスさんの姿には感情移入してしまう方も多いはず。話の大部分は、淡々と進んでいく日常生活により構成されていますが、退屈さは感じません。いつのまにか物語に引き込まれ、ページをめくる手は止まらなくなります。純粋に、とても感動した作品です。

最近では、SEO対策として「良い記事を書こう」「良質なコンテンツを作ろう」とよく言われます。しかし、多くの場合、その具体的な定義や目安は説明されません。 明確な答えはGoogleの中の人でさえ分かっていないのかもしれませんが、仮説であっても自分なりの答えを持っておくことは重要なはずです。今回は、当サイトが考える「良質なコンテンツの定義」を14点紹介します。※ あくまでも当サイト管理人の意見であることにご注意ください。 良質なコンテンツ：14の定義 1. 主題が明確であること 1つの記事では、1つのテーマについて書きます。言うまでもなく「美味しいご飯のお供」の話と「アメリカの大統領」の話は、1つの記事に書くべきではありません。 SEOを強化したいのであれば「何というキーワードで、検索ユーザーに訪れてきてもらうか」まで考えると、記事が書きやすくなります。 2. ユーザーが探している答えを、すぐ

今回はPC版Canva（キャンバ）の「はじめ方」「使い方」「ショートカットなどのテクニック」を解説していきます。Canvaを使えば、誰でも簡単にプロっぽいデザインを作ることができるようになります。是非活用してみください。