サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
こんにちわ！最近花粉の気配を感じ始めましたね・・・。 なんだかんだでもう3月に入りましたが、もう少しで桜の季節です！ ということで、HTMLとCSSで桜の花びらが舞い散るアニメーションを作ってみました。 用意するもの ●桜の花びら画像(png) 桜の花びら画像を７枚( 7パターン)用意しました。 出来上がりがこちら See the Pen GRNYVxq by adatype (@adatype) on CodePen. 出来上がったものがこちらになります。 コードの内容については下記をご覧ください。 まず#sakura_blockの中に花びら画像たちをまとめる.sakura_parts_boxを作って、 中に先ほど用意した花びら画像たちを入れて、それぞれクラスを付けます。 用意した画像は7枚ですが、画面幅いっぱいに桜を降らようと配置したら中の画像が19枚になりました。枚数は降らせたい場所
アクセシビリティなピンク本と緑本*1でお馴染みの、太田さん（@bakera）と伊原さん（@magi1125）のコンビによる新たなウェブ技術関連の訳書がまもなく世に送り出される運びになりますが、そのお手伝いをほんのちょっぴりしました、というお話です。要するに書籍の宣伝と言う類いのものです。 さて、訳書と言うことは当然原著が存在するわけですが、原著者は緑本と同じ、ヘイドン・ピカリング（@heydonworks）さんです。緑本の"あの"独特な感性は本書でも健在であります。ちなみに、原著のレビュワーとして、W3CHTML 5.1のエディターでもあるスティーブ・フォルクナー（@stevefaulkner）さんの名前が見えます。図らずも書籍で同じページに名前が載ることになりました。うふふ。 日本語版レビュワーは私を含めて4人いたりするのですが、私以外にはWebsiteUsability Infoの
今回の記事では、次のようなアイコンを使う方法をご紹介します。 アイコンを自由に使えることが出来れば表現の幅が大きく広がることでしょう。上記アイコン以外にも沢山の種類のアイコンが使用できます。それらの方法をまとめてご紹介します。ですので、きっとご自分の好きなものも見つかると思いますよ。 アイコンを表示する方法 アイコンを表示する方法はいくつかあります。この記事では「HTMLのみを使用して表示する」方法を記載します。この方法では次の２ステップで済みますのでとても簡単です。 簡単２ステップ １．HTMLファイル先頭にリンクを書く ２．アイコンを表示したい場所にタグを書く それでは具体的な方法を記載していきます。 １．HTMLファイル先頭にリンクを書く まずはHTMLファイルの先頭に次のように記載します。 <link rel="stylesheet" href="https://maxcdn.bo
タイトルに含まれる語に関する補足 おじさん： 筆者の便宜上、30歳前後のフロントエンドエンジニア、マークアップエンジニア等を指す。性別は問わない。 なぜ「モテ」なければいけないのか 「モテる」とは、最先端の流行を知り取捨選択することで、自由意志を謳歌することで実現する。PHPとjQueryの時代は廃れ始め、AngularやReactに代表されるUIフレームワーク、ES2015やTypeScriptを流暢に扱えることがフロントエンドの責務となり、HTMLやCSSも、EJSやPug・SassやPostCSSなどのトランスパイル言語を介すことがほぼ常識になってきた（と思う）。 ところが、HTMLやCSSを何の言語で書くか以前に、中身をどうするべきかはあまり議論されていないので、「モテる」ための方法をいくつかかいつまんでまとめてみた。 セマンティックなコーディングは、開発者の課題理解度を図り、意
RubyでHTMLやXMLをパースする構文解析ツールの定番は、Nokogiriです。スクレイピングする際の必需品で、なくてはならないモジュールの１つです。ただ色々なことが出来る反面、どこから取りかかれば良いのか解り難い部分もあります。自習を兼ねて、Nokogiri概要と主要な機能を紹介してみます。 Nokogiriとは何か？ ReademeによるとNokogiriとは、「HTMLとXMLとSAXとXSLTとReaderのパーサー」で、特徴としては、XPathとCSS3セレクター経由で探索する機能を持つことのようです。他にもHTMLやXMLのビルダーの機能を持っていますが、HTMLとXMLのパーサー（構文解析器）と覚えておけばよいでしょう。 Nokogiriのクラス構造 Nokogiriは、なかなか巨大なライブラリです。10以上のモジュールと70以上のクラスで構成されていて、yardでダイア
require 'open-uri' require 'nokogiri' #スクレイピング先のURL url = 'http://finance.yahoo.com/q/cf?s=KO+Cash+Flow&annual'#米コカコーラ charset = nilhtml = 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 > ta
Searching anHTML / XML Document¶ Basic Searching¶ Let's suppose you have the following document: [shows.xml] <root> <sitcoms> <sitcom> <name>Married with Children</name> <characters> <character>AlBundy</character> <character>BudBundy</character> <character>Marcy Darcy</character> </characters> </sitcom> <sitcom> <name>Perfect Strangers</name> <characters> <character>LarryAppleton</character> <
HTTPステータスコードとは、ウェブサイトにアクセスしたとき、正常な画面ではない場合に表示される3桁の数字のことです。 ウェブサイトにアクセスしたときに「404」や「503」といった数字が表示された経験はないでしょうか。HTTPステータスコードはたくさんの種類があり、それぞれ意味する内容が異なります。 そこで本記事では、それぞれのステータスコードが持つ意味や対処法、HTTPステータスコードの確認方法を解説します。 HTTPステータスコードについて知ることで、アクセスしたウェブサイトに何が起きているのかを理解できるようになるので、ぜひご参考にしてください。 この記事のポイント HTTPステータスコードは、特定の HTTP リクエストが正常に完了したかどうかを示す3桁の数値で表されるもの 大まかに200番台の成功レスポンス、300番台のリダイレクト、400番台のクライアントエラー、500番台の
4.3.5 aside 要素 カテゴリー: フロー・コンテント セクショニング・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: フロー・コンテントが期待される場所 コンテントモデル: フロー・コンテント 、ただし、子孫に main 要素がないこと。 コンテント属性: グローバル属性text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: complementary ロール (デフォルト - 指定不要),note, search, presentation 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース:HTMLElement を使う aside 要素は、その aside 要素の前後のコンテンツに
調べる。 備忘録として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)](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fa94b46500d61f81e62919d49e871e51468602e1a%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttp%253A%252F%252Fwebcre8.jp%252Fwordpress%252Fwp-content%252Fuploads%252F2013%252F03%252Fhtml5-tag-109-01-150x150.png&f=jpg&w=240)
4.4.14 main 要素 カテゴリー: フロー・コンテント パルパブル・コンテント この要素を使うことができるコンテキスト: フロー・コンテントが期待される場所。ただし、祖先に article, aside, footer, header, nav 要素があってはならない。 コンテントモデル: フロー・コンテント コンテント属性: グローバル属性text/html におけるタグの省略: どちらのタグも省略できません。 指定可能な ARIA role 属性 の値: main ロール (デフォルト - 指定不要) または presentation 指定可能な ARIA ステートとプロパティ属性: グローバル aria-* 属性 許可ロールに該当する aria-* 属性 DOM インタフェース:HTMLElement を使う。 main 要素は、ドキュメントやアプリケーションの body
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content inHTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。HTML5入門シリーズ 折りしも東京では先日HTML5カンファレンスというイベントが開催され、webで飛び交う話題もそれについてのものがドンドン増えてきています。このブログでもたびたびHTML5のコーディングにおけるややこしい話題を取り扱っていますが、こういった需要はさらに増えていくのではないかなと思っています。 今回からたびたびHTML5入門と題しまして、HTML5を使ってweb制作をしていく上で避けては通れない基礎的な理解を深める為の文章を書いていきます。webcre8もHTML5は絶賛勉強中で、これはいち制作者としてHTML5によるコーディングをどうするべきかを考えた考察の覚書でもあります。間違いがあればガンガンツッコミをお願いします！知識のある人は単に「間違っている」という指
![[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fa579b466a9d9646edbe9cc1cec01abca7601b9fc%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttp%253A%252F%252Fwebcre8.jp%252Fwordpress%252Fwp-content%252Fuploads%252F2011%252F09%252Fhtml5-section-outline-150x150.png&f=jpg&w=240)
[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属性で文字コードを指定しよう](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f592027f3e8ef20097cc905941f6f4f240992b1ad%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fblog-imgs-45.fc2.com%252Fh%252Fo%252Fn%252Fhonttoni%252Ftsubu_icon2s.jpg&f=jpg&w=240)
2015年4月21日からのモバイルフレンドリーに対応するために、多くの方がレスポンシブデザインを取り入れたかと思いますが、今回はその過程の中で特に便利な疑似クラス（要素全体を対象）と疑似要素（要素の一部を対象）をいくつかご紹介したいと思います。 今まで無理矢理クラス名を付けてcssで調整していた箇所もキレイに収まってタグもすっきりしますよ！ それと、Bingもモバイルフレンドリーを導入するみたいですね！ 個人的にですが最近、Bingが何か気になります。。 jp.techcrunch.com 疑似クラスとは？ まず、疑似クラスですが… 下記のような、タグは昔からあり馴染み深いかと思います。 a:link a:visited a:hover a:active この:linkの部分が疑似クラスで、aタグがlinkの場合の装飾を記述します。 例えば、下記のようなボックスを組んだ場合、一番右の余計な
CSSやHTML、javascriptやjQuery、WordPressやプラグインなど、WEBデザインにちょっと便利なTIPSまとめブログ。サイト制作時に見つけた小ネタなどをまとめて紹介します。
![[CSS]CSSのdisplay:inline-blockで並べた要素間の隙間を埋める方法 | WEBデザインのTIPSまとめサイト「ウェブネタチョ」](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fc4cad8bb2c9c14139c37f656bb6029103471b88c%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fwebantena.net%252Fwp-content%252Fuploads%252F2013%252F03%252F7723139.jpg&f=jpg&w=240)
position さらに複雑なレイアウトをつくるには、position プロパティについて理解する必要がある。取り得る値はたくさんある。名前には意味がないので、覚えるのはなかなか難しい。１つずつ見ていこう。だけど、このページをブックマークしておくのが無難かもしれない。 static .static { position: static; } <div class="static"> static はデフォルト値だ。position: static;を設定した要素は、どんな方法でも位置を指定できない。 staticな要素は、位置指定無効な要素とも呼ばれている。また、それ以外の要素は位置指定有効な要素と呼ばれる。 </div> relative .relative1 { position: relative; } .relative2 { position: relative;top: -2
<!DOCTYPEHTML PUBLIC "-//W3C//DTDHTML 4.01Transitional//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/javascript" src=""></script> <title>CSSの練習</title> <style type="text/css"> body{ background-color:#dddddd
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
