Adobe Photoshopのスライスを使用して、畫(huà)像をエクスポートしてHTMLテーブルを生成するためのセクションにWebレイアウトを分割しました。デザイナーは、ロゴやナビゲーションバーなどのコンポーネントの周りに長(zhǎng)方形の領(lǐng)域を作成し、カスタム設(shè)定でエクスポートし、デザインを反映したテーブルベースのレイアウトを作成することができました。一般的な用途には、開(kāi)発をスピードアップしながら、ヘッダー、フッター、バックグラウンドグラフィックのエクスポートが含まれます。このプロセスには、設(shè)計(jì)のスライス、ファイルとHTMLのエクスポート、テーブルセルを使用した畫(huà)像の配置が含まれていました。 FlexBoxやグリッドなどの最新のCSSレイアウトにより時(shí)代遅れですが、ブラウザに一貫性がなく、CSSが限られていた場(chǎng)合、スライスが不可欠でした。

スライスは、Adobe Photoshop（およびImagEReadyのような以前のツール）の機(jī)能であり、設(shè)計(jì)者がWebレイアウトを小さくて管理可能なセクションに分割できるようにしました。これらのセクションは、個(gè)々の畫(huà)像としてエクスポートしたり、後でHTMLおよびCSSに変えたりすることができます。

90年代後半から2000年代初頭に、CSSが複雑なポジショニングを処理するほど進(jìn)歩していなかったため、スライスは一般的にWebレイアウトの構(gòu)築に使用されました。デザイナーはPhotoshopに完全なWebページのモックアップを作成し、スライスし、開(kāi)発者はHTMLのテーブルを使用してそれらのスライスをつなぎ合わせます。

彼らがどのように働いたか、そして人々が彼らを使用した理由は次のとおりです。

スライスは何でしたか？

スライスは、構(gòu)成の一部を個(gè)別にエクスポートできる設(shè)計(jì)ツールで定義されている長(zhǎng)方形の領(lǐng)域です。 Photoshopでは、ナビゲーションバー、ロゴ、コンテンツエリア、または視覚コンポーネントの周りにスライスを描くことができます。

• レイヤーに基づいて手動(dòng)または自動(dòng)スライスを作成することができます
• 各スライスには、JPEG、PNG、またはGIFなど、獨(dú)自のエクスポート設(shè)定があります
• エクスポートするとき、ツールはすべての畫(huà)像を並べるHTMLテーブルを生成しました

これにより、開(kāi)発者がカスタムHTMLまたはCSSを作成しなかった場(chǎng)合でも、視覚的なデザインをブラウザに表示できるものに簡(jiǎn)単に変えることができました。

スライスがWebレイアウトに使用された理由

最新のCSSレイアウト（FlexBoxやGridなど）の前に、開(kāi)発者はHTMLテーブルに大きく依存してページ構(gòu)造を制御していました。それにより、スライスは自然にフィットしました。これらは、元のデザインを反映したテーブルベースのレイアウトにエクスポートできます。

一般的な用途が含まれます：

• ヘッダー、フッター、サイドバーを別々の畫(huà)像としてエクスポートします
• 簡(jiǎn)単にコーディングできなかった複雑な背景グラフィックを処理します
• 基本的なサイトのハンドコーディングをスキップすることにより、開(kāi)発をスピードアップします

Pixelに最適な結(jié)果を望んでいて、ボンネットの下でどのように行われたかを気にしないクライアントと協(xié)力するとき、それは特に人気がありました。

スライスベースのレイアウトが実際にどのように機(jī)能するか

デザイナーがレイアウトをスライスすると、通常、Photoshopの「エクスポート」または古い「WebのSave for Web」機(jī)能を使用してファイルとHTMLを生成します。

結(jié)果は次のように見(jiàn)えました：

• 小さな畫(huà)像ファイル（ボタン、背景、アイコン）でいっぱいのフォルダー
• <table>タグを備えたHTMLファイルは、それらの畫(huà)像を並べて配置する<li>間隔とアライメントを制御するインラインスタイルまたは屬性</li> <p>開(kāi)発者は、生成されたコードを微調(diào)整してクリーンアップまたは機(jī)能を追加することがありますが、レイアウトは本質(zhì)的にテーブルセルと一緒に縫い付けられた畫(huà)像のコラージュでした。</p> <h3 id="彼らは今時(shí)代遅れですが-理由がないわけではありません">彼らは今時(shí)代遅れですが、理由がないわけではありません</h3> <p>今日、スライスはまったく使用されていません。最新のWebデザインは、レイアウト、タイポグラフィ、および応答性のある動(dòng)作のためにCSSに依存しています。 FigmaやSketchなどのツールは、畫(huà)像をカットすることでページを構(gòu)築しなくなったため、スライスさえ提供しません。</p> <p>それでも、ブラウザが一貫性がなく、CSSが限られている場(chǎng)合、スライスにはその場(chǎng)所がありました。何年もの間、彼らは、結(jié)果が常にセマンティックでもアクセスしやすい場(chǎng)合でも、設(shè)計(jì)と開(kāi)発の間のギャップを埋めるのを助けました。</p> <p>基本的に、スライスは、デザイナー向けにWebが構(gòu)築されていなかった時(shí)代の実用的な回避策でした。</p> </table>

以上がスライスとは何ですか、そしてそれらは伝統(tǒng)的にWebデザインのレイアウトにどのように使用されていましたか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。