HTML

Tool/App

素材が無制限にDL可能な海外テンプレートサイトenvatoとは?

Envato(エンバト)という、世界で非常に有名な超お洒落なテンプレート(素材)を多数取り揃えた海外のサービスをご存知でしょうか?Envato(エンバト)には、HTML、WordPressテーマ、デザイン、動画、システムなど、様々なテンプレ...
Programming

CSVを使って数万件の項目を10分でHTMLに変換する裏技

今回は1000件、何万件の項目があろうが一瞬でHTMLに変換する裏技を紹介します。こういった技は基本的に小難しいプログラミングが必要と思われがちですが、今回紹介する方法はCSVとテキストエディターのみを使った方法なので、基本的に誰でもできる方法かと思います。
Programming

横からスライドするドロワーメニュー(ハンバーガーメニュー)のテンプレート

この記事では、コピペで作れるドロワーナビ(ハンバーガーメニュー)のテンプレートを紹介します。ドロワーナビとは、以下のように「三」型のボタンをクリックすると上下左右の何からコンテンツが現れるUXデザインです。そこにメニューがあると「ドロワーメニュー」と言われます。スマホサイトでは多く採用されているデザインですので、今後の制作では必須の技術です。また別名で「ハンバーガーメニュー」と言われることが多いですので合わせて覚えておきましょう。
Programming

BootstrapとGrid-templateの組み合わせが超万能で最強【コピペレイアウト】

今回はBootstrapとGrid-templateを組み合わせることで出来るレスポンシブ対応レイアウトが万能すぎて最強だと思ったので紹介します。基本パターンのみの紹介にしますがコピペで使用して頂いてOKです。WEB制作の初期の段階でレイアウト作成を簡単に済ませたいと考えている人は是非活用下さい。
Programming

Bootstrapのグリッドシステムの使い方を解説【初心者向け】

今回はBootstrapのレイアウト作成技法であるGrid System(グリッドシステム)についてを初心者の方にも分かりやすく解説していきます。
Programming

Bootstrapで初めに覚えるべき頻繁に使用するクラス【m-.p-.mx-.w-.h-など】

今回はBootstrapのclass(クラス)の中で最も頻繁に使用するものをいくつか紹介します。これらのクラスを初めに覚えてしまえば、レイアウトで悩むことはありません。ぜひ参考にして下さい。
Programming

Bootstrapとは?初心者は必ず覚えるべき基本的な使い方の解説

今回はWEB制作でよく使用される「Bootstrap」と言われるものについての説明と使い方の解説をします。WEB制作のリアルな現場ではBootstrapをかなり多用します。WEB制作の経験が浅い方や、これからWEB制作系の仕事をしたいって方は必ず覚えておいた方が良い事です。
Programming

【OGP設定】SNSシェア時に綺麗な見た目で表示する方法

OGPという設定をするとSNSシェア時に綺麗な見た目で表示する事が出来ます。OGPとはWEBサイトをSNSにシェアした時にカード型の綺麗な見た目で共有する事が出来る様になる仕組みです。 OGP設定がされていないページのURLをSNSに貼り付けてもURLの文字列しか共有出来ません。反対に設定がされていると以下の様な見た目で分かりやすい形で共有出来ます。
Programming

任意のページを検索結果から削除する方法

今回は作成したWEBページを検索結果に表示させない、もしくは既に検索結果に表示されているページを削除する方法を紹介します。
Programming

Youtube埋め込み動画を自動再生・消音・ループ再生する方法

この記事ではWEBサイト上にYouTube動画を埋め込んだ際に自動再生、消音、ループ再生を可能にする方法を紹介します。 埋め込みコードを少しだけいじるだけで可能なので簡単に今すぐ可能です。
Programming

完璧なレスポンシブを目指すならmeta viewportも理解しよう

今回の記事では、レスポンシブ対応で影が薄くなりがちなmeta viewport(メタ ビューポート)についてを紹介します。meta viewportは、スマホやタブレットなどのモバイル端末で最適なWeb表示させるために必要なHTMLタグです。
Programming

【コピペOK】お洒落な引用デザイン10選!!

今回はblockquoteを使った引用のデザインをおしゃれに表現したCSSデザインを10選紹介します。