HTML5でセマンティックなブログのアウトラインを考えたときに役立ったことのまとめ。
これらの新要素と、あるHTML5の書籍でサンプルをざっと見た時点では「ふむふむ、いままで<div>で囲んでいた部分を置き換えればいのね。」くらいに思っていたのですが、実際にマークアップしてみると…あれれ？と、主に<section>と<nav>要素でちょっとつまずいてしまいました。 <section>の使い方がいまいちわからない。 たぶん、そう思われた方は少なくないと思います。 セクションを日本語に訳すと、文書構造的には「節」「章」「欄」というのがしっくりくると思います。「第一節」とか、「ニュース欄」とか。で、そのセクションを表す要素（タグ）は上記のとおり<section>だけではありません。上の表の<section>から<nav>まで、すべてセクションを表す新要素です。他にも、従来からある<body><hn><address>もセクションを表す要素ですね。 これらのセクショニング要素の中で
MdN Design｜総合情報サイト
HTML5ではセクションという新しい要素が追加されている。これでマークアップをしていけば従来までhnタグを用いて行われてきたセクショニング【1-1】を、より明確にすることができる【1-2】。ちなみに、前者を暗黙的、後者を明示的セクショニングといい、セクショニングされたコンテンツ構造を「アウトライン（階層構造）」という。 ひとつ注意する点は、ここでいう構造とはレイアウト的な構造ではないということだ。レイアウト目的ならば従来のようにdivで指定していく必要がある。 【1-1】暗黙的セクション。セクションと明示はされていないがh1〜h6要素を使うことによって実際はセクションが設定されている 【1-2】明示的なHTML5のセクション。section要素を利用して項目の範囲を明示している。hn要素は各セクションの見出しを構成することになる body要素 メインコンテンツのセクション。いままでと変わら
フッターとかの区切り『｜』のサンプル1種
ふと、昔のサンプルを見て、今そんな組み方しないよ。とか思ってしまったので、最近もっぱらコレっていうのを書き書き。 コレに限らず、昔のエントリーを見てると、自分で無いな～使えねー！って突っ込みたくなるエントリーが多いっす・・・うぅ。 念じたら全部最近の書き方になおらないかな。 ・・・ 残念ながらなおらないと思うので、昔のエントリーを見る場合は、ちょっと気を付けたって下さい。 何気に大掛かりな計画は有るけれど、計画がでか過ぎて中々どうにもこうにも。 というかブログ書いてる暇有るなら、「お前アレやれよアレ。」ってお怒りの声が聞こえてきそうなので、アレに専念する為にまた大人しくしてるっぽいです。 最近フッターで区切りが有る場合は、:first-child疑似クラスを使って対応するケースが殆どです。 実際のサンプルも用意しました。 サンプルサイトを見る XHTMLはこんな感じ。 <div id="f
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
clearfix(クリアフィックス)の使い方｜CSS | オレのWEBPAD
float(フロート)を使った場合、親要素が領域をなくして潰れてしまいます。それを回避するためにはfloatを指定した要素の後にclear:bothをかける必要があります。 しかしデザイン上、そううまくかけれるとは限りません。そこで頼りになるのがclearfixと言われるハック方法です。 clearfix以外でフロート解除をする方法はこちら clearfix(クリアフィックス)の記述 clearfixはCSSに記述して、クラス名に指定して適応させます。 clearfix(クリアフィックス)の記述 .clearfix:after{ content: "."; display: block; height: 0; font-size:0; clear: both; visibility:hidden; } .clearfix{ display: inline-block; } /* Hides
floatで横並びさせた要素の最後のマージンを消す方法 | FOOTMARK
下記イメージのように、親要素に合わせて写真の一覧を作りたい場合などあると思います。 これを解決する方法はいろいろあるとは思いますが、ここではcssのみで実装する方法を説明します。 説明 上記イメージを実装しようと思うと下記のようなコードになります。 html <div class="photolist"> <ul> <li>photo</li> <li>photo</li> <li>photo</li> <li>photo</li> </ul> </div> css .photolist{ width: 490px; } .photolist ul{ margin: 0 -10px 0 0; overflow: hidden; zoom: 1; } .photolist ul li{ float: left; margin: 0 10px 10px 0; width: 115px;
floatを使用した横並び表示のマージンを調整する | FSFIELD Labs
CSS floatを使用した横並び要素のマージンを調整する フロートを使用して横並び表示をさせるときに、要素にマージンがついていると折り返すときに邪魔です。こういう時は最初か最後だけclassを追加したり、clas 名を変更したらいいのですが、実はそれをもっと簡単に解除する方法があります。 htmlの記述 上記の画像をソースにしてみると、 CSSの記述 div{ width: 320px; } div ul { width: 330px; margin-right: -10px; overflow: hidden; height: 100%; } div ul li { float: left; margin-right: 10px; } 横並びさせている要素(li)を囲っている要素(ul)にマージンを含んだ幅を設定し、飛び出た部分をmargin-rightで削除しています。 "float
JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]
代表中山陽平 ブログ「苦手意識を無くせばWeb活用はうまくいく」弊社では「がんばる中小企業」のWeb活用をサポートしています。今の時代、第3者である、制作会社や代理店におまかせでは勝てません。同じような商品・サービスが溢れる中、選んでもらうためのコンセプトを立て、それを実現するためにネットもリアルも総動員しながら戦う必要があります。 みなさんが世の中に・自社の従業員に実現したい幸せや提供価値を、しっかりと実現していくためには、みなさん自身が主役になり、私達のような専門会社が側面支援するのがベストです。 このブログでは御社が中心となってウェブ活用できるヒントを配信しています。お悩みの方はお気軽に問い合わせフォームからご相談ください。 最新の記事一覧
![JavaScriptで読み込むCSSファイルをまるっと[7korobi8oki.com]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e43158a9b02ff4438d55128491865b833395bd4d/height=288;version=1;width=512/https%3A%2F%2Froundup-inc.co.jp%2Fwp-content%2Fuploads%2F2019%2F09%2F9106fa4d7b0fdf2534aa97dea102e186.png)
復習にぜひ！WebparkのCSS3に関する記事のまとめ
このブログではCSS3に関する記事がなかなか人気です。個人的にも力を入れているところですのでうれしい限りです。そんな記事をもっと知ってもらいたいということでまとめてみました。単なるまとめですが、新しい発見などあればうれしいです。 CSS3のはじめ まずは基本的な内容から。 CSS3について知っておきたいことのまとめ CSSの構造やベンダープレフィックスなど基本的な内容を幅広く載せています。CSS3は初めてという方はこれから見ていただければと思います。 保存版！CSS3セレクタの説明書 CSS3はセレクタとプロパティに分かれます。セレクタはこれで網羅できていると思います。 CSS3プロパティの勉強になるジェネレータ16個 プロパティは全部説明しきれないので、習うより慣れろということでジェネレータを使って慣れるのもいいかと思います。 CSS3プロパティの説明 数は少ないですが間違いやすいところ
いまさら聞けないCSS font-familyのまとめ
CSSのfont-familyについて調べてみました。そのうちWebフォントが主流になる気がしますがそれまでのまとめということで。 認識誤りがありましたらどこかでつぶやいてください。 １．font-familyとは？ 通常のフォントや太字、イタリック体、斜体など、デザインを統一した複数のフォントをまとめたものを「フォントファミリー」といいます。 「Arial」「Vernada」「ヒラギノ角ゴPro W3」「ＭＳ Ｐゴシック」などがフォントファミリー名です。 このフォントファミリー名を指定するためのプロパティが「font-family」です。 サンプル body { font-family: Verdana,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
サイト内検索で見つからないコンテンツを発見する方法
サイト内のコンテンツを検索できる「サイト内検索」機能。アクセス解析ツールにちょっとした設定を追加すれば、ユーザーがどんなキーワードでサイト内を検索しているか、計測できます。サイト内検索のキーワードを調べることで、ユーザーの情報ニーズが分かり、コンテンツの制作や改善の参考になります。 ただし、一般的なアクセス解析ツールで分かるのは、キーワードごとの検索回数のみ。適切なコンテンツが表示されたのか、ユーザーが探していた情報は見つかったのか、などの利用状況までは分かりません。検索キーワードのリストだけを眺めても「なるほど」で終わってしまい、改善のアクションにはなかなかつながらないものです。 そこで今回は、「検索結果がゼロ件だった」というゴールを設定することで、確実にサイトの改善につなげる方法を紹介します。 知るべきことを知る 知りたい訪問者の行動を図解しつつ、訪問者が「サイト内検索」を実行した後に
第1回 レポート分析のプロトタイピングで意思決定フローを作る
Webのアクセス解析は特殊なのか？ Webサイトの分析では、ページビューやユーザー数、訪問回数、広告のビューやクリック数、売上などの指標を中心とした効果測定が一般的ですが、このような指標は経営的なコンテクストで理解するのが難しく、「なるほど」で終わってしまい、なかなか改善に結びつかないものです。「Webは制約の多い特殊なメディアなので、Webならではの指標のみを見ていれば良い」のでしょうか？ 実は、上記のようなアクセス解析で一般的な指標は技術的に取得しやすいという理由で普及しただけであり、厳選された万能の指標というわけではありません。事業やサイトによっては、一般的であっても見ないほうが良い指標もあります。見るとしても、クロス集計やセグメントなどの絞り込みが必要です。必要に応じて、事業の特性を加味したオリジナルの計算式や指標も必要になります。経営判断の参考にするためには、事業の業績を網羅的に
ネットショップデザインの参考になるサイトの紹介 | ネットショップニュースなう！
ネットショップ製作にあたり、何が大変かと言われると、やはり「ショップサイトのデザイン」と答える方も多いのではないでしょうか。 デザイン自体を外注に出している場合もあるかと思われますが、それでもやはり基本的なコンセプトは販売者がしっかりと決めておきたいところ。 と言う訳で、今回は優れたネットショップデザインを紹介しているサイトを紹介･･･と言う書き方をするとややこしいですが、要するに 「デザインの参考になるサイトを集めているところ」を紹介しますので、是非そちらを見て参考にしてみてください。 ウェブコレ 通販サイト集（ウェブコレ） 通販サイトだけでなく、様々なジャンルのサイトデザインを取り扱っています。ネットショップデザインだけでなく、他業種のデザインなども参考にできるかもしれませんね。 オンラインショップ WEBデザインのリンク集（イケサイ） こちらも様々なジャンルの優れたサイトデザインを見
コンテンツマーケティング実践ガイド（前編） ―― 目標・計画・チーム・アイデア・制作 | Moz - SEOとインバウンドマーケティングの実践情報
コンテンツマーケティングが熱い。白熱している。SEOやデジタルマーケティングのオピニオンリーダーたちは、次に来るのはコンテンツマーケティングだと断言している。ランドでさえ、その重要性を喧伝しているくらいだ。 コンテンツマーケティングの戦略は理にかなっている。潜在的顧客に対して、製品に関するメッセージを押し付けるのではなく、相手が関心を持ちそうなコンテンツを公開することで引き付けるのだ。そういうやり方からは、検索順位、トラフィック、リードなどさまざまな恩恵が得られる。 したがって、議論の的はもはや、「コンテンツマーケティングを行うべきか」あるいは「なぜ行うべきか」などということではない。「どうやってコンテンツマーケティングを進めればいいのか？」を考える段階だ。ブランドはどうやって実際にパブリッシャとなり、優れたコンテンツを作り、トラフィックを集め、コンバージョンを生み出すのか？ さて、もし君
AjaxでWordPressのコンテンツを遷移せず表示させる - Show-web
WordPressのコンテンツをtwitterやgoogle画像検索のようにあらかじめ一定数のコンテンツを表示させておき「もっと見る」リンクをクリックで画面遷移無くコンテンツを出力させたいと思います。 INDEX 仕様・デモ WordPressでAjaxを使う /wp-admin/admin-ajax.phpを使う /wp-admin/admin-ajax.phpを使ったデモ 表示用の固定ページ作成 functions.php周り JavaScript登録 全投稿数を取得しクッキーに保存させる 「もっと見る」クリック時のAjax処理登録 課題等 参考サイト 仕様・デモ いくつか課題はありますが、とりあえずの仕様としては以下の通り。 投稿のタイトル及びリンクをあらかじめ一定数表示（今回は10件） 「もっと見る」をクリックする度にAjaxでコンテンツを取得し10件ずつ追加 固定ページ「Ajax
Googleアナリティクスでスマホユーザーが表示したWebデザインを計測する方法｜コラム アユダンテ株式会社
レスポンシブWebデザインは、URLとしては一つですので、CSSを出し分けた違いが、解析データには現れません。この課題を解決した興味深い事例が、NRIネットコムのサイトの事例紹介のページで公開されています。 レスポンシブWebデザイン x Googleアナリティクスカスタマイズ http://nri-net.com/cases/details/googleanalytics_custom1.html Googleアナリティクスのカスタム変数の機能を使い、スマートフォン、タブレット、PC画面の、それぞれのセグメントごとのパフォーマンスの違いをレポート上で確認できるように設定しています。CSSを出し分けると同時に、カスタム変数も切り替えるように設定されています。 今週、アクセス解析イニシアチブのメルマガコラムで紹介された”レスポンシブWebデザインをGoogleアナリティクスで計測する方法”
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
