はてなブックマーク

はじめに 当記事の目的 ブログなどの記事で目次があると記事の全体像がわかりやすいですよね。 特に長い記事だと目次があると助かりますよね。 今回はそんな便利な目次を自動作成してくれるJavaScriptを紹介し、 簡単に目次を作れるようになってもらいます。 目次のサンプル 実際に作成された目次のサンプルを当記事にも反映してみました。 記事の一番上部にあるのがJavaScriptで自動作成した目次です。 （いつも私が書く記事ではこんなに章分けをしませんが、今回は例として多めに分けています。。。） 見出しタグから目次を作成する方法 見出しタグから目次を作成する方法として、JavaScriptを用います。 JavaScriptを使用して記事中の見出しタグ（h2タグ、h3タグ）を抽出し、それぞれの内容から目次を自動作成します。 実際に作成したJavaScriptのコード 以下に見出しタグから目次を自

たくさんのWebサイトで採用されている固定ヘッダーや固定フッターをBootstrap 4を用いて簡単に実現する方法を紹介します。 固定ヘッダーと固定フッターを設定するにはHTMLやCSS、場合によってはJavaScriptの知識が必要になるので、想像以上に設定が難しいものですが、 Bootstrap 4を利用すればHTMLタグにclassを追加するだけ固定ヘッダーと固定フッターを簡単に設定できます。 Bootstrap 4の利用を前提としているので、まだ準備ができていない人は以下のページを参考にしてください。 https://www.marorika.com/entry/setting-bootstrap 固定ヘッダー、固定フッターとは 固定ヘッダーとは 固定ヘッダーとは、Webページの上部に固定されているヘッダーのことを言います。 スクロールしても上部に固定され続け、隠れずに残った状態と

ブログ名は一度決めたら変えづらいので慎重に決めないと後で後悔することになりかねません。 後悔しないように納得の行くブログタイトルを決めたいのだけど、どうやって決めたら良いかわからないって人が多いと思います。 この記事では、ブログ名をこれから決めたい人、これから変えたい人に向けて、 ブログ名を決める際のポイントを4つ紹介します。 ブログ名を決める際の4つのポイント ブログ名を決める際のポイントとして4つを紹介します。 ブログ名を決めるポイント4つ 覚えやすいか？ キャッチーか？ 何を伝えたいかわかるか？ 愛着をもてるか？ 4つのポイントをすべて満たす必要はありませんが、 これから始めるブログの特徴や特性に併せて決めましょう。 覚えやすいブログタイトルか 覚えやすいブログタイトル 長すぎない適切な文字数であること 読み方がわかること ペンネームやアカウント名に近いこと 覚えやすいブログ名であれ

hrefとは hrefとはaタグの属性の一つで、いくつかあるaタグの属性の中でも一番重要なものとなります。 hrefでリンク先の場所を指定することができます。 hrefの読み方は？ hrefの読み方は「エイチレフ」。 aタグとセットで用いるので、「アンカータグのエイチレフ」と呼ぶことが多いです。 hrefとは何の略？ hrefはhypertext referenceの略で、直訳すると「ハイパーテキストの参照」となります。 少し脱線しますが、ハイパーテキストとは文字通り「テキストを超えるテキスト」のことで、 通常のテキストの機能を超えたテキストのことをいいます。ハイパーテキストを作成するための代表的な言語がHTMLです。 つまり、「hrefとはハイパーテキスト上で参照機能として用いられる属性である」ということができます。 hrefのリンク先種類と使い方 hrefのリンク先種類 hrefではリ

Webフレームワークとして人気であるBootsrapをみなさん使いこなしているでしょうか。 先日、Bootstrapが正式にバージョン4にアップグレードされました。 まだBootstrapを使ってない人は、正式なメジャーバージョンが発表された今のタイミングに使い始めてみてはいかがでしょうか。 私自身はBootstrapはバージョン3から利用しています。 今となってはBootstrapを使いこなせるようになりましたが、最初は使い方がわからず効率的ではありませんでした。 今回は、Bootstrapを使いこなせていない人に向けてまずは覚えた方が良い2つ使い方について紹介します。 たった2つの使い方を覚えるだけで、Bootstrapがどれだけ便利かがわかると思います。 Bootstrapとは BootstrapとはWeb部品の集まりを提供するフレームワークで、CSSやJavaScriptの詳しい知

ブログを始めてから1ヶ月が経ちました！ 3日坊主で続かないかなーとか最初は思ってたけど割りと続けられています＼(^o^)／ 1ヶ月しか経ってないですがブログをやってなかったら知らなかったことや出来なかったことがたくさんありました。 また、今のところまだまだブログ続けていきたいなと思えているので、 これからやりたいことなど書きたいと思います。 ブログを始めて間もない人には記事内容が少しは役にたつと思います。 1ヶ月の間でブログのためにやったこと（やってよかったこと） 記事を書いた これは当たり前ですね（笑） 1ヶ月で20記事くらい書きました。 1日1記事書くことをノルマとは別にしておらず、書けるときに書くスタンスでやってます。 1日1記事書くと良い、とたくさん言われていますが、1日1記事はわたしにはきついですし、 つらいと思ったら私自身嫌になってしまうのでマイペースでやっています。 今のとこ

コピーって結構使いますよね？ スマホだと、長押しして選択してコピーしてますよね。 パソコンだと、WindowsであればCtrl + C、Macであれば⌘command + Cでショートカットをよく利用していると思います。 ショートカットを使わずに右クリックからコピーする人もいると思います。 パソコンならショートカットもありますし簡単にコピーできますが、スマホだと少々面倒くさいですよね。 そんな面倒くさいコピーを簡単にしたかったので、 今回はクリックだけでコピーできるような機能をブログやサイト内に設置する方法について紹介したいと思います。 なお、今回紹介するのは外部のjQueryやBootstrapなどは利用しなくても動作するものなので必要であればすぐに利用できます。 今回は外部ライブラリとかを使わず、純粋なHTMLとJavaScriptだけでクリップボードのコピーを実現します。 外部ライブ

BootstrapというWebフレームワークを導入すれば、CSSをそこまでいじらなくてもHTML上でclass指定すれば簡単にスタイルを決めることが出来るのでとても便利です。 また、Bootstrapのグリッドレイアウトの考え方を用いることで、デバイスに応じたレスポンシブデザインもとてもやりやすいです。 今回はそのBootstrapの現時点（2020年3月）最新版の「Bootstrap 4.4.1」を導入するための設定方法を紹介します。 ちなみに公式サイトは以下になります。 Bootstrap 4の公式サイト 「Bootstrap 4」の設定方法 今回紹介するのは、HTMLのhead要素とfooter要素にコードを追加する簡単な方法です。 head要素に設定を追加 まずはHTMLのhead要素に計2行を追加します。 viewportのmetaタグ設定 ※この設定は必須ではなく、設定しなくて