今回はHTMLとCSSだけで要素の「表示」⇔「非表示」を切り替える方法を解説します。JavaScriptやjQueryは使わないので、AMP対応している場合にも利用できます。 この画像のようなイメージですね。隠しておくものは文章でも、画像でも、箇条書きでも何でもOKです。 表示⇔非表示を切り替える仕組み ひとまず、仕組みを解説しておきます。コードは後ほど載せるので、仕組みに興味のない方は読み飛ばして頂ければと思います。 inputタグに連動させて切り替え
HTMLとCSSだけ！要素の表示・非表示を切り替える方法
今回はHTMLとCSSだけで要素の「表示」⇔「非表示」を切り替える方法を解説します。JavaScriptやjQueryは使わないので、AMP対応している場合にも利用できます。 この画像のようなイメージですね。隠しておくものは文章でも、画像でも、箇条書きでも何でもOKです。 表示⇔非表示を切り替える仕組み ひとまず、仕組みを解説しておきます。コードは後ほど載せるので、仕組みに興味のない方は読み飛ばして頂ければと思います。 inputタグに連動させて切り替え
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
Tumblr をはじめよう！ / ブログをカスタマイズしよう
ブログの設定画面を開くには、ダッシュボードのサイドバーにある「Customize」メニューをクリックするか、設定画面の右上の「Customize your blog」というボタンをクリックします。 ダッシュボードのサイドバー Prefrences 画面 設定画面 設定項目は以下の内容に分かれており、上部のメニューから切り替えることができます。 Info タイトルや説明文などブログの基本的な情報を設定できます。 Theme ブログのデザインテーマを変更できます Appearance 背景やフォント、表示する項目など見た目の詳細を設定できます。 Pages ブログに追加のページ(内容は自由に編集可能)を追加する事ができます。 Services 外部サービスとの連携に関する設定ができます。 Community 他のユーザーとのコミュニケーションに関する設定ができます。 Advanced 言語やタ
トップページのWhat’s New表示には、Tumblrが最適！ ｜ しらさかブログ
わたくしウェブ制作の仕事をしておりまして、最近流行りのCMS(WordPress)とやらを使う案件が多いのですが、お仕事の中には、「別にCMS構築するほどじゃなくていいんだけど、トップページのWhat’s Newみたいなところくらいは更新したいな！」というご要望をいただくことも少なからずあります。 そんな時にオススメなのがTumblr！ TumblrでWhat’s New部分にあたる部分をブログスタイルで更新して、ウェブサイトのトップページにTumblr APIを使用して表示させる、というテクニックをご紹介いたします。 実装例は、弊社実績の以下のサイト。 JELLY JELLY CAFE / ノマドワーカーのためのカジュアルスペース ↑トップページの「BLOG」と書かれた部分です。 ソースは以下のとおり。 <ul id="blog"> <script type="text/javascri
プログラミング不要で、マウスオーバー時にポップアップ表示ができる超軽量CSSライブラリ「Hint.css」を使ってみた！ : うえぶはっく
今すぐ、自分のWebサイトやブログなどにポップアップ表示を導入できる超軽量なCSSライブラリ「Hint.css」のご紹介！ HTMLの好きな要素に、専用のクラス名を指定するだけで誰でもすぐに利用できるのが特徴で、メッセージやインフォメーション、ヒントなどを表示させるのに最適です。 そこで、スマホでの利用シーンも踏まえて、サンプル例と一緒にご紹介しようと思います！ 使い方！ 利用方法はシンプルで、GitHubからファイルをダウンロードするか、以下のCDN経由でCSSライブラリを取得します。 https://cdnjs.cloudflare.com/ajax/libs/hint.css/2.0.0/hint.min.css HTMLの骨組みはこんな感じになるでしょう。 // index.html <!doctype html> <html> <head> <meta charset="utf-
ペライチも複数webページもすばやく作り始められるやつ「Rin 4」作った - MEMOGRAPHIX
Rin 4 というのを作った。 Rin 4 - A lean, gulp-based HTML and SASS boilerplate by sanographixRin 4 は「ペライチのWebページをすばやく作り始められるboilerplate」である Rin3.0 をアップデートしたもの。 Rin は、僕が普段 web サイト制作時に使っているフレームワークというかBoilerplate的なやつです。CSS の汎用コンポーネントをできるだけ持たないフレームワークを目指していて（ペライチとかだと結局各サイトでデザインの要件が大きく異なる場合が多いため）、環境構築だけ gulp ですばやく行うことに特化してつくっている。 バージョン4の新機能Rin 4 では、複数ページが素早くつくれるようになった。今までペライチのサイトばかり作っていたんだけど、そうでなく複数ページ作るときも使えるよう
コピペで実装！CSS3でオシャレなデザインのサンプルコード47選
2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG https://liginc.co.jp/web/h
フォームのデザインを簡単に整える「iCheck」がとっても便利！ | WebChokoTips – ウェブチョコチップス
フォームのデザインって難しいですよね。でも、ユーザの動きを考えやすくて作りがいがあるかと思います。 しかも、デフォルトのスタイルだと全体のテイストと合わなかったりするので、実装に手間がかかってしまいます。 そこで今回紹介するプラグインは、「iCheck」というjQueryのプラグインです。スタイルの変更が面倒なチェックボックスとラジオボタンをいい感じに整えてくれるすぐれものです。 まずはDEMOを用意したのでご覧ください。 DEMO DEMOにあるフォームはサーバーへの送信はしていませんので、お気軽に試して見て下さい！ 使い方 HTMLは以下のような感じで、特別なマークアップは必要無いようです。
普通のHTMLで作成したページの指定箇所のみをブラウザ上から更新・修正できるようにするシンプルなCMS -Sitecake
普通のHTMLで作成したページをブラウザ上から簡単に更新・修正できるようにするオープンソースのCMSを紹介します。 HTMLはごく普通なものでOK、BootstrapやFoundationにも対応しています。 ブラウザ上で編集できる領域を指定できるのもいいですね。特定ページの特定箇所だけ簡単に更新できるようにするとかにも使えます。 Sitecake Sitecake -GitHub Sitecakeの特徴 Sitecakeのデモ Sitecakeの使い方 Sitecakeの特徴 プレーンなHTMLで動作 通常のHTMLファイルをブラウザ上から修正して、保存することができます。PHPやテンプレートなどの知識は不要です。 更新・修正は簡単 テキストを変更する時はクリックするだけで編集可能に、要素を追加・削除する時はドラッグ&ドロップでOK。 データベースは必要無し すべての変更はHTMLファイ
日本語フリーフォントの「ふい字」をWEBフォントで活用しよう！ | カスタムテンプレート
カスタムテンプレート fc2ブログ用の共有テンプレートを公開しています。自由にカスタマイズ可能です。内部seoはもちろん、読み手と書き手のユーザビリティに配慮しています。 ブログ内の文字を「ふい字」で表現できます。WEBフォント(Dropbox)として「ふい字」を読み込みます。当サイト作者が作成した次のテンプレートについてです。 eyecatcher、eyecatcher-2c、dt18_eyecatcher (ver1.0.0)customtemplate、customtemplate-3c (ver1.5.0～1.5.1)valid-seo-3c、valid-seo-2c (ver1.3.0) 概要 ふい氏が作成された「ふい字」をWEBフォント(Dropbox)で読み込む設定です。 CSSにコピペするだけです。 当サイトでふい字が設定されていない場合、愛猫チェリッシュでふい字のデモ表示
[コピペで使える！CSSだけでアニメーションつきハンバーガーメニューアイコンを作ろう] 他 海外のCSS情報 | WEBデザインすーぷ
アニメーションするCSSのみのハンバーガーメニューアイコン Animating CSS-Only Hamburger Menu Icons Hamburger menu icons have become a staple in many websites and web apps, and whether you like them or not, they are becoming a familiar and recognizable UI action button. Users are associating this icon with the showing and hiding of menus, and its compact, space-saving nature makes it a desirable style, particularly on smaller
![[コピペで使える！CSSだけでアニメーションつきハンバーガーメニューアイコンを作ろう] 他 海外のCSS情報 | WEBデザインすーぷ](https://cdn-ak-scissors.b.st-hatena.com/image/square/9f2d61e0129fb5d5d02ed528b0f0d8f03fb010de/height=288;version=1;width=512/http%3A%2F%2Fi0.wp.com%2Fweb.html-css-javascript.com%2Fwp-content%2Fuploads%2F2015%2F05%2Fi2.jpg%3Ffit%3D723%252C240)
webデザインを作り上げるのに参考にしたい フリーUIキット10種「10 Fresh And Free UI Kits For Designers」
TOP > Design > webデザインを作り上げるのに参考にしたい フリーUIキット10種「10 Fresh And Free UI Kits For Designers」 ハイクオリティなデザインを手がけるのには、いろいろなデザインリサーチや構成の企画立てなど、たくさんの工程が必要になってきます。しかし時にはコスト面や納期面で困難な状況に陥ることも。今回はそんな時に参考にしたい、フリーUIキット10種「10 Fresh And Free UI Kits For Designers」を紹介したいと思います。 Dribbble – Freebie PSD: Flat UI Kit by Marcel Akiyama デザイン形成時に役立ってくれるUIデザインが揃っており、欲しいデザインや目的に合わせて選ぶことができるようになっています。 詳しくは以下 Download Flat
jquery不要！CSS3アニメーションで入力フォームに動きをいれてみた | Neganin(ネガニン)
CSS3アニメーションを採用できる案件が増えてきたので、最近はjqueryを使用することが少なくなってきました。今回は入力フォームにjQueryを使わずにアニメーションを取り入れてみたいと思います。 フォームにデフォルトで付いているCSSのリセットも含めながら説明させて下さい。まずは、デモをご覧ください。 2. HTML 予めアニメーションさせたい「input」「textarea」「ラジオボタン」にclassを付けていきます。 <form> <div> <p><span class="ate1">必須</span>名前：</p> <p><input type="text" name="name" class="input_text" placeholder="名前"></p> </div> <div> <p><span class="ate1">必須</span>E-mail：</p> <
2015年版！漢字が使えて無料日本語フォント５０種
無料で利用することが出来る日本語フォントを ５０種類ご紹介します。 ゴシック系、丸ゴシック系の日本語フォントから 毛筆系や明朝系など、良質な日本語フォントを まとめてみました。 基本的には、個人・商用利用OKの日本語フリーフォントを ご紹介しておりますが、フォントをご利用の際は必ずライセンスや利用規約など それぞれのフォント製作者のページでご確認下さい。 ※追記：2016/1/5 「2016年版！無料の日本語フォント８０種」も是非合わせてお読み下さい。 ※追記：2016/1/20 「2016年版！欧文フリーフォント５０種」も是非合わせてお読み下さい。 ゴシック系の日本語フォント M+ FONTS ⇒ M＋ FONTS 【個人◯ 商用◯】 直線処理と柔らかな曲線の対比が特徴的なゴシック体フォントです。 さざなみゴシック ⇒ さざなみゴシック 【個人◯ 商用◯】 「東風フォント」の代替フォント
静的なHTMLサイトをモバイル対応サイトに変換する手順
[レベル: 初・中・上級] 英語版のGoogle公式ヘルプフォーラムでGoogle社員のZinebさんが、CMSへの移行が難しい静的なHTMLサイトをモバイルフレンドリーなサイトに変換する際に考慮すべきことをアドバイスしました。 参考になるので日本語に訳して紹介します。 なおリンク先ページは日本語のものも英語のものもあります。 静的サイトをモバイルフレンドリーに転換する方法 Chromeのデバイスエミュレーションモード（※このブログでの解説はこちら）を使って、異なるスクリーンサイズと解像度でウェブサイト（がどのように表示されるか）をテストする。 viewport（ビューポート）を設定する。このタグによって、ページのコンテンツをさまざまなスクリーンで拡大縮小できるようになる。ビューポートがないと、PCで見たときのようにコンテンツが表示されてしまう。 <font>タグや他のインラインHTML要
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
地図が簡単に楽しく作成できる！世界地図をはじめ、日本を含めた各国の地図にも対応 -Pixel Map Generator
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
cow2design.com
