脱初心者！Sass記法の入門 | Web Design Trends
Sassというキーワードは知っていても、まだSassを使ってCSSを記述できていない方も多いのではないでしょうか。Sassは一昔前にブームが来て、今はあまりホットではないと思っている人が多いかもしれませんが、Web制作会社のほとんどがSassを使ってスタイルの記述を行っています。 一度導入して使い方を覚えてしまえば、もうCSSでの記述に戻れないくらい作業効率が改善されます。そこで、今回はSassをまだ導入していない人に向けて、Sassの概要、導入方法、メリット、特徴的な機能についてご紹介していきたいと思います。 Sassとは Sassとは、「Syntactically Awesome Stylesheets」の略称で、「構造的にイケてるスタイルシート」と意味です。その名の通り、SassはCSSをより構造的に整理して記述することができる、CSSの「メタ言語」です。 CSSの文法はとてもシンプ
すぐに使えるSCSS入門 | DevelopersIO
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。 Sass/Compass知ってるいるし がっつり使ってるよという方どれぐらいいますか？ 本日のお題目 そんな方にはちょっと物足りないかもしれませんが、 今回は大きく分けてこの5つについて紹介します。 SCSS/Compassを利用するための環境 Sass・SCSS 設定ファイル Compass SCSS/Compassの応用 1，Sass/SCSSって？ 1.1，Sassとは 簡単に言うと、 CSS3になってさらに覚えることの増えた CSSコーディングの手間を省くいてCSSを楽しくするツール。 Sass makes CSS fun again. SassはCSSをもう一度楽しくするCSSにコンパイルするためのメタ言語です。 1.2，SassとSCSSって？ ちなみにSassには2つの構文があり
Sass(SCSS)の基本機能|メリット・デメリットも紹介！ | Bigmac inc
仕事でHTMLコーディングする人の約7割が、Sass(SCSS)を使用しているという調査結果があるように、コーディングする上でSass(SCSS)は欠かせない便利なものとなってきています。今回はSass(SCSS)の基本情報からメリット・デメリットもふまえて紹介していこうと思います。 Sassとは？ まず、Sassを使ったことがない方に向けて、簡単にSassの使い方を説明します。Sassとは「Syntactically Awesome Stylesheets」の略で、訳すると「構造的にとても凄い(最高な・素晴らしい)スタイルシート」という意味になります。 SassにはSASS記法・SCSS記法という2種類の記法があり、元々はSASS記法が採用されていましたが、CSSとの互換性に乏しいなどの理由から、CSSとの互換性を高めたSCSS記法が作られました。SCSSはCSSと記法が近いため、CSS
「娘に情報が古いと指摘されます」 老舗サイト「とほほのWWW入門」の管理人ってどんな人？ | HRナビ by リクルート
90年代後半から2000年代にウェブ制作を経験した者なら『とほほのWWW入門』と聞いて、ピンと来ない人はいないだろう。同サイトは、HTMLやJavaScript、Ruby、Pythonなどの基礎知識が学べる、ウェブ制作初心者にとってはバイブルのような、とてもありがたい存在だ。サイトが開設されたのは1996年。国内でインターネットが普及し始めた初期からある老舗サイトで、お世話になった人も多いはずだ。 2016年10月を最後に更新がされていないようだが、それでも20年間コンテンツを出し続けるのは、かなり大変なことだったのではないか。同サイトの管理人・杜甫々（とほほ）さんは、いったいどのような人物なのか。サイトを開設したきっかけやインターネット初期の空気感などについて、話を聞いた。 「とほほのWWW入門」管理人・杜甫々さんとは？ ――今回は取材に応じていただき、ありがとうございます。杜甫々さんは
Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31
最新のSEO事情！schema.orgで構造化マークアップせよ！ - Qiita
#schema.orgとは schema.orgの仕様通りにHTMLにマークアップする事で、Google,Yahoo!,Microsoftなどの検索エンジンに正確な情報を収集してもらい、ユーザーに最適な検索結果を提供するというものです。 例えば本について書かれたHTMLがあったとします。その情報に対し「ここには本の題名が書いてあります」「ここには本の出版日が書いてあります」「ここには著者の名前が書いてあります」などの、HTMLでは伝えきることができない、より詳しい情報をクローラーに伝えることを目的としたものです #schema.orgのメリット ##1. 検索エンジンでリッチスニペットが表示される schema.orgではmicrodataという方式でマークアップすることで、クローラーがページの内容を解析しやすくなります。その結果、検索エンジンにリッチスニペットを表示することができます。
Googleは「お決まり」が嫌い
まず、このUS Patent Application（合衆国 特許申請）を見てください。 ⇒ Systems and methods for analyzing boilerplate つい最近、Googleが申請したばかりのパテント（特許）です。 何が書いてあるかというと、「boilerplate（ボイラープレート）」の取り扱いについてです。 boilerplateというのは、僕は初めて聞いた言葉ですが、もともとは活版印刷に使われた鋼板でできた「鋳型（いがた）」のことだそうです。 鋳型ですから、まったく同じものができあがりますよね。 ここから派生して、「お決まりのもの」、さらには「定型文」という意味でも使われるようになりました。 ITの世界でも使われる用語で、「定型書式」、「テンプレート」とを表すときに用いられます。 Googleのボイラープレートに話を戻します。 ウェブページにもボイラ
[CSS] marginとpaddingの使い分けに本気出してみた。が、borderもちゃんと考える。 - Qiita
表示は下記のとおりです。 この画像の場合のmargin、paddingは下記のとおりです。（borderも登場します） margin 背景色がグレーの部分 border 背景色が青の部分 padding 背景色がオレンジの部分 これをGoogle chromeの開発者ツールで確認すると以下のようになります。 背景色は margin 親のタグのbackground-colorになる(というよりかはmarginは透明の余白) border border用の色を決定できる padding エレメントに指定されたbackground-colorになる。 という感じになります。 そして、エレメントで保有したいサイズは、 width or height + padding + borderということになります。 ※余談 レガシーブラウザでは、paddingはheightとwidthに内包されるものとそ
![[CSS] marginとpaddingの使い分けに本気出してみた。が、borderもちゃんと考える。 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ca246cc03008119d352d25c7b02a72008f299c34/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGODM2NjklMkZwcm9maWxlLWltYWdlcyUyRjE0NzM3MDI4NDY_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MWI5ZDMxY2Q2N2ZmODA0NDZmYTQ3MGM4NjRhOWI1YWM%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D1a6cbfe8498ee5a71fe64d37cbb6ba8c%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQ1NTJTVEJTIwbWFyZ2luJUUzJTgxJUE4cGFkZGluZyVFMyU4MSVBRSVFNCVCRCVCRiVFMyU4MSU4NCVFNSU4OCU4NiVFMyU4MSU5MSVFMyU4MSVBQiVFNiU5QyVBQyVFNiVCMCU5NyVFNSU4NyVCQSVFMyU4MSU5NyVFMyU4MSVBNiVFMyU4MSVCRiVFMyU4MSU5RiVFMyU4MCU4MiVFMyU4MSU4QyVFMyU4MCU4MWJvcmRlciVFMyU4MiU4MiVFMyU4MSVBMSVFMyU4MiU4MyVFMyU4MiU5MyVFMyU4MSVBOCVFOCU4MCU4MyVFMyU4MSU4OCVFMyU4MiU4QiVFMyU4MCU4MiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1wYWQ9MCZzPThiYmM5MGY2NTAxY2UxZTc3YTJlYzI2YWE0NGU5ZDNk%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBIaXJha2F3YV9ZdXpvJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9MDMwZTQyMDU1NjI1NzdkMTg5OGZkMGQxMzI1YmM5YWU%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4g44OV44Ol44O844OB44Oj44O85qCq5byP5Lya56S-%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3D5d3eaad7065164e5557f98c092bc220f)
【9】HTML要素の インラインレベル・ブロックレベル について
【9】HTML要素の インラインレベル・ブロックレベル について 最終更新日：2018年02月14日 （初回投稿日：2015年09月15日） HTML4以前や XHTML1では、HTML要素をスタイルで分類して、インライン要素 とブロックレベル要素 に区別していました。 この分類方法がHTML5から廃止になり、カテゴリー による分類と コンテンツ・モデル（要素の中にどのカテゴリーの要素を入れてよいか）という規則が新しくできました。 HTML5 の カテゴリー、コンテンツ・モデル についてはこちらをご覧ください。 [37] HTML5要素の「カテゴリー」を見てみよう [38-1] 「コンテンツ・モデル」で要素のルールを見てみよう [38-2] 「コンテンツ・モデル」一覧 ...んですが、（ここからが本題w） メタデータ・コンテンツ以外のどの要素にも、インライン や ブロックなどのブラウザのデ
インライン要素とブロックレベル要素の違いと特徴
ホームページやブログを作っているとブロックレベル要素やインライン要素という言葉をよく耳にしますよね。 要素（h1やpなどの事）の多くはブロックレベル要素とインライン要素に分けられ、中にどの要素を入れられるか（h1やpなどの中に何を入れられるか）などの決まりがあります。 そしてブロックレベル要素とインライン要素には、それぞれの特徴や違いなどがあるんです。 このページではそれぞれの違いや特徴などを紹介していきたいと思います。 目次 ブロックレベル要素とインライン要素の特徴 ブロックレベル要素（縦に積まれるもの） インライン要素（横に並ぶ） 基本的なルールについて インライン要素ではできない事 ブロックレベルとインラインを入れ替える ブロックレベル要素とインライン要素の特徴 二つの特徴を簡単にいうと、ブロックレベル要素は「縦に積まれる」、インライン要素は「横に並ぶ」っていう所です。 例えば上の画
HTMLのcolspanとrowspanのどっちがどっちか覚える方法
わかります。ものすごくよくわかる。 htmlのcolspanとrowspan、どっちがどっちだかいつもわからなくなって間違える。 — akiyan (@akiyan) 2010年11月12日 ということで迷ったときに思い出す方法の提案を。 ちょっと長い話になるけど、こういうものはイメージで覚えるのが一番なので映像を思い浮かべながらいきましょう。 colspan で覚えると楽そうです。実際よく使うのも colspan だし。個人的には。 colspan の “col” は “column” =「コラム / カラム」の略ですね。 col. コル。コラム。新聞や雑誌の「コラム」もこれです。 もともと column とは円柱のことで、新聞（英字新聞を想像してください）の欄も縦長に区切られていることから column と呼ばれるようになったんだと思いますたぶん。 はいここで英字新聞を想像してください
Excel to HTMLが便利過ぎた！ブログで表（テーブル）を挿入するのなら一番簡単かも - 鈴木です。別館
本記事は移転しました。 約1秒後にリダイレクトします。 リダイレクトしない場合はここをクリックしてください。
レスポンシブ化するなら知っておきたいtable-cellの使い方 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
こんにちは、ECプロデュース部の岡本です。 今回は「要素を段落ちさせずに並べること」ができる便利なプロパティ「table-cell」について紹介します。 RWDグローバルナビの課題：段落ち サイトをレスポンシブする際、必ず問題になるのが「グローバルナビの扱い方」です。 floatやinline-blockで作成した場合、全ての要素で単位を「％」に指定しないと「段落ち」が発生します。 段落ちの例 しかし上の画像のように一部のコンテンツの横幅を固定化させたいケースもあります。 こんな時に使いたいのが、「table-cell」です。 tableレイアウトを実現する：table-cell table-cell実装例 「table-cell」は要素を「tdタグ」と同じにするプロパティで、displayにて設定します。 親要素に「display:table」を設定する必要がありますが、この２つだけでほ
すべてのページに"meta description"を入れる必要はあるのか、Googleが回答│SEOトレンド情報
SEOをOEMする専門企業 フリープラス > SEOトレンド情報 > “Meta description”の重複が起きるなら、入れないほうがマシ 今日の Google Webmaster Help の動画のテーマは”Meta description”です。 質問は「全てのページに Meta description を入れる必要はあるのかい？」です。 重複させるくらいなら・・・ この動画の中で、 Googleのスパムチームの Matt Cutts 氏はこう言っております。 「Meta descriptionが各ページ個別化していることはもちろんいいし、なんならMeta descriptionが重複しているよりもMeta descriptionが入っていないほうがマシだ。事実、僕（Matt Cutts 氏）のブログもMeta description入ってないしね。」 さて、それでは
お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久
今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO（入力フォーム最適化）をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル（項目名）」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を
SEOだけで満足できない人のためのmetaタグ情報まとめ (後編)
SEOだけで満足できない人のためのmetaタグ情報まとめ (前編) 「http-equiv編」 このエントリは上記のエントリの続きです。前回のエントリでは触れなかった、metaタグのname属性を持つものについてまとめたいと思います。metaタグの中で一番有名ともいえる、「meta name="keywords"」(キーワード)や「meta name="description"」(概要)もこちらに含まれます。 meta name (name属性)とは メタデータとはそもそも「文章の中身ではなく、HTML文章そのものについてのデータ」を記述するところです。前編のhttp-equivで出てきた「content-type」や「content-language」も「このHTMLの文字コードはUTF-8」だとか「日本語の文章である」と指定して、ユーザーエージェント*1に情報を与えているわけです。当然
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cookie Error
Learn web development | web.dev
HTML/CSSも吐き出す超お手軽な世界地図素材作成サービス「Pixel Map」
http://www.hp-stylelink.com/news/2013/10/20131001.php
