HTML-CSS

postcssの使い方

次世代CSS登場!PostCSSの簡単な使い方

最近のWeb制作の現場では、ふわっとした自然な動きのアニメーションやSMACSSのようなスタイルの概念、スタイルのコンポーネント化など、PSDをそのままCSS化すればいいと...

ここまでできる!?タイポグラフィのCSSスニペット集

ご存知ですか?Webサイトのタイポグラフィはこれまで、ユーザー側のPCにインストールされているものしか表示できなかったのです。Webフォントが出てきてからはWebサイトでも様々なフ...

明日から使える!超カッコいいFormデザインのCSSスニペット集

スタイリングの中でも未だにデフォルトスタイルのままになっているのが、フォームのデザイン。ブラウザのデフォルトデザインが適用される場合が多く、CSS的にもややこしい操作をする必要があ...
homepage-demo

HTMLテンプレートで作ったホームページを無料で公開する方法

HTMLテンプレートを使うことで簡単に自分のホームページを作ることができます。でも、つくったホームページを公開するには、サーバーの契約やドメインの登録など難しいことがたくさんありま...
Font_Awesomeをダウンロード

無料でアイコン使い放題!FontAwesomeの使い方まとめ

Bootstrapと一緒によく使われるのが、FontAwesome。なんと500以上のアイコンが無料で使い放題。しかも画像とは違うので一つずつダウンロードして、imageフォルダに...

CSSを効率良く書く!Emmetの書き方・使い方まとめ

以前はzencodingという名前だったEmmetですが、HTMLに限らずCSSでも威力を発揮します。例えばmargin: 10px;と13文字打っていたものが、m10のようにたっ...

Bootstrapでoffcanvasメニューを作る方法

offcanvasとは、主にスマートフォンなどのモバイルデバイスでwebサイトにアクセスした際に使えるメニュー機能のこと。Bootstrapのコンポーネントではドロップダウンナビが...

HTMLを効率よく書く!Emmetの書き方・使い方まとめ

コードエディターにはHTML・CSSを効率良く編集する方法でも書いたように、コードの自動補完などの機能が備わっています。これらの機能を使うことで効率良くコードを記述することができる...

HTML・CSSを効率良く編集する方法

HTML・CSSをエディターで編集する方法 HTML・CSSファイルの開き方 コードエディターでHTMLやCSSを編集するために、まずはファイルを開く必要があります。ファイル...
CotEditorでHTMLファイルを開く

HTML、CSSファイルの正しい開き方

HTMLファイルやCSSファイルを編集するための一番簡単な方法は、パソコンに最初からインストールされているメモ帳やテキストエディットを使う方法です。 メモ帳でもHTMLを書いたり...
Bootstrap

Bootstrap3で画像スライダーを作る方法

Bootstrap3のコンポーネントにcarouselというものが用意されています。ここには画像を配置することができるので、画像スライダーとして使っている方も多いはず ただ、スラ...
Bootstrap

Bootstrap3のドロップダウンを多階層にする方法

CSSフレームワークとして最も人気の高いBootstrap。すでに多くの方が使っていると思います。Bootstrapを使っていて、ちょっとだけレイアウトや動きを変えたいということは...
Bootstrap

Bootstrap3のドロップダウンをマウスオーバーで開く方法

Webサイトのコーディングでレイアウトを作るのにすごく便利なBootstrap。実際の案件でも使用可能ならほぼ必ずといっていいほど使っています。 ただ、Bootstrapを使って...
bootstrap-less-codekit

BootstrapをLESSで使う方法

BootstrapをLESSで使う方法 LESSとは!? LESSとはCSSプリプロセッサーの1つで、似たようなものにSASSがあります。CSSプリプロセッサを一言で説明すると...

Bootstrap3でFormを簡単に作る方法

Bootstrap3を使ったフォームの作り方をまとめて紹介します。 フォームはWebにとって欠かせない要素の1つ。ブラウザ標準のスタイルがかかっているため、扱いづらい感じがします...

Bootstrap3 ツールチップとTooltip.jsの簡単な使い方

ツールチップはマウスオーバーした際にヘルプを表示したりするためのツール。自力で実装しようとすると面倒ですが、Bootstrap3には簡単に使えるツールチップコンポーネントが用意され...

Bootstrap3 アコーディオンとCollapseの簡単な使い方

Collapseはボタンやテキストリンクで開閉するコンテンツを作れる便利なコンポーネント。使いどころとしてはメニューの開閉やQ&Aなどのコンテンツの開閉などです。 パネル...

Bootstrap3 Tabとtab.jsの使い方

Webサイトに必ずある要素の1つがナビゲーションメニュー。ul>liタグで作ることが多いのですが、Bootstrap3を使えば、この構造のままでclassをつけるだけで簡単に...

Bootstrap3 スクロールスパイとScrollspy.jsの簡単な使い方

Bootstrap3のScrollSpyを使うと、スクロールに合わせてナビゲーションに動きを持たせたり、現在の位置を確認できるようになります。 この機能は主にランディングページ(...

Bootstrap3 モーダルとmodal.jsの簡単な使い方

Bootstrap3のモーダルウィンドウの使い方。 Bootstrap3ではクリックするとポップアップウィンドウが表示される、モーダルコンポーネントが搭載されています。メッセージ...

最新記事

超高品質!Drupal向けテンプレートまとめ 2017年最新版

Drupalは高度な技術を持っていなくても簡単に使えるのが特徴のCMS。現在も活発に活動が続けられ、海外では人気の高いCMSです。ここでは最新版のDrupal8に対応した高品質なテ...

Bootstrap3 ポップオーバーとPopover.jsの簡単な使い方

要素をクリックすることでヘルプメッセージなどを表示することができるポップオーバーコンポーネント。ツールチップとよく似てるので作るのは簡単ですが、Webアプリなどでは結構使えるコンテ...

Bootstrap3 Progress bars の使い方

進行状況を表示するのに使えるのがProgressバーコンポーネント。Webアプリやショップサイトで注文工程の進歩状況を表示する際に使うことができます。 Bootstrap3 Pr...

スマホ向けアプリアイコンのデザインに使えるフリー素材128個まとめ

アプリアイコンのデザインに使えるフリー素材を128個集めてみました。 アプリアイコンはGimpなどのフリーツールでも簡単に作れるのですが、フリー素材を使うことで効率良くアイコン作...

キラキラ光るエフェクトが美しい無料ベクター素材

キラキラ光る美しいエフェクトの無料ベクター素材を厳選して集めました。 こういったライトエフェクト系の素材はゴージャスなイメージを作る時によく使われる素材で、バナーやヘッダー画像は...

はてな人気記事