ページ内アンカーリンクでスムーズスクロールを実装したが、別ページのアンカーリンクに飛んだ時も、スムーズスクロールさせたい！ このような疑問に回答します。 本記事では別ページでも、アンカーリンクへスムーズスクロールさせる方法について解説します。 script内に以下ソースを記述 $(function () { // 別ページの場合は以下 var urlHash = location.hash; if (urlHash) { $('body,html').stop().scrollTop(0); setTimeout(function(){ // ヘッダー固定の場合はヘッダーの高さを数値で入れる、固定でない場合は0 var headerHight = 0; var target = $(urlHash); var position = target.offset().top - headerH

どうもはらぺこグリズリーです。 突然ですが、筆者は煮卵が大好きです！！ ラーメン屋はもちろんのこと、 今まで食べに行った味玉トッピング可能の全ての店で必ず頼んできました。 1日3食全ての食卓に煮卵が並んだこともあります。 そんな筆者は、ついに食べるだけでは飽き足らず、 好きすぎて自分で完璧な煮卵を作ってみたくなってしまいました。 最初は固ゆでになってしまったり、 味の付き方が上手にできなかったりで失敗の連続でした。 しかし、筆者の煮卵に対する情熱は冷めることはありませんでした。 そして研究に研究を重ねて、 ついに何回やっても再現度100%で美味しく作れる 完璧な煮卵のレシピが完成致しました！！ しかも超絶簡単です！！ 早速紹介させて頂きます。 材料・費用 1、卵 　　　3〜4個 　　　54～72円 A、麺つゆ　 150cc 計、54円 作り方　※赤文字は完璧な煮卵を作るために絶対守りましょ

YouTube 動画の埋め込みを簡単にレスポンシブ対応する方法をご紹介します。 埋め込みコードをブロック要素で囲み、CSS の aspect-ratio プロパティを使い、アスペクト比を 16:9 に固定することで対応します。縦型動画の場合はアスペクト比を任意の値に変更してください。 また、古いブラウザーでも対応できる padding-top ハックを使った方法も紹介します。 動画の埋め込みをレスポンシブ対応する方法 aspect-ratio を使った方法 padding-top ハックを使った方法 動画の埋め込みをレスポンシブ対応する方法 まずは YouTube からコピーした「動画の埋め込みのコード（iframe）」をブロック要素（<div class="youtube">〜</div>）で囲みます。 <div class="youtube"> <iframe width="560"

佐野元春ファン歴25年以上のNEPPIE（ねぴ）です。 デビュー40周年を迎えた佐野元春さん。昨年はたくさんのライブを開催して、祝祭ムードになるはずでしたが、新型コロナウイルスの影響で殆どのライブが中止に。 今年は元春のライブは見られないのかと思っていましたが、2020年12月に「特別な形」でコンサートツアーを開催出来ました。 そしてデビュー41年目を迎える2021年、東京と大阪で特別なライブを行うことが決定しました。 開催が決まるまでの流れ、昨年見に行った横浜でのライブ、そして今後期待したいことを書いてみます。 佐野元春「ヤァ！40年目の武道館、城ホール」 2021年1月3日。我が家で購読していた朝日新聞に登場した全面広告。 「ヤァ！40年目の武道館。」 見出しと共に載っているのは、昨年12月のライブで思い切りジャンプしている佐野元春。 デビュー40周年を迎えた佐野元春。 一度限りの歴史

こちらの環境でいろいろ試してみたのですが全く再現できず、どうしようもなくなったのでトピックを作成してくださった NEPPIE さんに「NEPPIE さんの環境でテストさせてもらえませんか？」と訪ねたところご快諾いただけまして、なんとか解決することができました。NEPPIE さん、ありがとうございました！！ で、結局なにが原因だったのかを解説。 Snow Monkey のブログカードは、URL が埋め込まれたときにそのページを解析しにいって、取得した情報をキャッシュし、そのキャッシュをもとにブログカードを表示する仕組みになっています。 で、フロントでキャッシュが切れているページが表示されたときは js でregister_rest_route で登録したルートにアクセス同じようにページを解析しにいってキャッシュを生成キャッシュをもとに生成されたブログカードの HTML を取得ブログカードを表

スマホサイトでよく見かける、最上部の左か右にある「三」のようなボタン。知っていますか？ タップするとメニューが出てくる、通称「ハンバーガーメニュー」。ナビゲーションドロワーとも言います。 WEBデザインが好きな人なら特に使ってみたいと思う機能というか、モバイルファーストになっている現代ではもはや常識みたいなものですよね。 そんなハンバーガーメニューをコピペで簡単に実装できるようにしました！ ハンバーガーメニューの実装自体はJavaScriptやJQueryを使わず、CSSだけで実装する方法を紹介します。 今回もコピペで使えるようにサンプルを用意し他ので、ぜひ活用してみてください！

ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけCSSは、HTMLやJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。 今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。 スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。 保存しておくと便利なCSSスニペット 1. CSSリセット さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させるCSSリセットと呼ばれるテクニックがあります。 CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とm

Paul Graham のエッセイを読んで、自分なりにまとめたものです。今でも見返すと示唆があるので、読みやすくなるようブログでも書いておくことにしました。Paul Graham のエッセイの翻訳はこちらでリストになっています。ぜひ原文も当たってください（文末に参照先を書いています）。 昔書いたスライドからの転載です。 Y Combinator 創業者 Paul Graham からのスタートアップへのアドバイス（スタートアップが迷った時に読む Paul Graham からのアドバイス） from Takaaki Umada www.slideshare.net 原則 Make something people want 「人々の欲しいと思うものを作ろう」 スタートアップにとって一番難しいのは、人々の欲しいと思うものを作れるかどうかである（二番目は資金調達）。人々の欲しいと思うものを作れるま

SERVICE 豊富なWebマーケティングノウハウ 20年以上にわたり培ってきた経験から、集客を増やす（集める）、売上を上げる（売る）、採⽤応募者を増やす（採る）など、成果を上げるためのWebマーケティングノウハウが豊富です。Webマーケティングに精通するマーケターが複数名在籍し、お客さまのご要望、お悩みを的確に捉えることで、最適な施策をご提案することができます。 高い設計力・デザイン力 経験豊富なWebデザイナーが多数在籍し、設計⼒、デザイン⼒には定評があります。お客さまのご要望に対して、どのようなカスタマイズでも承り、最⼤限の⼒を発揮いたします。低価格サービスから完全カスタマイズサービスまで、お客さまのニーズに合わせたサービスをご提案することができます。 自社完結のワンストップサービス提供 Webサービスのプロセスすべてにおいて、⾃社内で完結することができます。よって、余計なコストを抑

注）本文中の「コンテナ」「アイテム」について 本文中でいう「コンテナ」「アイテム」は、flexコンテナとflexアイテムのことを指しています。 コンテナ display: flexや、wrap指定などをする 複数のアイテムを含む アイテム flex: 1 0 0%などの指定をする 1. アイテム潰れる問題（Safari） Chrome Safari 潰れてますね。 起きる条件 Safari なぜ コンテンツの最小サイズを尊重してくれない模様 どうすればいいのか flex-shrinkに0を指定 flex-basisにautoを指定（デフォ値なので、指定がなければそのままでOK） Safari10にて修正済み（つまり、SierraとiOS 10以降では対応不要） 2. align-items:center はみ出す問題 Chrome IE11 はみ出てますね。 起きる条件 IE10-11 f

指標についてはこちらの記事がわかりやすいのでぜひご参考ください。 これらの指標それぞれについて先ほどの順位点数を出します(0〜100)。その5つの順位点数に重みを加味して平均値を出したものが、PageSpeed Insightsで表示される点数です。 つまりどういうことか ​PageSpeed Inshgtsの点数はいかにファーストビューが速く完成して操作できるようになるか、それが全てということです。 例えば、同じ内容のWebページでも、 A ファーストビューが1秒で表示されるが、スクロールしたときのコンテンツはその後4秒かけて少しずつ表示される場合B 読み込みから5秒は画面が真っ白だが、その後ページの上から下まで一気に表示される場合PageSpeed InsightsはAの場合を高く評価し、Bの点数は低く評価します。これは実際のページ離脱の感覚として理に適っていると思います。 点数が上が

東京メトロ丸ノ内線の新高円寺駅を下りて徒歩1分。雑居ビルの地下に、そのバーはある。 店の扉から中を伺うことはできないが、扉に貼られているのは ▲入店ではなく「ログイン」 「ログイン」の文字。どうやらこのバーでは入店ではなくログインと表現する方がしっくりくるらしい。ここはおそらく日本で唯一であろうブロガーによるブロガーのためのバー「ブロバー」だ。 「ケイタさんですよね？　いつもTwitterで拝見していました！　会えるかなと思って伺いました。うれしいです！」 取材中に入店してきた男女のお客さんが共同オーナーの一人・沖ケイタさんを見つけるや否や語りかける。SNSでいつも追いかけている人と実際に会えた喜びからか、そのお客さんは満面の笑みだ。 沖ケイタさんはTwitterのフォロワーが27,000人を超えるブロガー。日頃からブログ、Twitter、メルマガなど複数の媒体で情報発信をしている。テレビ

人間は、ずっと料理をしてきた人間の最も人間らしい行為ってなんやと思います？ それは「料理をする」ということやと思うんです。 弱い人間（ホモ・エレクトス）は料理することで、消化吸収を合理化した。生き残る手段であった料理は、人間の創造の始まりなんです。人間は料理する動物です。人間が両手を使うために立ち上がり、数十万年前に火を使って以来、ずっと続けていることが「料理して食べる」ということなんです。 料理研究家・土井善晴はこう語る。人間の「料理する」という行為に着目し、それこそが人間らしさの証明だというのだ。 大げさに言えば「料理する」を考えることは、「人間とは何か？」を考えることでもある。土井への2時間にわたるインタビューからはそんなメッセージが聞こえてきた。 現代の日本で、料理することについて考える際に重要なヒントを与えてくれるのが「レシピ」という存在だ。私たちは日々、本やネットからレシピを得

【前編】はこちら 朝食に「赤福」食べたら何があかんの？ かつて土井が投稿したツイートが物議を醸したことがあった。 それは何気ない土井の朝食の献立だった。伊勢名物のあの「赤福」にワカメのお味噌汁——。 いただいた赤福のあさごはん。 こんでええやん。 pic.twitter.com/e1mc4yfuIm — 土井善晴 (@doiyoshiharu) September 3, 2018 この奇想天外な組み合わせに「それは違うやろ」とネット民が物言いをつけたのだ。 「正しい日本の朝食ではない」「栄養が偏っている」「健康に悪そう」 この「朝食に赤福はふさわしいのか」論争は、多くのユーザーを巻き込んで反響が広がった。 しかし、当の土井はどこ吹く風で、ユーモアを交えこう切り返した。 「何言うてんねん。 石頭やなー（笑）」 そして、こうしめくくった。 「どうぞ、家の中の多様性を認めてください」 この「家の

どうも、ジャングルオーシャンのミケです。 今日はjQueryで実装するアコーディオンメニューのご紹介だよ。 簡単すぎてあっという間に実装できてしまうので 「HTMLとCSSはわかるけどjQueryってなんだかとっつきにくいな～」「jQueryってなに？JavaScriptのらいぶらり？は？」 と思ってるそこのあなた！ぜひ見ていってね！ ではいってみよう！ アコーディオンメニューとはアコーディオンメニューってなんだよって人の為に説明するね。 クリックやタップをするとうにょ〜んと中身が出てきて もう一度クリックやタップをするとしゅ〜んと中身が閉じていく機能のことだよ。 Webサイトでよく見かけるアニメーションだよね。 要素が多くてごちゃごちゃしがちなデザインを収納するのによく使われるよね。 アコーディオンメニューのメリット・デメリットはこちらの記事を参考にしてみてね。 具体的なイメージは用意し

今回は、要素の重なり順を指定するCSSプロパティz-indexについて、分かりやすく解説します。 1. CSSのz-indexとは？

Webサイトを制作する際、CSSリセットを使用されている人が多いと思います。Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssが登場しました。 Eric MeyerのCSS Resetをベースに、marginやpaddingなどのスペースを上か下かのどちらかに統一できるようにカスタマイズされたCSSリセットを紹介します。 My CSS Reset/Base 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSリセットについて margin, padding, borderのCSSリセット フォントのCSSリセット レイアウトとbox-sizingのCSSリセット 特定要素のCSSリセット 属性と状態のCSSリセット スクリーンリーダー専用の

【CSS】メディアクエリとブレイクポイントの書き方 2018年版 レスポンシブデザインの基本 by shirushiru · 公開 2017年4月7日 · 更新済み 2018年1月19日 レスポンシブデザインの基本　メディアクエリとはメディアクエリとは、CSS2で可能だった「media」タイプを発展させた、CSS3の新しい要素です。 mediaタイプの主なものは、 screen（一般的ディスプレイ）、projection(プロジェクター)、print(プリンタ)、tv(テレビ)、all(すべて) などが挙げられます。 CSS2は上記のように、端末のタイプごとにスタイルを切り分けられることができましたが、それが限界でした。 たとえば、「ディスプレイ」といっても、今やスマホ、タブレット、PCと様々なデバイスが存在しており、それを一括りにしていては（端末毎にサイトを作る場合は別ですが）、見づらい