HTMLテンプレート アーカイブ - PhotoshopVIPこの記事では、ホームページの作成やウェブサイト制作のアイデアを増やす、コピペで使える最新HTML／CSSスニペットをまとめてご紹介し...
エンジニア向け！CSSレイアウト講座＆用途別に選べる横並び・中央寄せのまとめ - Qiita
私の会社では、HTMLやCSSまわりはデザイナーやコーダー、マークアップエンジニア、フロントエンドエンジニアが作るのですが、 たまに工数の関係でバックエンドエンジニアやサーバーサイドエンジニアに直接HTML/CSS側を修正してもらうことがあります。 今回は、その方々向けによく質問に上がるようなレイアウトの基礎部分を教えるために展開した資料を再度まとめました。 ※HTML/CSSのソースが書いてある部分は、codepenなどで実際にソースを表示しながら説明したので 同じように確認してもらえると分かりやすいとおもいます。 ながれ HTMLのブロック要素とインライン要素 positionプロパティ 横並びのCSS 中央寄せのCSS（テキスト） 中央寄せのCSS（ブロック） まとめ HTMLのブロック要素とインライン要素 CSSの前に、少しだけHTMLについて説明をしたいと思います。 HTMLには
進化するWeb Componentsの今、2016年最新情報
Web Componentsが変えるWeb開発の未来から、はや二年が経ちました。コミュニティでの議論やフィードバックを経て2016年現在、Web Componentsの仕様は大きくアップデートされています。先日行われたDevFest Tokyo 2016でもWeb Components 2016 & Polymer v2 と題してWeb Componentsの最近についてお話しました。 これまでGoogleを中心に策定されてきたv0の仕様を元に、新しい仕様はMozillaやAppleなどの各ブラウザベンダーの合意を改めてとりながら策定が進められています。今日はアップデートされたWeb Componentsの仕様を説明していきます。 基本概念については割愛しますが、えーじさんのShadow DOM – Web Componentsを構成する技術:Tender SurrenderとCustom
HTML&CSS フロントエンド 何度も読み直したい資料・ツールまとめ - 酒と泪とRubyとRailsと
HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。 (02/05 20:10) 定期見直し 🎂 [Style Guide]「Google HTML/CSS Style Guide」の和訳 Googleが作ったStyle Guide『Google HTML/CSS Style Guide』を和訳していただいた『Google HTML/CSS Style Guideを適当に和訳してみた』。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う！ 🐰 [S
PhantomJS でログインが必要なページでも自由自在にスクレイピング - 凹みTips
はじめに PhantomJS - Scriptable Headless Browser PhantomJS はヘッドレスな（ブラウザ画面のない）QtWebKit ベースのブラウザで、JavaScript の API を通じて、そのブラウザを自由自在にあやつることが出来ます。使用シーンとしては、Jenkins などの CI ツールとの組み合わせによる Web ページの GUI の自動テストや、Web ページのスクリーンキャプチャ、スクレイピングなどが挙げられます。 今回は、ログインが必要なページの情報をパースして自分専用に RSS 化したいなと思い、３つ目のスクレイピング用途をベースに調べてみました。その内容を備忘録として残しておきます。 出来るようになること ログインが必要なページの HTML を取ってくる ログインが必要なページのスクリーンキャプチャを撮る PhantomJS の導入
検索じゃ学べない！ HTML/CSS/JavaScriptの気づきTipsまとめ31こ | _level0 - KAYAC Front Engineer Blog
HTMLファイ部のほんだです。 気づきTips！ Σ(・ロ・) カヤックの中でもHTML5のWebフロントエンド実装を担当する エンジニアを集めた部署「HTMLファイ部」では、 制作にあたってはまったことや、気づいたことをメモ的に蓄積・共有しています。 通常は、 1. 制作で何かわからないことがでた ▼ 2. Google等で検索して解決の糸口をさがす ▼ 3. こんな方法があったのか〜 と気づきを得る というフローでスキルアップしていくことがもっぱらだと思うのですが、 学びを増やしていくためには違うアプローチも必要なんじゃないかと思います。 カヤックHTMLファイ部では、 1. みんなで蓄積したTipsをざぁっと読む ▼ 2. こんな方法があったのか〜 と気づきを得る ▼ 3. 制作の際に導入していく というフローを繰り返し実践していくことで、 検索では気づけないことを学び、実装力アップ
ブラウザ上でMarkdownを安全に展開する - 葉っぱ日記
不特定のユーザーが入力したMarkdownをブラウザ上でJavaScriptを使ってHTMLに変換するという場面においては、JavaScriptで変換してHTMLを生成するという処理の都合上どうしてもDOM-based XSSの発生を考えないわけにはいかない。かといって、MarkdownをパースしHTMLを生成するという処理すべてをXSSが存在しないように注意しながら自分で書くのも大変だし、markedやmarkdown-jsなどの既存の変換用のJSを持ってきてもそれらがXSSしないかを確認するのは結構大変だったりする。 そういった場合には、Markdownから生成されたHTMLをRickDOMを通すことで、万が一HTML内にJavaScriptが含まれていたとしてもそれらを除外し、許可された要素、許可された属性だけで構築された安全なHTMLに再構築することができる。さらに、そうやって生成
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
HTML/HEAD - Wikibooks
HTMLのHEAD要素は、HTML文書のメタデータ（文書の情報や設定）を含むコンテナです。HEAD要素内に含まれる内容は、ユーザーには直接表示されませんが、ブラウザや検索エンジン、その他のサービスにとって重要な情報を提供します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>HEAD要素の例</title> <meta name="description" content="このページの説明文です。"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <script src="scripts.js" defer></scr
覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
Shiny
Here is a Shiny app Shiny apps are easy to write. Let users interact with your data and your analysis, all with R or Python: R Python library(shiny) library(bslib) library(dplyr) library(ggplot2) library(ggExtra) penguins_csv <- "https://raw.githubusercontent.com/jcheng5/simplepenguins.R/main/penguins.csv" df <- readr::read_csv(penguins_csv) # Find subset of columns that are suitable for scatter p
iOS6のリモートWebインスペクタ
iOS6のリモートWebインスペクタ iPhone5が販売されて、それに合わせてiOS6がリリースされました。ちょっとアップデートは様子見をしようと思っていたのですが、iOS6のリモートWebインスペクタが気になったので検証用のiPhoneのiOSバージョンを4.3から一気に6にアップデートしました。 iOS6のリモートWebインスペクタの使い方 iPhoneの設定 iPhoneの設定→Safari→詳細でWebインスペクタをオンにします。 WebインスペクタをオンにしたらSafari6がインストールされているMacとケーブルで繋ぎます。 ちなみにiOS6ではこれまであったデバッグコンソールがなくなってるのでWindowsの人はアップデートしないほうがいいかも。 Macの設定 Safariを立ち上げて開発メニューから「WebKit Webインスペクタを使用」にチェックを入れます。 iPho
[CSS]JavaScript無し、レスポンシブ対応、背景をコンテンツのスクロールに合わせて変更するスタイルシート
デモを幅780pxで表示 実装 実装は、5ステップです。 Step 1: 背景画像の用意 デモでは4つのコンテンツがあるので、3枚の背景画像を用意しています。一番大きい表示サイズを想定して、1,800x1,200pxの画像です。 Step 2: HTML HTMLは非常にシンプルです。 4つの各コンテンツはrapperのclassを付与したdiv要素で配置し、header, section, section, footerで内包します。 <!DOCTYPE html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>From love for lavender</title> ... </head> <body> <header class=" content"> <div class="wrapper
ソースコードを快適に読むための GNU GLOBAL 入門 (後編)
2009-03-09 前編では GNU GLOBAL のインストールからコマンドラインまでを、 中編ではエディタ (vim) からの使い方を書いた。 ソースコードを快適に読むための GNU GLOBAL 入門 (前編) ソースコードを快適に読むための GNU GLOBAL 入門 (中編) 後編では、ソースコードを HTML に変換して Web ブラウザから見られるようにする、 htags というコマンドについて書くよ。 といっても、エディタとの連携などと違って、それほど書くことはないんだけどね。 HTML への変換前に、 gtags コマンド（前編参照）でタグファイル (GTAGS など) を作成しておく。 次に、 ソースコードのルートディレクトリで htags コマンドを実行することで、ソースコードが HTML に変換される。 HTML 化されたデータは vim での :GtagsCur
Markdownで文章を書こう！ - ゆーすけべー日記
みなさんはどのようなエディタでどのような記法で文章を書いていますか？ 状況によるとは思いますが、WordとかMacのPagesで文章を書いているという方や Evernoteでメモを取っているという方、または、Blogの投稿フォームに綴っている方、 様々だと思います。 僕も書くものによってはPagesやEvernoteも使うのですが、一番文章を書く手法が「プレーンテキスト＋Markdown」というものです。今もこの手法で書いています。Blogを書く時、雑誌の原稿を書く時、はたまたメルマガの原稿を書く時、全てにおいてこのやり方は今の僕にとってベストです。 プレーンテキストである利点 そもそもプレーンテキストとはWikipediaによると、 プレーンテキストには文字情報以外の情報は一切含まず、テキストデータのみで構成されている。バイナリデータや文字の整形情報を持たないので、最低限の機能しか持たな
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Private Presentation
ＰＨＰリファレンス（$_FILES、@move_uploaded_file()）
サービス終了のお知らせ
GitHub - Jxck/html2json: html2json & json2html
