是這個頁的前頭

大綱細則1 WEB頁製作基準

最後更新日期2019年1月23日

1主旨

在出自WEB的提供情報的情況下,規定怎麼樣製作WEB頁的標準。
稱呼下一個URL的事情為本細則正敘述的參照頁。
http://translate-zht.city.yokohama.lg.jp/somu/org/ict/gl/dr/dr1re.html

2 WEB頁製作的想法

按照其次做WEB頁製作的想法的基本。
(1) 以網際網路代表的信息技術是為實現對更好的市民的服務應該使用的東西,并且不白白地濫用那門技術的。
(2) 製作為目的以對所有的利用者報告出自WEB的服務的akuseshibiriti的高的頁。為更高的市民服務實現,策劃提供環境以及手段的充實以及多樣化,與此同時考慮WEB頁的akuseshibiriti的提高10分。
(3) 被在2004年6月制定的日本工業規格"老年人、殘障人士關懷設計指針-情報通信的機器,軟體以及服務-第3部為了依照網絡內容"努力。
(4) 參考被在1999年5月發表的關於"作為網際網路的akuseshiburu的網絡內容的作成方法的方針(關於郵電部以及厚生省[信息無障礙"環境的維修的狀態的研究會])。

3設計的想法

為也從在主要的手段使用視覺的點數在WEB頁的製作有那種設計重要的意思不僅是不過只是帥的設計而且設計其本身正為那個頁的akuseshibiriti的提高做貢獻有必要。順便去,沿著在(6)從下一個(1)聲明的基本的想法設計。
(1) 看哪個頁,也知道作為市的頁。
(2) 策劃基本的操縱、用戶接口的統一,宣判處以易懂的設計。
(3) 決定基本的配色,盡可能地使用那種配色。
(4) 決定基本的設計的標準,規模,盡可能地利用那個標準,構成。
(5) 不根據設計阻礙多種多樣的提供方法的可能性的。
(6) 進行關於全體的數據轉送量考慮的設計。

關於4設計的實施事項

關於設計的實施事項的具體的項目按照其次做。
(1) 看哪個頁,也知道作為市的頁。
a畫面上部設計
(a) 對畫面上部設置共同的設計的市的頁眉。
(i) 利用被根據全體構成討論頁眉設計的東西的和的認定做,橫濱市的標記,名稱,到首頁的鏈接,到搜索頁的鏈接等的功能被包含了。
(u) 在想把頁眉換成按照設計上邊不同的顏色的時候,向網路主管人課提出要求。
(e) 在各區局用於共同的圖片對那裡的圖片而不是什麼因為被/coparts這個索引簿的屬下放好所以各區局的索引簿裡放連接。
i畫面下部設計
(a) 基本信息
在所有的頁的下部上刊登以下的項目。盡可能地使用文字,大小不比標準指定較小的(90%左右)文字種的。
正管轄a業務或者製作信息區局,部,科,負責人名
b咨詢處
刊登以下的聯系地址信息。
(a) 電話號碼(除了針對職員的頁以外有,從地區號碼記載。)關於其他國語的頁,從國家號碼記載。)
(b) 傳真號碼
(c) 電子郵件地址(做mailto設定。) )
咨詢處當做管轄業務的所屬。在刊登和管轄業務的所屬不一樣的咨詢處的時候,使大致意思相協調,記載。
另外,上在各頁的頁腳記載直接咨詢處,而且是製作解決咨詢處的頁,刊登鏈接的對應,但是認定好。
c信息製作日以及更新日(從年紀起清楚地記載。)
(i) 著作權表示
對所有的頁"©"(用HTML資源) © 刊登to記述)製作年齡-更新年齡City of Yokohama.All rights reserved.。用陽歷記載製作年和更新年齡。在但是製作年和更新年齡一樣的時候,可以省略更新年的部分。
關於表示,可以使用圖片,但是對出自alt屬性的代替原文解說一樣的內容。
upejitaitoru
其結果,在瀏覽器窗口的標題表示領域上顯示,而且在搜索了的時候顯示TITLE要素的內容,因為作為,另外,登記了書簽(愛好)時候的標題利用所以對下一個點數注意,敘述。
(a) 在"橫濱市"開始。
(i) 宣判處以能推測頁的內容的簡潔的表達(30字以內大致目標)。在關於特定的區政府的業務的頁的情況下,包括區名在內的事情最好。
(u) 不和其他的頁重復的。
≪4(1)這個i關於u是"參照頁",并且使用提供的模型≫
(2) 策劃基本的操縱、用戶接口的統一,宣判處以易懂的設計。 按照其次做頁設計的標準。
擴大或者的時候在在作為a普通的視窗系統縮小櫥窗了為確實顯示和為了在左上放重要的導航儀考慮的設計做左上部分。
關於ifontosaizu,假定什麼被用各種瀏覽器的標準的設定閱讀。
考慮到u利用者個別擴大縮小字體大小的,確認在使字體大小變得小一號用瀏覽器的設定了的時候能容易辨別文字的。
誒,頁的正文不關於在那個頁形成主要的職責的部分指定字體大小的。
在需要字體大小的調整的時候,不在odezain上指定利用者的用使用阻礙自由閱覽環境的CSS的要點(pt)學分以及畫素(px)學分的絕對尺寸,和使用%學分的相對的尺寸指定做。在指定的時候,超過90%,至少確保超過75%。
不指定kafonto的種類的。
關於ki文字以外的尺寸的指定,使衹行間當做無學分的實際數量,是否em是學分關於那個以外的箱的寬度或者空白等的指定適當選擇哪一方面%學分。
px,pt,mm,cm,in的學分當做原則禁止,但是在給印刷的CSS而不是畫面表示不是這個限度。另外,在版面設計的實現在em以及%不可能的時候無論如何為與圖片的調整位置衹承認px學分的使用,但是避免這樣的構成盡心竭力。
不進行使用ku CSS,把鏈接的下線除掉的指定的。
不在kerinku以外的部分進行出自下線的裝飾的。
關於把共圖片用於的按鈕,對容易操縱的大小設定。
(3) 決定基本的配色,使用那種配色。
在16進數指定在畫面之間使用的顏色。
另外,發色根據使用的OS,顯示器的環境注意有不同的情況的。
只要可以a,就,背景顏色,白(#FFFFFF),文字色使用黑(#000000)。正同其他的頁連接的部分的文字色完成青(#0000CC)訪問,鏈接的文字色在紫色(#800080)或者分別的值使用近的顏色。
把i背景圖像在文字和用不接二連三地發生的範圍的利用停下。是在把背景圖像用於文字和接二連三地發生的範圍為了變得不難以看文字的時候留心10分,與此同時指定背景圖像和同類色的背景顏色,沒顯示圖片的狀態,但是什麼文字能看。
在在在作為u普通的瀏覽器表現鏈接的時候被使用的藍以及紫色近的顏色是什麼不作為文字的強調色使用。
為了在,誒,在黑白的激光打印機輸出了的時候內容被清楚打印考慮顏色的對比度,與此同時在甚至殘障人士能在色覺明確認識的配色做。
≪基本的顏色指定的例子使用在"參照頁"提供的模型。≫
(4) 決定基本的設計的標準,規模,盡可能地利用那個標準,構成。
畫面的版面設計手法甚至小的畫面不在旁邊露出來,一覽性和基本用大的畫面更做高漲的所謂液體·版面設計,是像素數,并且不可以固定頁的寬度以及格子的寬度。
旁邊滾動條在超過8成的市民使用的終端環境是必要的的的為了沒有畫素尺寸事先決定圖片以及寬度的被固定的表的東西(在讓強制性地在旁邊排列復數的東西的時候,是共計)一定以下,并且,作為瀏覽器的內容表示領域,在製作時間點包括空白在內壓住上限。
另外,進行設立準備在縱向使用A4表格,打印的時候割傷右端的的供印刷使用為了沒有的樣式表的印刷頁面,使而言是不需要的導航儀要素當做印刷對象外的關懷。
而且,考慮易用性,有一樣的功能的按鈕設計全體決定了把形狀以及位置統一起來的製作規則之後。
(5) 不根據設計阻礙多種多樣的提供方法的可能性的。
為各種各樣的使用環境被出自身體性的殘疾的條件或者連接環境的條件假定為了不和提供情報的殘疾成為設計考慮WEB頁的利用者。
清楚地記載當做a標準的HTML的版本,進行按照那個的適當的markup。
itekisuto朗讀以及原文瀏覽器的表示的為了不妨礙考慮。
直接同u圖象文件連接,衹用圖片不構成頁的。
誒,不使用外語文字以及機種、環境依存文字,半角片假名的。
即使不使用1部o的擴展機能以及外部程序,plug-in應用程序為了可以信息傳達也製作。
不使用kafuremu的。
不進行被用kirinku新的櫥窗開的設定的。
這種情況,在用一樣的櫥窗開的話人們認為顯著不方便的時候,不是這個限度,但是新的櫥窗明示舉行的了之後也和作為指定尺寸,不顯示工具條的孩子櫥窗開的設定做用來在WEB應用程序中打開詳細說明的鏈接鏈接地址。
什麼不換成kuburauza的"回來"的功能變得不能使用的構成。不可以進行特別根據META標簽的指定對在0秒的頁自動跳躍的設定。
(6) 進行關於全體的數據轉送量考慮的設計。
因為利用者的全部沒一定使用高速的連續接入網所以考慮頁全體的數據量,和甚至作為低速的連接環境能舒適地利用的構成做。
認定考慮了a圖像尺寸,色數。不不必要地使用大的尺寸的圖片以及作為單純地一個裝飾的圖片的。另外,關於需要一定程度的大小的東西像地圖那樣最初表示縮略圖(小的圖片)和圖片的數據尺寸,考慮利用者的便利性。關於顏色,控製到也表達需要的數量。
不使用給i裝飾的聲音、音樂的。
在提供使作為u高速的連接環境專門化的內容的時候,明示大致意思。

為5設計實現使用的軟體

網路主管人課提供WEB頁的WEB內容管理系統(以下說"網際網路CMS"。) 使用o,製作認定管理。
在編輯用來在直接編輯不能使用網際網路CMS的WEB內容的HTML的情況以及網際網路CMS利用的模板的時候,是正作為標準規格附屬於Windows的記事本以及各種文本編輯器,并且和什麼直接編輯做。即使在使用主頁·建造者或者Dreamweaver等的WEB頁製作專用的軟體的時候放也學習了製作適當的HTML的知識之後製作akuseshibiriti的高的頁。WEB頁製作專用的軟體使用正確依照在6(1)聲明的HTML以及CSS的式樣的東西。
為關於Word或者Excel等的HTML製作功能,進行違反本大綱的HTML記述,akuseshibiriti的低的頁被製作避免使用。

關於6設計實現的實施項目

關於設計實現的實施項目按照其次做。
(1) 關於為標準的HTML以及CSS的版本
關於新製作的頁,使用出自W3C勸告的HTML 4.01 Strict。
關於在現有的頁使用了HTML 4.01 Transitional的東西,努力轉移到HTML 4.01 Strict在更新的機會。
另外,版面設計的定義依照CSS 2.1。
(2) 關於HTML標記的適當的使用
根據分別的目的適當地分別使用HTML標記。
適當地靈活運用在a標題標簽或者強調標簽等的搜索以及用聲音朗讀軟體的利用的情況下有重要的意思的標簽。
不使用認定根據CSS進行ipeji的版面設計,以版面設計為目的TABLE標簽的。在不得已進行出自TABLE的版面設計的時候,不使用TH或者CAPTION等的要素,在使用了供視覺障礙人士使用的朗讀軟體為了被確實朗讀的時候充分注意。
(3) 關於為標準的瀏覽器
當頁製作的時候,不以在特定瀏覽器的閱覽為前提,製作按照(1)的東西。確認,在此之上,分別的最新的發布微軟公司正在Internet Explorer中正式支援的各版本,Mozilla Firefox,Google Chrome版,具體的表示。
另外,為了需要的文字信息沒問題,甚至能連接LYNX,w3m的原文瀏覽器以及主頁·領導人等的聲音瀏覽器考慮。上載以後,確認一定朗讀以及表示正常根據市正引入的WEB頁朗讀、擴大服務進行的。
而且,努力在各種各樣的環境不僅WindowsPC而且確認Macintosh或者智慧型手機。在外部委托的情況下,當做使Mac OS X版的Safari的用最新的發布版的確認必需。關於針對手機終端的頁,利用作為對象的終端以及模擬器,確認。
在即使除了如上提起的瀏覽器以外有也從利用者公開以後有不正常的指摘了的時候,盡可能地修改。
(4) 關於DOCTYPE宣言(DTD)
根據使用的HTML的版本,適當地解說DOCTYPE宣言。
≪關於記述例,"參照頁"參照≫
(5) 關於使用的語言的宣言
用HTML要素的LANG屬性宣布在頁使用的語言。在日語的情況下,也關於LANG="en",其他的語言在LANG="ja",英語的情況下適當設定。
(6) 關於文字編碼方式
在新製作的頁以及模板使用的文字碼,利用UTF-8。但是,關於日語的頁,認定正從在沒作為使用環境相當於UTF-8的瀏覽器的利用被假定的情況以及過去起使用Shift_JIS的情況也可以合適地利用Shift_JIS。
關於文字碼,利用META要素,宣布Charset適當地。然而,因為在TITLE要素的書寫方式在橫濱市利用日語所以必須TITLE要素之前解說這個。
另外,和ISO-8859-1用在META要素的Charset指定解說在英語的頁使用的文字碼。
≪關於記述例,"參照頁"參照≫
(7) 關於WEB頁製作軟體自動插入的標簽
為用WEB頁製作軟體,有自動插入獨特的標簽的東西統一標簽被復用設定的的為了沒有使用的軟體。
另外,在不同本大綱一致的字體的種類以及字體大小的設定被WEB頁製作軟體做了的時候刪除那個部分。
≪軟體自動插入的標簽以及屬性的例子是"參照頁"參照≫
(8) 關於語法、akuseshibiritichiekku
關於製作a的WEB頁,公開之前檢查以下。
(a) 一定必須在富士通WebInspector修改的問題不被查出的。
(i) 重要性超過2的警告不在Another HTML-lint發出的。
(u) 錯誤不被在W3C CSS Validator查出的。
ipeji製作的基礎和模板檢查以下。
(a) 一定必須在富士通WebInspector修改的問題不被查出的。
(i) 重要性超過1的警告不在Another HTML-lint發出的。
(u) 錯誤不被在W3C CSS Validator查出的。又合適地靈活運用另外在"參照頁"上刊登的akuseshibiritichiekkutsuru,問題的重點不被查出的。
≪關於具體的語法檢查工具,"參照頁"參照≫
(9) 關於CGI
按照其次關於WEB應用程序的利用做CGI程序。
個別和網路主管人課訂貨之前關於a利用的可否,動作環境商談。
i裝飾,計數器不在提供情報做無直接關係的利用的。
服從按不同u規定的"Web應用的製作基準"。
(10) 關於交通數的統計信息
交通數統計信息每月在網路主管人課參照統計的東西。為關於使用CGI的交通計數器,有統計信息和不同的情況認定不利用。
(11) 關於文件和文件的種類
使用a HTML,GIF,JPEG,PNG。
在迅速提供用精確地保持ipejidezain的形狀刊登信息的有必要的情況以及大量的信息有必要的時候,能使用PDF,但是注意以下的點數,和什麼盡心竭力由於akuseshibiriti上邊的理由避免做。
在使用PDF的時候,立足於在檢索結果的標題上顯示的,和HTML頁一樣,并且適當地設定被文件的屬性設定的標題。
(a) 有不能在檢索引擎分析的情況。
(i) 在PC以外的終端,不能看的情況多。
(u) 數據尺寸大,并且在閱覽用低速線路有難。
(e) 有不可以由於聲音的朗讀或者難以理解內容的情況。
因為u Word或者Excel是收費的產品,并且不是所有的利用者使用了的東西所以不安易地刊登那些形式的文件,和原則做HTML的使用。
另外,在刊登的時候事前用病毒檢知軟體充分檢查。
誒,迄今為止諮商之後關於沒使用的形式的文件在網路主管人課決定處理。
在提供依靠oapurikeshonsofutouea的文件的時候,一定程度上進行用甚至舊的版本能讀的形式保存的辦法。
另外,在免費的瀏覽軟件被廠商提供的時候進行到那個下載頁的鏈接。
≪以在Word或者Excel為標準的版本是"參照頁"參照≫
在ka PDF,Office文件,視頻同瀏覽器沒作為標準規格相當於的形式的文件連接的時候,一定進行在利用者點擊之前好像明白那個的表示。表達的方法當做原則使表示網路主管人課在鏈接的起首指定的圖標的。
同時清楚地記載鏈接地址的文件的大小(在利用流伺服器的視頻配信的情況下是比特匯率和長)。
即使是瀏覽器作為標準規格相當於的形式的文件也同樣在超出100KB的大小的情況下辦理JPEG圖像。
(12) 關於文件名,目錄名
半角英國數量小寫字母涉及,和"-"(減號)的38種做在文件名以及目錄名可以使用的文字。
當做".html"使HTML文件的擴展名。
衹用編輯,正進行工作的個人電腦正確認的話在文件名使用了大寫字母的因為為錯而難以注意所以充分注意。
(13) 關於收藏索引簿
實際上收藏內容的URL變成"http://translate-zht.city.yokohama.lg.jp/區局名索引簿/~"。關於區局名索引簿屬下的目錄名,使用半角英國數量小寫字母,和短的名稱極力做。
(14) 關於用各索引簿最初顯示的文件名
一定做。但是除去用來放image索引簿HTML以外的文件的索引簿。
(15) 關於索引簿的構成
圖片的文件不讓與HTML文件相同的階層混在一起,做image這個名稱的文件夾,放好,研究。
≪關於索引簿構成例,"參照頁"參照≫
(16) 關於使用Flash的內容
在使用Flash的時候,注意下一個點數。
在因為使用aanimeshon所以內容變得容易理解的時候利用,不對頁的基本的導航儀以及單純地一雙裝飾眼睛而言使用的。
采取到不能重生i Flash的環境的代替措施。
對使用了u Flash的頁清楚地記載大致意思,進行到再生軟體的下載頁的鏈接。
什麼也能用,誒,盡可能舊的版本的軟體放。
在o特殊的利用的情況下,與網路主管人課協商,決定利用。
(17) 關於Java,JavaScript以及其他插件
服從特別地規定的"Web應用的製作基準"。
(18) 關於使用FORM的數據發送
為了使用FORM,從利用者收到信息在伺服器上網路主管人課和諮商之後按照6(9)設置用來處理信息的CGI腳本,使用SSL的暗號化通信。
在使用電子郵件,直接從利用者收到的時候,與網路主管人課的調整而言是不需要的,但是為了為有不被根據利用者的瀏覽器以及電子郵件軟體的設定確實傳送的情況不使用FORM而能送電子郵件刊登收件人,考慮。
(19) 關於可(映像圖)
在使用可的時候,宣判處以客戶端的可。
另外,為不支持可的閱覽環境,也可之後不久設置相同的原文鏈接,準備代替手段一定。
(20) 關於ALT屬性
對圖片,一定設定ALT屬性。
ALT屬性有意識地設定什麼被用供沒有圖像表示功能的瀏覽器以及被無效化的瀏覽器,視覺障礙人士使用的聲音朗讀軟體使用。
關於設定的結果,使用無效化的瀏覽器以及市把圖像表示功能導入了的WEB頁朗讀服務,在內容的理解確認沒有障礙的。
≪ALT屬性的設定例是"參照頁"參照≫
(21) 關於文章的書寫方式
關於文章的書寫方式,為了利用者能容易理解,考慮,與此同時出自原則橫濱市發行的"文書事務的輔導"(文章的例子集)的事情。另外,漢字使用常用漢字,在使用費解的漢字的時候加上音標,研究。
然而,在附上音標的時候和"橫濱"(yokohama)和說的記述做。
另外,關於兒童網頁,為了使用在被假定的利用者的年齡之前學習的漢字考慮。

供7手機終端使用的畫面製作的想法

有衹讓以行動電話代表的小型的手機終端拉動縮小全體,表示的東西以及畫面,表示的東西,原文表示的東西的變化。什麼認定這其中縮小表示型在常規的作成方法處理,對下一個點數關於其他東西當心製作。
(1) 對手機終端宣判處以適宜的構成。
弄短adirekutori名以及文件名。
注意在能表示i的文件的種類有限制的。
u 1行的文字數使全角8個字當做標準,留意那個讓適合的畫面的建設。
誒,對85像素左右橫幅押住圖片。
o背景顏色使白(#FFFFFF)當做基本。
為了表示也在黑白的畫面在彩色畫面沒有障礙當ka色使用的時候考慮顏色的對比度,與此同時甚至殘障人士和能明確識別的配色在色覺做。
ki Java以及Flash,JavaScript等的擴展機能在製作與所有的方式對應的頁的時候,是什麼不使用。但是在個別製作與各終端對應的頁的時候不是這個限度。
(2) 為被根據數據量收費為了把文字,標簽等的數據換成必要最小限度特別留意許多的行動電話。
(3) 考慮表示功能、表示色數、表示領域根據機種有差別的。
HR要素的粗細因為不同所以,作為例子,根據機種注意。各手機履歷正又獨自下定義的表情文字不使用的。
(4) 實際上在行動電話以及原文瀏覽器確認表示。
≪能用供手機終端使用的畫面製作使用的要素是"參照頁"參照≫

關於8頁的移動

在改變網站的構成的時候,認定能在傳統的URL繼續連接。 在在不得已移動頁的時候從原來的頁個別連接起來,向新的頁介紹,或者是索引簿學分,并且移動的時候,使用網路主管人課提供的轉送功能,總結設定轉送。
文件構成大幅度變化,在收集的轉送是困難的的時候使用WEB伺服器具有的錯誤報文定製功能(ErrorDocument),為了能在最低限度區局的首頁上回來設定。

外部委托9 WEB頁的製作時候的警告

讓在委托業者WEB頁的製作的時候給委托規格說明書附加大綱正文以及本製作基準,遵守的。

到這個頁的諮商

總務局工作改革室ICT基礎管理課

電話:045-307-0316

電話:045-307-0316

傳真:045-664-5917

郵件地址:so-ict@city.yokohama.jp

回到前面的頁

頁ID:987-223-898

回到前頭