最近今あるサイトをスマートフォンに対応させるべく、コツコツがんばっているわけですが、その際に気になったことや知っておきたいポイントをまとめてみました。基本的な内容も多いと思いますが、ご参考になればと思います。 1. スマートフォンに対応させるには？ ウェブサイトをスマートフォンに対応させるには2つのパターンがあると思います。 PCにもスマートフォンにも対応したページを作成するか、PC用ページとは別にスマートフォン専用ページを作成するかです。 1つ目のPCにもスマートフォンにも対応したページは、Media Queriesを使う場合が多いと思います。 Media Queriesを使うと画面のサイズの違いによって適用するCSSを変更することができます。 例えば、CSS-Tricksというサイトは画面サイズによってレイアウトが大きく変わってます。 Media Queriesについては後で簡単に紹介
1：名無しさん＠涙目です。(関西地方)：2011/06/30(木) 21:24:48.39 ID:Iecpl0lI0 ある会社のホームページのソースコードが恐いと話題になっています。 ソースコードの隠し文字に驚くような文章が書かれていたのです。 話題の会社のホームページはこちら http://leimay.jp/lme/ http://megalodon.jp/2011-0630-2351-02/leimay.jp/lme/（魚拓） ウェブページの何もないところを右クリックして「ソースコードの表示」を選択すると……。 http://blog-imgs-34.fc2.com/n/e/w/news020/Screenshot_1.jpg ホームページのタグにはブラウザに表示させない文字として使う“隠し文字”というものがあります。“隠し文字”というものはホームページを制作するときに、何がどこまで
HTMLタグというのはWEBの文章やグラフィックの配置や装飾を指定する便利な記号です。かけだしブロガーも、バリバリのプロフェッショナルも要チェック！意外と知らない便利なタグがあるかも！ 原宿: うーーーん………どうもホームページ作りがうまくいかないな…… リックェ: こんにちはー 原宿: おー、リックェ リックェ: 「HTMLタグ」のことでお困りだって聞いたんですけど？ 原宿: そうなんだよ、全然わかんなくてさ リックェ： 任せといてください！ 僕、一応そっち系の仕事してますんで詳しいですよ 原宿： 頼りになるー！ 悪いけどちょっと教えてよ リックェ： はい。まぁHTMLタグってのはマークアップ言語（ランゲージ）のひとつで、ドキュメント、つまり文章やグラフィックですね。これの配置を決めたり装飾をしたりする…… 原宿： あー、ちょっと待って。口で説明されてもイマイチわからないから、とりあえず
61 High Quality And Free xHTML Templates Part 2: Year 2010 | Graphic and Web Design Blog ハイクオリティでフリーなXHTMLテンプレート61がまとまったエントリのご紹介です。 これがフリー？というような物が多く、簡単なサイトならば誰でも美麗なウェブサイトを構築出来そうです。 沢山あるので、作りたいサイトのイメージに合うデザインが見つかりそうですね。 関連エントリ フリーな(X)HTML/CSSなテンプレート集のまとめ フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集 フリーのCSSデザインテンプレート集「Free Css Templates」 フリーのWEBデザインテンプレート集
KompoZerのヘルプファイル全訳です。一通り目を通すことで、KompoZerの基本的な使い方がマスターできる構成になっています。またKompoZer≡Nvuとして語句を置き換えることで、そのままNvuのマニュアルとしても読むことができます。 最初のチュートリアル編では、ごく簡単にKompoZerの諸機能が概説してあります。これを読むだけでもKompoZerで簡単なウェブページが作れるようになるでしょう。KompoZerの機能をもっと詳しく解説してあるのが、次のヘルプファイルです。初めてサイトを作成しようという方でも、最初から読み進めていけばバッチリだと思います。
webのいろんなデザインを生業にしている人間のちょっとしたTipsだったりメモだったり。 webのフロント技術について書く事が多いです。 もう5年以上使っているにも関わらず前々使い方を知らなかったりするemacsですが、ようやくきちんと勉強しようと言う気になったので調べてみました。 いままでも、HTMLとかCSSを書くときにもっとemacs使おうと思いつつ、テキストエディタのHTML編集モードやDreamWeaverといった分かりやすいエディタにフラフラ逃げていた訳ですが、今年はモヒカン度合いを高めようと思い、積極的に使って行こうと思います。 なぜviでないかというのはおいておいて。 という訳で、まずはHTML。 emacsでHTMLを書くためのモードはいくつかあり、 html-mode html-helper-mode psgml-mode(xml-mode or sgml-mod
そこにテーブルタグがあるからだ。……ということなのだろうか。 とかく人はテーブルタグで日本地図を作りたがる。テーブルタグで作った日本地図がちゃんと日本地図になっているというのも考えてみればふしぎではある。 というわけでテーブルタグ日本地図の紹介。 「Template:日本 - Chakuwiki」を追加 (3/10) 「地図の検索 - goo 地図」を追加 (3/11) 「道州制」を追加 (3/11) 「『A day of rest』」を追加 (3/12) 「いつもガイド」を追加 (3/13) 「トップページだけでもなんとかしたいのよ」を追加 (4/10) 素材散策：資料＆テキスト／日本地図（HTML）（TSUKURUの素材散策より） 自分の見た限りではもっとも出来のよい日本地図。テーブルタグという制約の中で最大限日本地図たりえんと創意工夫を凝らしている。至極の出来栄え。地域ごとに色分けし
さて、昨年夏から格闘していたセマンティック・マーク付けに関する本の原稿をようやく書き上げ、出版社に送りました。仮タイトルは『セマンティックHTML/XHTML』で、毎日コミュニケーションズから5月下旬に刊行予定です。5年ほど前から本の企画はありながら、なかなかまとめられずにいたのですが、昨年とあるプロジェクトが没になったのを機に、集中してこの本に取り組み、何とか脱稿にこぎつけました。 セマンティック・マーク付けとは、普通のウェブ文書の中に含まれるイベントや人物などの情報を、ソフトウェア・エージェントでも扱えるように明示することで、人間が読むための文書（文書のウェブ）を、同時にコンピュータにも処理できる情報（データのウェブ）にしようという試みです。何度か取り上げたGRDDLやマイクロフォーマットもその一種ですし、最近ではRDFaという仕様がW3C勧告になり、注目を集めています。この本は、そう
This document represents a draft microformat specification. Although drafts are somewhat mature in the development process, the stability of this document cannot be guaranteed, and implementers should be prepared to keep abreast of future developments and changes. Watch this wiki page, or follow discussions on the #microformats IRC channel to stay up-to-date. hAtom is a microformat for content tha
はじめに PSGMLモードはSGMLを編集するためのモードだが、XML、HTMLに特化した XMLモード、HTMLモードも含まれています。PSGMLモードではDTDがある と幸せになれます。逆に言うとDTDが無いときは使ってもあまり嬉しく ありません。 設定 (autoload 'xml-mode "psgml" "Major mode to edit XML files." t) ;;; RELAX、RELAX NGもxml-modeで開く (setq auto-mode-alist (append '(("\\.\\(xml\\|rlx\\|rng\\)$" . xml-mode)) auto-mode-alist)) ;;; XHTMLはhoge.xhtml.jaのように.xhtmlの後に拡張子がついてもいい (setq auto-mode-alist (append '(("\\.
psgmlというのはSGMLの入力支援のために作られたlispです．当然HTML作成に活用できますし，また，XMLの作成にも対応しています．DTDを読み込んで正しく文書を作成することが出来ます． ここに書かれているのはmakeなどを使わないでインストールする方法です．自分のディレクトリ構成とconfigureファイルなどでの指定が微妙に違うし，そう簡単に修正できそうになかったので，手動で作業しました． 目標はXHTML1.0などを編集できるようにすることです．やり方を眺めれば後はどうすればいいのか分かると思います．自分，Meadowを使っているのでそれように書いていますが，作業自体はemacsenなら大丈夫だと思います．適宜読み替えてください． psgmlのダウンロード まずは本体をInformation about PSGMLからダウンロード．自分は最新の1.3.1を使っています． 解凍
This shop will be powered by Are you the store owner? Log in here
w3csites.com est un blog incontournable pour les passionnés de technologie et les professionnels du numérique. Il propose des actualités sur les dernières innovations technologiques, le développement de logiciels et les solutions SAAS. w3csites.com couvre également les tendances actuelles du web, offrant aux lecteurs des insights précieux pour rester à jour dans ce domaine en constante évolution.
叢では、サイト内を結ぶリンクをlink要素のみで表現している。その為、OperaやLink Widgets、或は同等の機能を有すextensionがインストールされているFirefox以外のブラウザでは、サイト内を結ぶリンクが、通常は表に出ない構造となっている。表に出ずとも、殆どのブラウザに、開いている頁のソースを表示する機能が備わっている。なので、問題はなかろうと思っていた。 しかし、その考えは甘かった。そのような煩わしい手順を踏んで下さる方は稀で、抑々、そのような事をしていると気付かれない方が殆どだった。 どうにかしようと思い立ち、可視化する方法を考えた。出来るだけ既存のXHTML文書を書き換える事なく済ませたい。JavaScriptを無効にしている方も困る事ないようにしたい。そう思ったので、CSSを使う事にした。Geckoエンジンが載せられたウェブブラウザではlink要素はa要素と同
brとp、間隙と塊、シリアルとブロックの補足。 別の言い方をすると； pタグのへぼいところは、pタグを使うということが、改行を制御するのを放棄するも同然だ、という点です。 改行ブロックレベル要素派、すなわち改行pタグ派には、<br><br><br>に相当する実装がありません。<br><br><br>とは「二行空け」です。これはたとえばCSSファイルに、p {margin-top:2em;}と定義すればいい、のですが、それだと全てのpが二行空けになってしまいますから、クラスで特定して、p.hoge2 {margin-top:2em;}となります。同様に、単なる改行はp.hoge0 {margin-top:0em;}であり、三行空けはp.hoge3 {margin-top:3em;}です。まとめると p {margin-bottom:0em;} p.hoge0 {margin-top:0em;
HTMLのタグのなかで何が好きといって、br、強制改行タグが一番好きです。pタグは苦手です。 brタグはインライン要素に属し、シリアルに文章の中に置かれてその前後を隔てます。一方、pタグはブロックレベル要素に属し、段落の前を開始タグ<p>で、後を終了タグ</p>でもって囲むことで機能します。 W3Cによるとbrは非推奨のタグであり、pを使うべきとのことですが、受け入れがたい話です。XHTML2.0でpタグの制約が緩和されようが、sectionタグとの連繋が検討されていようが（8.6. The p element）、的が外れているというものです。頑然、brを推します。 文章を書くというのは、単語をシリアルに並べていくことであり、文章を読むというのは、それら単語の間に因果や逆接、主述や並列等の関係を見出していくことです。そしてそれらの関係は、文章の中に細かく錯綜し、跋扈し、一つの単語に二重三重
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![iPhone 3G用のWebページを作る3 [Javascript] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/3a713ecab6d4800da05c4504abbf5718b1613b04/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fproxy.goincop1.workers.dev%3A443%2Fhttps%2Fimg.aacdn.jp%2Faa%2Fcommon%2Fogp300_300.png)
