ホームページ作成 人気記事ランキング(10ページ目)

HTMLソースやCSS(スタイルシート)ソースを編集する最初のステップとして、お使いの環境に合わせたソース編集方法をご紹介。ホームページ・ビルダーなどのホームページ作成ソフトでHTMLやCSSソースを編集したり、メモ帳などのテキストエディタで各種ソースを編集したり、CMSツール上でソースを編集したりする方法を解説。ソースを編集できない場合の対策も。

リンクを作る場合や、画像を表示する場合には、「リンク先ページ」・「表示する画像」など、ファイル名を指定する記述が必要です。そのような外部ファイルの指定方法にはいくつかの種類があります。その方法を解説。

ホームページの作り方を4通り紹介し、それぞれのメリットとデメリットを分かりやすく解説します。ウェブサイトを作成するなら、簡単で費用をかけずに(できれば無料で)作りたいですよね。初心者の方でも比較的簡単な作成方法を選んだので、スキルや目的に合わせて作り方を選んでみて下さい。

CSS3とは、ウェブページのデザインやレイアウトを作る従来のCSS(スタイルシート)に、便利な仕様がたくさん追加された新しい規格のことです。過去のCSSと互換性があるため、新旧の書き方を混ぜて簡単に使えます。CSS3では従来のCSSから何が増えて何ができるようになったのか、CSS3の特長や概要を表示例と共にご紹介。

ホームページをスマホ対応にする方法として、サイト制作前に確認しておきたいポイントや、スマホ用ブラウザの仕様による注意点などを簡単に解説。スマホサイトに特殊な作り方は必要なく、HTML＋CSSはPCサイトとほぼ同じ書き方で作成できます。画面の小さなスマートフォンに適したデザインで、モバイル対応Webサイトを作ってみて下さい。

スマートフォン用にウェブページを作っても、コンテンツが多ければ自動的に縮小されて表示されます。これは、PC用ウェブサイトをうまく閲覧するためには必要な機能ですが、スマートフォン用にデザインしたページの表示では少々困ります。そこで、自動縮小を防ぐ「viewport」の記述を使ってみましょう。

CSSのWebフォント機能の簡単な使い方を解説。無料で900種類以上のWebフォントが使える「Google Fonts」の使い方と、日本語Webフォントが700種類以上あるモリサワ「TypeSquare」の使い方を紹介し、自サイトにアップロードしたフォントファイルをWebフォントとして使うCSSの書き方も解説。欧文(英数字)、日本語、アイコン(絵文字)など、望みのWebフォントを探してみて下さい。

大きさの異なる複数のブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動整列してくれる「Masonry」の使い方を解説。横幅や高さの異なるボックスがいくつあっても、できるだけ無駄な隙間ができないように詰めて配置してくれます。当初の「jQuery Masonry」とは違ってjQueryなしで動作可能になり、CDN経由で読み込めるようにもなって手軽になりました。

HTML、CSS、JavaScript、PHPなど様々な言語のソースをウェブ上に掲載する際、綺麗に読みやすく表示してくれる「SyntaxHighlighter」の設置方法・使い方をご紹介。ソース部分だけを一括コピーしやすくする機能もあり、便利です。

HTMLに書いた文字をCSSで装飾する際に、1文字ずつ異なる文字色で表示されるよう指定する方法を解説。HTMLの特定の要素内に書かれた文字列を、JavaScript（jQuery）を使って文字単位に分解して個別の要素でマークアップすれば、CSSのnth-child疑似クラスなどを使うことで1文字ずつ個別のスタイルを適用できます。1文字ずつ異なる色でカラフルに表示したい場合に便利。