CSSとは？ CSS（Cascading Style Sheets）とはWebサイトをデザインするためのマークアップ言語です。 皆さんが普段閲覧されるWebサイトは、基本HTML・CSS・JavaScriptなどの言語を組み合わせて構築されています。 スポンサードサーチ スタイルシートが必要な理由 Webサイトは今、ひとつのコミュニケーションツールとなりつつあります。 人に物事を伝える場合、みなさんが一番気を付ける部分は「わかりやすく」という点ではないでしょうか。 Webサイトも同様に人に伝えるもので、スタイルシートというものを使いデザインすることによって読む人・見る人にとってわかりやすいサイトを作ることができます。 もちろん、それ以外にもメリットがありますので4つほどご紹介します。 メンテナンスがしやすい サイトを作る時点ではあまり気になりませんが、運用するうえでメンテンナンスというのは

はじめに 本記事では、どんなWebサイトでも使われている7つのタグについて解説します。 前回記事『【HTML・CSS】美しいサイトは骨までキレイ？HTML5のアウトラインを学ぼう！』のHTML5のアウトラインを理解しておくとスムーズです。 今回ご紹介するタグはheader, nav, main, section, article, aside, footerの7つです。これらはどのWebサイトでも見られる頻出のタグなので使い方をチェックしておきましょう。 スポンサードサーチ header（ヘッダー） headerとは header（ヘッダー）はWebサイトにおけるヘッダーを明示するタグです。header要素はアウトラインを生成しません。 headerの定義：MDN Web Docs header要素は、導入的なコンテンツ、ふつうは導入部やナビゲーション等のグループを表します。見出し要素だけ

はじめに 今回は、JavaScriptで変数を使う方法について解説します。変数は、JavaScript以外のプログラミング言語においても必須の知識ですので、ぜひとも身につけましょう。 スポンサードサーチ 変数 変数とは何か？ 変数とは、数値などのデータに名前を付けることで、繰り返し利用できるようにする機能のことです。データを入れる箱の様なものだと思うとわかりやすいと思います。 変数を定義する：let 変数名; 変数を利用する際には、まず変数に名前をつけます。名前を付けるためには「let 変数名;」と記述します。「変数名」の箇所は一部例外はありますが、英数字、アンダースコア、ドル記号を組み合わせて好きな名前をつけることができます。 // 変数を定義する（名前をつける） let 変数名; 変数の命名ルール 変数には好きな名前をつけられますが、命名規則に法っることが基本です。命名規則と聞いて難し

どうも、なみぞうです。 この度、HTML5・CSS3を勉強できる一覧サービスを開始しました。 その名もHTML CSS Glossary！(HTML CSS 用語集） HTML CSS Glossary 使い方 HTML5 もしくは CSS3のコードをフォームに入力ください。 サジェスト（予測変換）されますので、該当するタグを選択ください。 Enter を押してください。 Enter を押すと対象の文言にジャンプします。 左から対象のタグ・読み方・使い方と並べています。 今後、こちらのコンテンツに対してその用語はどういった使い方ができるのか？などをご紹介していきます。 初心者の方・これからWebデザイナーを目指す方は是非、ブックマークしておいてくださいね！ 引き続き、JAM25をよろしくお願いいたします。

HTML・CSSの辞典コンテンツです。気になるワード、使い方が気になるタグなどを検索してご利用ください。

はじめに 本記事では、HTML5のアウトラインについて解説します。 アウトラインはウェブページの構造を明示化する考え方です。綺麗なアウトラインを作ることにより、ページ内の構造や優先度を検索エンジンに明示化することができます。 HTML5のアウトラインの概念を理解する 「明示的アウトライン」と「暗黙的アウトライン」の二つのアウトラインを把握する アウトラインの決まり方を理解する（←重要） スポンサードサーチ HTML5のアウトラインについて アウトラインとは？ アウトラインとはアウトラインアルゴリズムのことを指し、検索エンジンから見たWebページの構造を表す概念です。一般的に階層構造（入れ子構造）をとります。 Google等の検索エンジン対して、「ここがメインコンテンツ」「ここがコンテンツの区切り」「ここはオマケ」等を明示することで、検索エンジンにWebページを正しく解釈してもらうことができ

はじめに 本記事はブログでよく使うHTMLタグについて解説します。ブログの他に、企業のコーポレートサイトや情報サイトなどでも共通です。「HTMLは難しい」と思われている方でも今日から使える情報をご紹介します。一つのブログ記事を書く際に必要な「description」についてや、「無料でも使えるHTMLやCSSの編集ができるブログサービス」についてもご紹介します。 スポンサードサーチ ブログでHTMLタグを使う方法 ブログでHTMLタグを使うには入力形式を「HTML編集モード」を選択します。ブログサービスによって「HTML編集モード」の呼び方は異なりますので、詳しくはお使いのブログサービスにてご確認ください。一部のブログサービスでは、有料版でHTML編集が可能になるものや、編集制限があったり、編集自体できないものもあるのでご注意ください。 次項に各種ブログサービスのカスタマイズ性能（HTML

WordPressとは？ まずWordPressとは、2003年に開発が始まったオープンソースのブログ投稿管理システム、CMS（コンテンツマネージメントシステム）と言われるものです。 サイトコンテンツを管理しやすくなるというメリットの他に、Webの専門知識がない人でもサイト管理が行える為、幅広いジャンルにて利用されています。 オープンソースとは？ ソースコード（プログラミングされたもの）を無償で公開しているため、誰でも自由に改良・再配布ができるようにしたソフトウェアのことです。 世界中で一番使われているCMS 世界中で一番使われているCMSがWordPressですが、具体的にどれだけの使用率があるのかを確認しましょう。 Q-Success2019年11月のデータでWebサイト向けCMSのシェア率が発表され、その中でWordPressが群を抜いて1位の「34.8%のシェア率」を誇っています。

はじめに 本記事では、Webサイト作りの基本となるディレクトリについて解説します。 ファイルとディレクトリの違いについて理解するWebサイトを構成するファイルを確認するWebサイトの階層構造とURLが決まる仕組みを理解する スポンサードサーチ ファイルとフォルダの違いについて確認 ファイルとフォルダの違いについて確認しましょう。 ファイルとは、書類のこと ファイルとは、コンピュータの世界における書類のことです。IT用語辞典には、下記のように記載されています。 ファイルとは、コンピュータにおけるデータの管理単位の一つで、ストレージ装置（外部記憶装置）などにデータを記録する際に利用者やOSから見て最小の記録単位となるデータのまとまり。 IT用語辞典 ファイルの特徴 「ファイル名.拡張子」と名前が付いたデータのこと （例）index.html、style.css、script.js、main.p

PHPとは PHPは1995年に生まれたプログラミング言語です。 プログラミング言語は多くの種類がありますが、PHPが得意とするのはWebアプリケーション開発です。「Webアプリケーション」と言われてもピンとこない方もいると思います。いくつか例をあげてみましょう。 ショッピングサイト AMAZONが代表的ですが、ショッピングサイトはPHPが良く使われています ネットバンキング ネットで銀行の残高確認をしたことはないでしょうか？ネットを使っての残高確認や振込ができるのもWebアプリケーションがあるからです。 ブログサービス ニュースや記事をアップできます。この仕組みもWebアプリケーションです。 SNS 皆さんもよく利用しているTwitterやInstagramもWebアプリケーションの一種です。

はじめに 本記事では、HTML5のタグと基本構文の書き方について解説します。 HTML5のタグを理解するHTML5の基本構文を書くブラウザに「Hello world!」の文章を表示させる スポンサードサーチ HTMLタグとは何か？ タグは文章に意味や役割を持たせる印 タグとは、文章に意味や役割を持たせる印のことです。「見出し」や「段落」といった文章構造をタグという印を使って明示します。 開始を表すタグを開始タグ（<>）、終了を表すタグを終了タグ（</>）と呼びます。終了タグ（</>）がない空要素というものもあります。<と>の間にある意味や役割を表す文字を要素名と呼びます。開始タグ（<>）〜終了タグ（</>）までを含む全体を要素と呼びます。 なぜタグを使う必要があるのか？ Webサイトでタグを使用して文章構造を記す理由、それはWebがどんなユーザーに対しても情報を同じように伝えることができる

はじめに HTMLは普段目にする通販サイトやまとめサイト、企業のウェブサイトなどで欠かせないものですが、どういう意味や役割で使われているか知っていますか？今回はその「HTML」について徹底解説をします。 HTMLはCSS、JavaScriptといったプログラミング言語と合わせてウェブサイトを作るのに用いられますが、個人の好き勝手に自由に使って良いわけではありません。各プログラミング言語の役割に応じて適切に使い分ける必要があります。 HTMLはWebサイトの骨を作るとても重要なものです。ブラウザを通して「人」に情報を伝えるだけでなく、検索エンジンや音声読み上げソフトのような「コンピュータ」にも同じく情報を伝えることが可能です。 さまざまなルールを知り、ポイントをおさえることで理想的なウェブサイトを作りましょう。CSSとJavaScriptとの違いや、見落とされがちな注意点なども解説しますので

どうも、なみ蔵です。 最近では写真加工アプリなど、すさまじい数の画像編集アプリがあるので誰でもすごい画像が作れちゃいますよね！ でも、画像編集ソフトの代表格といえばやはりPhotoshopですよね。 使い方が難しく取っ付きにくいものなので、もし使えないという方は、これを機に一緒に勉強していきましょう。 この記事は、下記のような方に向けた記事になります。 Photoshopで作るものを考えよう 作るもののサイズを決めよう！ 今回作成するもののサイズ：幅:1485px 高:1920px LINEのホーム画像の場合：幅640px 高520px LINEのアイコンの場合（丸）：幅:480px 高:480px Instagramのアイコンの場合（丸）：幅:155px 高:155px Twitterのアイコンの場合：幅:400px 高:400px 使う画像を選ぼう！ 今回使用する画像はコレ！ Phot

ローカルでのサーバー環境構築 PHPはサーバー環境で動作する言語なので、自分のPCにサーバーと同じ環境を用意してあげる必要があります。そのために、下記で紹介するソフトをインストールしていきます。 MAMP MAMPとはレンタルサーバーを借りずにローカルのPCで開発環境を構築できるソフトです。無料で使用でき、PHPの開発も問題なくできます。 名前の由来は「Macintosh」、「Apache」、「MySQL」、「PHP」の頭文字をとったものです。「Macintosh」とありますが、Windowsの方も問題なく使えますのでご安心ください。 それでは「MAMP」をインストールしていきましょう！ MAMPをインストールしよう 下記にMAMPのダウンロードページのリンクを記載しました。Macを使用している方はMAMPを使うことをオススメします。個人差はあると思いますが他のソフトより扱いやすいと思いま