Web制作者なら押さえておきたい「HTML5」「SEO」「SMO」に関する公式ドキュメントまとめ8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近よく、無料動画のオンライン学習サイト「schoo」さんで授業させていただく機会があるのですが、先月のHTML5の授業はおかげさまでものすごく視聴していただいたようです。ありがとうございます。 具体的な数字はよくわからないのですが、なんかこう、とにかくものすごく視聴していただいたようです。 そのHTML5の授業を行う際に、改めてWeb上で資料を集めまくったのですが、HTMLとかSEOの情報は誤解も多いので、やはり一番信頼できるのはW3CとかGoogleとかの公式文書だと思うんですね。 そんなわけで、今回はHTML5、SEO関連で信頼性の高いであろう公式文書をまとめてみました。ご覧くだされ。 もくじ HTML5関連 HTML5 | W3C HTML Living Standard | WHATWG H
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
CSSで要素を横並びにする方法まとめ | HALAWATA.NET
CSSで要素を横並びにする方法をまとめてみました。 それぞれの違いがわかるように基本となるコードを用意します。 div要素3つとそれを囲むdiv要素1つです。3つのボックスには高さと横幅を80px、マージン、パディングともに10pxを指定します。 <div class="boxContainer"> <div class="box">BOX1</div> <div class="box">BOX2</div> <div class="box">BOX3</div> </div> float – 方法1 .box { float: left; } .boxContainer { overflow: hidden; } /* clearfix */ .boxContainer:before, .boxContainer:after { content: ""; display: table;
[CSS] スマホ対応は超重要! 私が最低限やっている6つのこと | ヨッセンス
こんにちは! ヨス（プロフィールはこちら）です。 今現在、Google検索では「スマホ対応」がされているかどうかは超重要になっています。 具体的にいうと、PCの検索順位はスマホでの検索順位が適応されているのです！ 今回は、ブログのスマホ対応でのポイントをくわしく解説します。 スマホ対応で困った6つのこと 今回は私がスマホ対応のために最低限やっている6つを紹介するのですが、分かりやすいように「問題点」を見出しにして紹介しますね。 スマホで見たら画像がはみ出す?! まずはこちらの比較画像をご覧ください。 画像サイズ（左: 変更前・右: 変更後） スマホで見た時に、上画像の左側のような画像を見たことありませんか? これは画像サイズがパソコンのままになっているんですね。大きいのではみ出しています。 これをスマホで見た時は自動で上画像の右側のように縮小してほしいんです。 でも大丈夫! CSSの<im
![[CSS] スマホ対応は超重要! 私が最低限やっている6つのこと | ヨッセンス](https://cdn-ak-scissors.b.st-hatena.com/image/square/f65ab4b0dcf3e460e3895ac786ca89120feaa297/height=288;version=1;width=512/https%3A%2F%2Fyossense.com%2Fwp-content%2Fuploads%2Fcss-for-smartphone-300.jpg)
CSSで2カラムを作ってみる - kojika17
CSSで2カラムといっても、その作成方法は様々です。 多くのパターンを理解することは、CSSに柔軟性を持たせることに、つながります。 1. floatを利用する 基本的な方法です。 子にfloatを利用すると、灰色の背景を敷いている親の高さが算出できなくなるため、背景色が出なくなったり、レイアウトが崩れたりします。 これらの問題を解決するには、clearfix か overflowを利用する必要があります。 .parent { overflow: hidden; } .child1 { float: left; width: 240px; } .child2 { float: right; width: 128px; } 2. floatとmarginを一定方向にかける 片方にfloat、片方はfloatをかけた方向に隣の要素の横幅以上のmarginをとる方法です。 floatのかかってい
レスポンシブなウェブデザインをする際に役立ちそうなこと（主にスマホ対応）のまとめ
レスポンシブにデザインしたサイトを作った際に役立ったこと（主にスマホ対応）を備忘録的にまとめてみます。いろんな方が同じような内容をまとめていますし、基本的なことも多いですがお役に立てばうれしいです。 メディアクエリの指定方法 小さいディスプレイから指定する場合と、大きいディスプレイから指定する場合があります。どちらにせよ、PC用、タブレット用、スマホ用と分けることが多いようです。まずは大きいディスプレイから指定する方法です。 /* デフォルト：1024px以上用（PC用）の記述 */ @media screen and (max-width: 1023px) { /* 1023px以下用（タブレット用）の記述 */ } @media screen and (max-width: 767px) { /* 767px以下用（タブレット／スマートフォン用）の記述 */ } @media scre
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
レイアウト作りを簡単にしてくれるCSSグリッドシステム
CSS でのレイアウト、段組み作りがとっても簡単にできる、CSS グリッドシステムをご紹介。既に使っている人もたくさんいるとは思いますが、未体験の人はぜひ試してみてくださいね！ Web デザインに欠かせない、CSS でのレイアウト作り。コンテナ作って、ここにラッパー作って、メインが 600px で padding が 20px だから、サイドバーが、えーと … なんてことになりがちです。そんな面倒な作業がイヤだなーという人におすすめなのが、CSSグリッドシステム。全ての Web デザインに使える訳ではありませんが、結構重宝します。すでに使っている人もたくさんいると思いますが、こんな方法もあるんだよーということでご紹介します。 1. CSSグリッドシステムとは？ CSS グリッドシステムというのは、レイアウトを均等に分けて、マス目上に考えるレイアウト。何が便利かっていうと、この段は4等分にし
Useful CSS Text Effects
2014年8月22日 CSS モバイルファーストの概念が広まり、コンテンツ主体の「読ませる」サイトが増えてきた昨今。テキスト周りをより便利に、より素敵に表示できるようなCSSをいくつか集めました。ユーザビリティの向上も図れるようなものもあるので要チェック！基本的なテクニックが中心なので、初心者さん〜中級者さんの参考になればと思います。 ↑私が10年以上利用している会計ソフト！ テキスト周りで使えるCSSの小技 目次 テキストを選択する時の色を変更 蛍光ペンで線を引いたような効果 長いテキストを「…」で省略する 番号リストの表現を変更 リンクの種類でアイコン変える 言語によってスタイルを変更 テキストリンクのエフェクト プリント時はURLを表示 長いURLを途中で折返す 途中で折り返さず、次の行に 先頭の文字を大きく 先頭を一文字分あける グラデーションテキスト ブラウザーは特記していなけれ
Coveloping
box-shadowでふわりとした影をつくるCSSのジェネレーター、レスポンシブのチェック、アスペクト比の計算機、CSS/JSの軽量化など、たくさんの便利な時短ツールがありますが、それらの便利なツールを一つの場所にまとめたCovelopingを紹介します。 FacebookのOPGチェックやGoogle Mapsの地図生成ツールもあり、新しいプロジェクトを始める時にも役立つものが揃っています。 Coveloping 便利ツールは現在23種類、アスペクト比の計算や一つのカラーに黒と白を加えたバリエーションを生成したり、box-shadowでふわりとした影をつけたり、jQueryのアニメーションのエフェクトなどがあります。 これからもどんどん増えていくそうです。 その中から、いくつか紹介します。
[CSS]半透明のパネルを使って、画像にキャプションをかっこよく表示する12種類のスタイルシート -InContent
InContentの使い方 実装はとても簡単です。 Step 1: 外部ファイル 当スタイルシートをhead内に配置します。 <head> ... <link rel="stylesheet" href="css/incontent.css" type="text/css" /> </head> Step 2: HTML 画像のimg要素とキャプションのspan要素をdivで包みます。 <div class="pic"> <img src="img/01.jpg" class="pic-image" alt="Pic"/> <span class="pic-caption bottom-to-top"> <h1 class="pic-title">Pic Title</h1> <p>Some description or text.</p> </span> </div> 用意されているcl
[CSS]スクリプト無しでこんなにかっこいいスライダーが実装できるとは！ -radio click through
画像が右からスライドし、それに続きコンテンツを配置した半透明のパネルが追いかけるようにスライドするコンテンツスライダーを紹介します。 実装はHTML/CSSで、スクリプトは無しです。 radio click through スライダーの動作の仕組みはラジオボタンで、チェックが入ったコンテンツを表示します。 実装はこんな感じ。 HTML 各パネルはリスト要素で、ラジオボタンとラベル、コンテンツがセットになっています。 <div id="gal"> <nav class="galnav"> <ul> <li> <input type="radio" name="btn" value="one" checked="checked"/> <label for="btn"></label> <figure> <img src="image.jpg"/> <figcaption> <h4>見出し</h
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
CSSだけで作るamazon風な縦型メガメニュー
先日、「CSSだけで作る動きのあるドロップダウンメニュー」という記事のコメント内で、amazonのようなメガメニューをCSSだけで作れないのかというコメントいただきましたので作ってみました。 CSSだけですのでメニューの現れ方など若干違います。box-shadowとborder-radiusはIE8以下で、矢印を作るための擬似要素はIE7以下で非対応ですが、メニューとしての機能は果たせます。 では解説していきます。 HTML まずはHTMLから説明します。長いのでメニュー1つ分のみ載せます。コード全体はサンプルの下に載せていますのでご覧ください。 <div id="menu-tittle">メニュー</div> <ul id="sample"> <li> <a href="#">メインカテゴリー1</a> <ul> <h3>メインカテゴリー1</h3> <li><a href="#">サブ
Webデザイン作成に必須のツール＆効率化できるサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デザインを行う上では、ツールを使うのが必須です。有名なものだとPhotoshopやIllustratorがありますが、「まずは無料で気軽にWebデザインをしてみたい」という人もいますよね。 そこで今回は、Webデザインに使える無料のツールやWebデザインを効率化できるサイトをまとめて紹介します。 今回紹介する無料のWebデザインツール・ソフト ワイヤーフレーム・モックアップ・プロトタイプ作成ツール グラフィックデザイン作成ツール（写真加工・イラスト作成） テキストエディタ（HTML・CSSのコーディング） 配色選びに使える無料オンラインサービス Webサイトが制作できるオンラインサービス （編集部注：この記事は2013年08月29日に公開された記事を再編集したものです。） ワイヤーフレーム・モックアップ・プロトタイプ作成ツール ※ワイヤーフレーム・モックアップ・プロトタイプとは？ ワイヤー
ただの地下鉄マップだと思った？ ブー、100％コードで書かれている地下鉄マップでしたー
ただの地下鉄マップだと思った？ ブー、100％コードで書かれている地下鉄マップでしたー2013.05.24 19:00 そうこ いや、上の画像は画像なんですけどね。 ただのロンドン地下鉄マップだと思うでしょ、なんの変哲もない。この上の画像はそうですよ、ただのマップの画像です。が、この画像の元の地下鉄マップは画じゃないんです。HTML/ CSS/ JavaScriptを駆使してコードで描かれた地下鉄マップなのです。聞くより見るが早いですね、ネタ元のこのページを見れば、なるほど合点がいくでしょう。 コード地下鉄マップを制作したのは、ウェブ開発者のジョン・ガランティーニ（John Galantini）さん。地図上にあるライン、アイコン、シンボル、その全てをHTMLとCSSを使って描いたのです。制作にかかった時間は120時間、5週間以上もコードを書く日々が続きました。 ついこの間まで｢CSS使うと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
so-network.biz
clearfixの使い方 | CSS Lecture
syboos.jp