サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
体力トレーニング
jam25.jp
WebP対応の注意点 WebPを使ううえでの注意点が2つありますので、確認してみましょう! 対応ブラウザの確認 まずWebPに対応させる場合の注意点として、WebPに対応しているブラウザでは、.webp の画像が吐き出され、対応していないブラウザの場合 .png など一般的な画像が書き出されるようにする必要があります。 ダウンロードしても開けない WebPはダウンロードしても画像として保存されません。 その為、ユーザーにダウンロードさせることを目的とした画像の場合に限っては、WebP以外の形式にしてあげるといいでしょう! backgroundでWebP使う場合 CSSでは分岐という概念がなく、pictureタグも使用できないため、jsプラグイン「Modernizr」を使用。 インストール方法、CSSの記述方法については以下をご確認ください。 プラグインインストール方法 1.Add your
PWA化の前に用意が必要なもの 2つの画像 ファビコンや、スマホのホームアイコンで使用されるため以下の2つの画像を用意しましょう。 192px × 192pxの画像512px × 512pxの画像 ウェブサイトをSSL認証(https化)させる WordPressでサイトを運用される人であればXserverを使っている人は多いのではないでしょうか。 Xserverを利用されている方であれば、無料で独自SSL認証させることが可能なためSSL化対応させましょう。 エックスサーバーについてはこちら スポンサードサーチ プラグインのインストール プラグインのインストールする方法を、2つご紹介いたします。 どちらでインストールしても結果は変わりません、ご自身がやりやすい方法でインストールください。 Zipファイルアップロードする方法 STEP1PWA プラグインをダウンロード Super Progr
CSSとは? CSS(Cascading Style Sheets)とはWebサイトをデザインするためのマークアップ言語です。 皆さんが普段閲覧されるWebサイトは、基本HTML・CSS・JavaScriptなどの言語を組み合わせて構築されています。 スポンサードサーチ スタイルシートが必要な理由 Webサイトは今、ひとつのコミュニケーションツールとなりつつあります。 人に物事を伝える場合、みなさんが一番気を付ける部分は「わかりやすく」という点ではないでしょうか。 Webサイトも同様に人に伝えるもので、スタイルシートというものを使いデザインすることによって読む人・見る人にとってわかりやすいサイトを作ることができます。 もちろん、それ以外にもメリットがありますので4つほどご紹介します。 メンテナンスがしやすい サイトを作る時点ではあまり気になりませんが、運用するうえでメンテンナンスというのは
はじめに 今回は、JavaScriptで変数を使う方法について解説します。変数は、JavaScript以外のプログラミング言語においても必須の知識ですので、ぜひとも身につけましょう。 スポンサードサーチ 変数 変数とは何か? 変数とは、数値などのデータに名前を付けることで、繰り返し利用できるようにする機能のことです。データを入れる箱の様なものだと思うとわかりやすいと思います。 変数を定義する:let 変数名; 変数を利用する際には、まず変数に名前をつけます。名前を付けるためには「let 変数名;」と記述します。「変数名」の箇所は一部例外はありますが、英数字、アンダースコア、ドル記号を組み合わせて好きな名前をつけることができます。 // 変数を定義する(名前をつける) let 変数名; 変数の命名ルール 変数には好きな名前をつけられますが、命名規則に法っることが基本です。命名規則と聞いて難し
どうも、なみぞうです。 この度、HTML5・CSS3を勉強できる一覧サービスを開始しました。 その名もHTML CSS Glossary!(HTML CSS 用語集) HTML CSS Glossary 使い方 HTML5 もしくは CSS3のコードをフォームに入力ください。 サジェスト(予測変換)されますので、該当するタグを選択ください。 Enter を押してください。 Enter を押すと対象の文言にジャンプします。 左から対象のタグ・読み方・使い方と並べています。 今後、こちらのコンテンツに対してその用語はどういった使い方ができるのか?などをご紹介していきます。 初心者の方・これからWebデザイナーを目指す方は是非、ブックマークしておいてくださいね! 引き続き、JAM25をよろしくお願いいたします。
HTML・CSSの辞典コンテンツです。気になるワード、使い方が気になるタグなどを検索してご利用ください。
PHPのif文とは if文を使うと条件に応じて処理を分岐させることができます。「Excelだったらif文を使ったことがある」という方は多いのではないでしょうか? 役割はPHPのif文もExcelのif関数も同じです。「ある条件と合致すればAの処理を実行し、合致しなければBの処理を実行する」といった命令文です。 特定の条件でのみ実行させたい処理がある時はこのif文を使いましょう! if文の書き方 if文は下記のように記述します。 <?php if(条件){ 条件に合致したら実行したい処理 } ?> ifのすぐ後ろの() (丸括弧)には条件式を記述します。{} (波括弧)には条件に当てはまった時に実行する処理を記述します。以上でif文は完成です! if文を実際に書いてみよう! 具体的には以下のようにコードを記述します。 <?php $user = "男"; //変数$userに文字列「男」を代
はじめに 本記事では、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
はじめに 本記事では、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を使うことをオススメします。個人差はあると思いますが他のソフトより扱いやすいと思いま
どうも、なみぞです。 普段、みなさんが電車に乗っている際、周りを見るとスマートフォンを触ってる人たくさんいますよね。 これは、昔と比べてWebというものが進化した結果だと思っています。 そんなWebについて今回は説明していきますね! こんな人にオススメの記事 自分の趣味のサイトを立ち上げたい方 会社のサイトを作りたい方 Webのことを少しでも理解したい方 Webサイトについて把握しよう! Webサイトの仕組み まずは仕組みから勉強していきましょう! みなさん調べものなどでスマホやPCから検索されたこと何度もありますよね? その際、スマホやパソコンからWebサーバーにコレ見せて!と情報が送られており、Webサーバーはその情報に対して、はいどうぞ~と情報が返ってくるシステムになっています。 感覚としては超高速な宅配ピザみたいな感覚に近いかもしれないですね! ホームページとWebサイトって違うの
もっとも身近なものの改善でSEO効果を得れる可能性のあるWebPについて解説。WebPはGoogleが開発した画像フォーマットで、最大の特徴は「綺麗な画質のに軽い」ということです。Webサイトなどで一般的に使用されるPNGと比較したところファイルサイズが26%も軽くなり、JPEG画像では25〜34%も軽くなると言われております。 記事をもっと見る
パス政です。 『プログラミング』IT関連の方は馴染みのある言葉ですね。 今まで触れてこなかった方にとっては「プログラミングって言葉だけ知ってるよ。」 「実際何してるの?」 「小学生の習い事で人気って聞いたことがある。」 「面白そうだし勉強してみようかな?」 そんな方たちに向けて今回は『プログラミング』とはそもそもなに?という疑問にお答えしていきます。 プログラミングってなに? 「プログラミング」とは「コンピュータに命令すること」です。 AIや自動運転といったものが最近話題になっていますが、そもそも人間の命令がないと動けないのです。 その命令をする時に使う言葉が「プログラミング言語」です。謂わば人間とコンピュータの共通言語です。 プログラミング言語を記述したり、どんな命令を出そうか考えることを一般的にプログラミングと呼んでいます。 意外に身近なプログラミング プログラミングを覚えれば簡単な計
JAM25の記事を見る [adinserter block="5"]
はじめに JavaScriptは、動的なWebサイト制作には欠かせないプログラミング言語です。 本記事では、JavaScriptとは何か、Webサイト構築において何ができるのか具体的な事例を交えてご紹介します。 スポンサードサーチ JavaScriptってどんな言語? JavaScriptはブラウザ上で動作するプログラミング言語として1995年に登場しました。 現在のWebページの多くは、文章構造を作るHTMLと、見た目を装飾するCSS、そしてそれらを操作するJavaScriptで構成されています。 「ボタンを押すとメニューが表示される」機能や、Google MapsやFacebookなどの画面上で様々な操作ができるアプリケーションの様な機能もJavaScriptで実現されています。 JavaScriptを学ぶことでWebでできることの幅がグーンと広がります。 JavaScriptで何がで
どうもなみぞうです。 みなさま、GWいかがお過ごしでしょうか。 本日より元号が「令和」になるということもあり、1時間という限られた時間のなかで、令和をCSSで再現してみました。 HTMLやCSSを覚えることで様々なことができるようになりますので、ぜひ一緒に勉強していきましょう。 令和をCSSで再現してみた! 令和でも、JAM25を何卒よろしくお願い申し上げます。 おまけソースコード HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>令和</title> <link href="reiwa-style.css" rel="stylesheet" type="text/css"> </head> <body> <header> <section id="rei-wrap"> <section i
PHPとは PHPは1995年に生まれたプログラミング言語です。 プログラミング言語は多くの種類がありますが、PHPが得意とするのはWebアプリケーション開発です。「Webアプリケーション」と言われてもピンとこない方もいると思います。いくつか例をあげてみましょう。 ショッピングサイト AMAZONが代表的ですが、ショッピングサイトはPHPが良く使われています ネットバンキング ネットで銀行の残高確認をしたことはないでしょうか?ネットを使っての残高確認や振込ができるのもWebアプリケーションがあるからです。 ブログサービス ニュースや記事をアップできます。この仕組みもWebアプリケーションです。 SNS 皆さんもよく利用しているTwitterやInstagramもWebアプリケーションの一種です。
どうも、なみぞうです。 Chrome75でリリースされる予定のなかから、魅力的なアップデートがありましたので今回そのなかのひとつloading属性について解説いたします。 Lazyloadとは? ウェブサイトのサイト表示の殆どは画像などの読み込み時間に使われています。そのため、画像などを遅延読み込みさせることで、ページの表示を速くするテクニックのひとつです。 PCやスマホの画像など表示されるエリアにスクロールされるまで読み込みをさせず、スクロールされたら表示させるということができるようになります。 今まではJavaScriptやjQueryのプラグインなどで実装できていましたが、Chrome75へのバージョンアップによりHTMLへの簡単な記述だけでLazyloadが実装できるようになりそうなので、今回はそちらをご紹介いたします。 スポンサードサーチ 従来のLazyloadのデメリット 一番
PWAとは? モバイル向けのWebサイトをAppstoreやGoogle Playなどで見かけるスマートフォンアプリのように使える仕組みのこと。 Googleのはじめてのプログレッシブウェブアプリによると以下のようにまとめられています。 プログレッシブウェブアプリは、デスクトップとモバイルの両方でインストール可能なアプリと同等の体験を提供し、ウェブ上で直接構築・配信される高速で信頼性の高いウェブアプリです。何より重要なのは、それらがどのブラウザでも動作するウェブアプリでることです。 ちょっとわかりづらいので、項目ごとにまとめてみましょう。 Webの高速化&高信頼性について Web業界では今スピードがなによりも重要視されており、すべてのウェブサイトに対して最低5秒以内にしなければなりません。 それを補うのがPWA(Progressive Web Apps)です。 高速&高信頼性! Web上で
このページを最初にブックマークしてみませんか?
『ジャム! - フロントエンド専門Webメディア』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く