コピペでOK！ドロップダウンメニューをHTMLとCSSだけで超簡単に作成する方法
サイト内のカテゴリーが多くなってしまったとき、全てを横並びにすると場所をとってしまう上、見づらくなってしまいますよね。 今回はそんな場合にオススメなのは『ドロップダウンメニュー』です！マウスカーソルを乗せると項目が下にズラッと出現するアレです。 ▼ドロップダウンメニューの例 ホーム 日常 旅行 商品レビュー ライブラリ 料理 趣味 映画 漫画 エンタメ関連 ゲーム 映画 WordPress関連 お問い合わせ ※スマホの場合は表示が崩れる場合があります。そもそもドロップダウンメニューはマウスオ ...
ホームページの『パス』の指定方法について分かりやすく解説
みなさんは『相対パス』や『絶対パス』というものを聞いたことがあるでしょうか。 この『パス』というものは、ホームページの制作・管理において必要不可欠の知識です。しかしサイト作りを始めたばかりの人の中には、パスを指定する方法がイマイチ分からないという人が多いと思います。 そこで今回は、『相対パス』と『絶対パス』の違いや、『パス』の指定方法について、分かりやすく解説していきます！ 『絶対パス』と『相対パス』の違いについて "パス"とは『特定のファイルやフォルダの位置を指定するための記述』のことを言います。 また ...
ホームページ制作を初めて学ぶのならコレ一冊でOK！知識ゼロの私でもサイトが作れたおすすめ参考書
「ホームページを作りたい！」「自分のオリジナルサイトを立ち上げてみたい！」と思ったことのある方は多いと思います。 しかしいざ作ってみようとすると"HTML"や"CSS"など初めて聞く単語ばかり出てきて、いったいどこから何から勉強すればいいの...？となってしまいますよね。 そこで今回は、ホームページやWEBに関する知識が全くのゼロだった私のような超初心者でも、この一冊のみでHTMLとCSSについて理解し、サイトを作れるようになったおすすめの参考書についてご紹介します！ 最高の初心者本『スラスラわかるHTM ...
GIF画像のサイズを変更したり容量を最適化することのできるおすすめサイト
アニメーションを表現できることで知られるGIF形式の画像(.gif)ですが、他のファイル形式に比べてサイズの変更や容量の最適化が難しいという欠点があります。 そこで今回は、GIF画像の大きさや容量を簡単に変更することのできるおすすめサイトをご紹介します！Twitterのような投稿ファイルのサイズに制限(5MB)があるようなサイトにGIF画像を投稿する際に重宝します。 EZGIF.comへのアクセス https://ezgif.com/上記のサイトはGIF画像の編集に特化したサイトで、サイズ変更や容量削減の ...
斜線背景の画像を簡単に生成することのできるおすすめサイト
「斜線の模様でボタンや背景にアクセントを付けたい！」そう思ってもCSSで適用しようとするとコードが長くなってしまいますし、各プラウザごとに適用させる必要もあり面倒くさいですよね('A`) そこで今回は、ホームページの素材などに利用することのできる、斜線背景の画像を簡単に生成することのできるおすすめサイトをご紹介します！ Stripe Generatorへのアクセス Stripe Generator 上記のサイトのジェネレータを活用することで思い通りの斜線背景画像を生成することができます。 ジェネレータの使 ...
CSSで領域からはみ出たテキストをドット「...」に置き換える方法
色々なホームページで、以下のように表示しきれないテキストの部分をドット「...」に置き換えているのをよく目にするのではないでしょうか。 1行の場合 これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。 2行以上の場合 これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これはテスト文です。これ ...
吹き出しを作るためのCSSが簡単に生成できるおすすめサイト
ホームページやブログでよく見られる"吹き出し"を、画像を使用せずにCSSのみで作りだす際に役に立つサイトさんをご紹介します！ ↓ ちなみにこのような感じの"吹き出し"が簡単に生成できます cssarrowplease.comへのアクセス http://cssarrowplease.com/ 上記の"cssarrowplease.com"さんのサイトにアクセスしてください。 アクセスすると以下のような画面が出てくると思います。 このサイトの数値をいじることで、吹き出しを自由にカスタマイズできます。 以下、パ ...
カーソルを合わせた際の様々なホバーエフェクトを超簡単に実装する方法
ボタンなどの要素にカーソルを合わせた際の様々なホバーエフェクトを「Hover.css」を用いて超簡単に実装する方法について紹介します！ 「Hover.css」のダウンロード&実装 ianlunn.co.uk/articles/hover-css-tutorial-introduction/ 上記のダウンロードサイトにアクセスし、"DOWNLOAD"ボタンをクリックして「Hover-master.zip」という zip形式のフォルダをダウンロードしてください。 ダウンロードが完了したら.zipフォル ...
HTMLやCSSのソースコードをそのままページに貼り付ける方法
ホームページやブログで自身のソースコードを表示したい際に、HTMLやCSSのソースコードをそのまま貼り付けることのできる方法を紹介します！ 貼付け用ウィジェットを『GitHub』で生成 手順①： まず「GitHub Gist」さんのサイトにアクセスしてください。 手順②： "Language:Text"をクリックして貼り付けたいソースコードの言語を選択し、下の枠内に表示したいソースコードを記述して、 下の"Create Pubric Gist"というボタンをクリックしてください。 手順③： クリックすると ...
HTMLサイトでも設置可能！ホームページにブログのような"一言コメント欄"を設置する方法
自分のホームページにブログでよく見るようなコメント機能を追加したい！でもCGIとか勉強するのメンドくさいし・・・。 そういった方のために今回、簡単に一言コメント欄を設置する方法を紹介します！(Google Chrome, IE11で動作確認） ちなみに導入に成功すると、このページの下部にあるようなコメント欄が設置されます。 ① プログラムのダウンロード まずはプログラムを配布して下さっている 「WebmasterTOOL」さんのサイトに行き、下の方にスクロールすると"一言コメント"のダウンロードボタン が ...