舞い散る桜の花びらアニメーション【HTML/CSS】
こんにちわ！最近花粉の気配を感じ始めましたね・・・。 なんだかんだでもう3月に入りましたが、もう少しで桜の季節です！ ということで、HTMLとCSSで桜の花びらが舞い散るアニメーションを作ってみました。 用意するもの ●桜の花びら画像(png) 桜の花びら画像を７枚( 7パターン)用意しました。 出来上がりがこちら See the Pen GRNYVxq by adatype (@adatype) on CodePen. 出来上がったものがこちらになります。 コードの内容については下記をご覧ください。 まず#sakura_blockの中に花びら画像たちをまとめる.sakura_parts_boxを作って、 中に先ほど用意した花びら画像たちを入れて、それぞれクラスを付けます。 用意した画像は7枚ですが、画面幅いっぱいに桜を降らようと配置したら中の画像が19枚になりました。枚数は降らせたい場所
『インクルーシブ HTML + CSS & JavaScript』をレビューしました - 水底の血
アクセシビリティなピンク本と緑本*1でお馴染みの、太田さん（@bakera）と伊原さん（@magi1125）のコンビによる新たなウェブ技術関連の訳書がまもなく世に送り出される運びになりますが、そのお手伝いをほんのちょっぴりしました、というお話です。要するに書籍の宣伝と言う類いのものです。 さて、訳書と言うことは当然原著が存在するわけですが、原著者は緑本と同じ、ヘイドン・ピカリング（@heydonworks）さんです。緑本の"あの"独特な感性は本書でも健在であります。ちなみに、原著のレビュワーとして、W3C HTML 5.1のエディターでもあるスティーブ・フォルクナー（@stevefaulkner）さんの名前が見えます。図らずも書籍で同じページに名前が載ることになりました。うふふ。 日本語版レビュワーは私を含めて4人いたりするのですが、私以外にはWebsite Usability Infoの
HTMLのみでアイコンを表示させる方法。時計・家・カメラなど - 生活情報オンライン
今回の記事では、次のようなアイコンを使う方法をご紹介します。 アイコンを自由に使えることが出来れば表現の幅が大きく広がることでしょう。上記アイコン以外にも沢山の種類のアイコンが使用できます。それらの方法をまとめてご紹介します。ですので、きっとご自分の好きなものも見つかると思いますよ。 アイコンを表示する方法 アイコンを表示する方法はいくつかあります。この記事では「HTMLのみを使用して表示する」方法を記載します。この方法では次の２ステップで済みますのでとても簡単です。 簡単２ステップ １．HTMLファイル先頭にリンクを書く ２．アイコンを表示したい場所にタグを書く それでは具体的な方法を記載していきます。 １．HTMLファイル先頭にリンクを書く まずはHTMLファイルの先頭に次のように記載します。 <link rel="stylesheet" href="https://maxcdn.bo
おじさんが若者たちにモテるためのモダンなHTML/CSSマークアップ
タイトルに含まれる語に関する補足 おじさん： 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。 PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。 ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。 セマンティックなコーディングは、開発者の課題理解度を図り、意
Ruby製の構文解析ツール、Nokogiriの使い方 with Xpath - プログラマでありたい
RubyでHTMLやXMLをパースする構文解析ツールの定番は、Nokogiriです。スクレイピングする際の必需品で、なくてはならないモジュールの１つです。ただ色々なことが出来る反面、どこから取りかかれば良いのか解り難い部分もあります。自習を兼ねて、Nokogiri概要と主要な機能を紹介してみます。 Nokogiriとは何か？ ReademeによるとNokogiriとは、「HTMLとXMLとSAXとXSLTとReaderのパーサー」で、特徴としては、XPathとCSS3セレクター経由で探索する機能を持つことのようです。他にもHTMLやXMLのビルダーの機能を持っていますが、HTMLとXMLのパーサー（構文解析器）と覚えておけばよいでしょう。 Nokogiriのクラス構造 Nokogiriは、なかなか巨大なライブラリです。10以上のモジュールと70以上のクラスで構成されていて、yardでダイア
Nokogiriによるスクレイピング(YahooFinance) - Qiita
require 'open-uri' require 'nokogiri' #スクレイピング先のURL url = 'http://finance.yahoo.com/q/cf?s=KO+Cash+Flow&annual'#米コカコーラ charset = nil html = open(url) do |f| charset = f.charset #文字種別を取得 f.read #htmlを読み込んで変数htmlに渡す end #htmlをパース(解析)してオブジェクトを作成 doc = Nokogiri::HTML.parse(html, nil, charset) #抽出したいデータノードを取り出す mainNode = doc.css("table#yfncsumtab") ##ループの行が長くなるので代入 trs = mainNode.css('tr > td > table
Searching a XML/HTML document - Nokogiri
Searching an HTML / XML Document¶ Basic Searching¶ Let's suppose you have the following document: [shows.xml] <root> <sitcoms> <sitcom> <name>Married with Children</name> <characters> <character>Al Bundy</character> <character>Bud Bundy</character> <character>Marcy Darcy</character> </characters> </sitcom> <sitcom> <name>Perfect Strangers</name> <characters> <character>Larry Appleton</character> <
【よく見るものを一覧で解説】HTTPステータスコードとは？コード番号別に詳しく解説 | ナイルのマーケティング相談室
HTTPステータスコードとは、ウェブサイトにアクセスしたとき、正常な画面ではない場合に表示される3桁の数字のことです。 ウェブサイトにアクセスしたときに「404」や「503」といった数字が表示された経験はないでしょうか。HTTPステータスコードはたくさんの種類があり、それぞれ意味する内容が異なります。 そこで本記事では、それぞれのステータスコードが持つ意味や対処法、HTTPステータスコードの確認方法を解説します。 HTTPステータスコードについて知ることで、アクセスしたウェブサイトに何が起きているのかを理解できるようになるので、ぜひご参考にしてください。 この記事のポイント HTTPステータスコードは、特定の HTTP リクエストが正常に完了したかどうかを示す3桁の数値で表されるもの 大まかに200番台の成功レスポンス、300番台のリダイレクト、400番台のクライアントエラー、500番台の
aside 要素 - セクション - HTML要素 - HTML5 タグリファレンス - HTML5.JP
4.3.5 aside 要素 カテゴリー: フロー・コンテント セクショニング・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: フロー・コンテントが期待される場所 コンテントモデル: フロー・コンテント 、ただし、子孫に main 要素がないこと。 コンテント属性: グローバル属性 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: complementary ロール (デフォルト - 指定不要), note, search, presentation 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース: HTMLElement を使う aside 要素は、その aside 要素の前後のコンテンツに
[HTML5]HTML5にmain要素が追加された…(現在HTML5のタグは109)
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 これまでのあらすじ はい、特にネタがあるわけでもないんですけどHTML5のCR(勧告候補)が先日更新されまして、めでたくHTML5にmain要素が追加されました。hgroupは実際に消えましたねー。 これまでの流れは HTML5のタグって現時点(2012年8月)でいくつあるの？ ― #HTML5のタグは百八つまであるぞ …？ ― – WEBCRE8.jp 【悲報】HTML5のタグが109個になってる…(またはdialog要素について)【今更】 – WEBCRE8.jp 【108厨歓喜】HTML5のタグ，108つに戻るってよ【らしい】 – WEBCRE8.jp といった感じです。108とか言いだしたのが運のつき…ｗ main要素とは 以下はmain要素の仕様。 The main ele
![[HTML5]HTML5にmain要素が追加された…(現在HTML5のタグは109)](https://cdn-ak-scissors.b.st-hatena.com/image/square/a94b46500d61f81e62919d49e871e51468602e1a/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F03%2Fhtml5-tag-109-01-150x150.png)
main 要素 - コンテンツのグループ化 - HTML要素 - HTML5 タグリファレンス - HTML5.JP
4.4.14 main 要素 カテゴリー: フロー・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: フロー・コンテントが期待される場所。ただし、祖先に article, aside, footer, header, nav 要素があってはならない。 コンテントモデル: フロー・コンテント コンテント属性: グローバル属性 text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: main ロール (デフォルト - 指定不要) または presentation 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース: HTMLElement を使う。 main 要素は、ドキュメントやアプリケーションの body
divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d
[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 HTML5入門シリーズ 折りしも東京では先日HTML5カンファレンスというイベントが開催され、webで飛び交う話題もそれについてのものがドンドン増えてきています。このブログでもたびたびHTML5のコーディングにおけるややこしい話題を取り扱っていますが、こういった需要はさらに増えていくのではないかなと思っています。 今回からたびたびHTML5入門と題しまして、HTML5を使ってweb制作をしていく上で避けては通れない基礎的な理解を深める為の文章を書いていきます。webcre8もHTML5は絶賛勉強中で、これはいち制作者としてHTML5によるコーディングをどうするべきかを考えた考察の覚書でもあります。間違いがあればガンガンツッコミをお願いします！知識のある人は単に「間違っている」という指
![[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a579b466a9d9646edbe9cc1cec01abca7601b9fc/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fhtml5-section-outline-150x150.png)
[45-2] meta要素の charset属性で文字コードを指定しよう
[45-2] meta要素の charset属性で文字コードを指定しよう 最終更新日：2017年12月08日 （初回投稿日：2012年08月30日） <meta>要素は内容が多いため 記事を数回に分けています。 [45-1] meta要素で基本情報を指定しよう <meta>要素のルールと、属性のルール [45-2] meta要素の charset属性で文字コードを指定しよう ←今日はココ charset属性で文字エンコードを指定します。 [45-3] meta要素の name属性でサイトの情報を指定しよう name属性でサイトの説明文、クローラーへの指示、ビューポートの指定などをします。 [45-4] meta要素の http-equiv属性で動作を指示しよう http-equiv属性でページのリダイレクトを指定できます。 [45-5] meta要素で OGPを設定しよう Facebook
![[45-2] meta要素の charset属性で文字コードを指定しよう](https://cdn-ak-scissors.b.st-hatena.com/image/square/592027f3e8ef20097cc905941f6f4f240992b1ad/height=288;version=1;width=512/https%3A%2F%2Fblog-imgs-45.fc2.com%2Fh%2Fo%2Fn%2Fhonttoni%2Ftsubu_icon2s.jpg)
レスポンシブデザインに便利なcss3の疑似クラスと疑似要素｜webproduct-lab
2015年4月21日からのモバイルフレンドリーに対応するために、多くの方がレスポンシブデザインを取り入れたかと思いますが、今回はその過程の中で特に便利な疑似クラス（要素全体を対象）と疑似要素（要素の一部を対象）をいくつかご紹介したいと思います。 今まで無理矢理クラス名を付けてcssで調整していた箇所もキレイに収まってタグもすっきりしますよ！ それと、Bingもモバイルフレンドリーを導入するみたいですね！ 個人的にですが最近、Bingが何か気になります。。 jp.techcrunch.com 疑似クラスとは？ まず、疑似クラスですが… 下記のような、タグは昔からあり馴染み深いかと思います。 a:link a:visited a:hover a:active この:linkの部分が疑似クラスで、aタグがlinkの場合の装飾を記述します。 例えば、下記のようなボックスを組んだ場合、一番右の余計な
CSS Lecture: CSS backgroundプロパティについてのまとめ
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[CSS]CSS の display:inline-block で並べた要素間の隙間を埋める方法｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
[CSS]float を利用せずに display:inline-block で要素を横並びにする方法の記事でも紹介していますが、display:inline-block で要素を横並びにした場合に発生する「要素間の隙間を埋める」方法の紹介です。 PX 単位で隙間を埋める 一番分かりやすいのが、隙間分だけネガティブマージンで隙間を埋める方法です。 <style> ul li { display:inline-block; /display:inline; /zoom:1; padding: 5px; margin:0 -5px } </style> <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> </ul> margin の値はデザインに合わせて補正します。 IE6 まで対応となると、IE用のハックが必要かもしれません。 要素のマークアップを変
![[CSS]CSS の display:inline-block で並べた要素間の隙間を埋める方法｜CSSプロパティ｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/242c2d0936349b9fa10897f18b3f3f14bd2e9d4c/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2012%2F12%2Ffloatanddisplayinlineblock.png)
CSSレイアウトを学ぶ
position さらに複雑なレイアウトをつくるには、position プロパティについて理解する必要がある。取り得る値はたくさんある。名前には意味がないので、覚えるのはなかなか難しい。１つずつ見ていこう。だけど、このページをブックマークしておくのが無難かもしれない。 static .static { position: static; } <div class="static"> static はデフォルト値だ。position: static;を設定した要素は、どんな方法でも位置を指定できない。 staticな要素は、位置指定無効な要素とも呼ばれている。また、それ以外の要素は位置指定有効な要素と呼ばれる。 </div> relative .relative1 { position: relative; } .relative2 { position: relative; top: -2
CSSで中央寄せ。全体、あるいはコンテンツだけ中央寄せする2つの方法。 - Qiita
これをすると、bodyの横幅が指定されて、そこが中央にくるように左右の幅を均一に保ちながら中央寄せをしてくれます。 全体を中央寄せする方法 全体を中央寄せする時は、bodyに指定します。 完成図 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="keywords"content="html,css,javascript"/> <script type="text/javascr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML・CSS 簡単リファレンス